開発でしょっちゅうお世話になっている、google chromeのデベロッパーツールについて。
- 要素の検証
- データの流れ
の2つについて触れてみたいと思います。
要素の検証
もっぱら、HTMLなどビューに関わる部分です。 自分の書いたコードがwebページでどのパーツを構成しているのかがわかりやすくなります。 確認したいページに来たら、右クリック→要素の検証、でページ下部に新たなページが立ち上がります。 このページにHTMLのソースページが出てきます。このソースコードにカーソルを合わせると対応するwebページのパーツが 色のついた網掛けになります。つまり、自分の書いたソースコードが自分の意図したように表示されているのかの確認が容易に行えます。しかも、その場で一時的な変更が可能です。変更したい箇所で右クリック→Edit as HTMLをクリックすることで直接編集が可能です。（ファイル本体への変更はありません）便利ですね−
データの流れ
webページでは投稿したりボタンをクリックすることで別のページに飛ぶなどの動的処理が行われます。そんな時にソースコードやファイルとしてはどこに飛んでいるのだろうか、ということが気になることがあります。もし自分が望んだ通りに処理するソースコードが書けても、そこに飛んでくれなければ正しく動きませんから。 先ほどの要素の検証と同じようにぺージを立ち上げます。そしてツールバーのNetworkタブをクリックします。 そして、例えば投稿ボタンを押します。そうすると何やらファイル一覧が…これをクリックするとそれぞれRemote AdressやRequest URLなどの情報が得られました。これでこのボタンをクリックしたらこの動作を呼び出しているのかなどが分かります。
と紹介してはみたもののまだまだ知らない機能が沢山あります。きっと便利なんだろうけどまだわからない…
