先日JSの開発／デバッグで開発者ツールを使っていたら、何それ？と言われてしまいました。
どうやら開発者ツールの存在を知らない方もいるようなのでこの機会にシェアしてみようと思います。
これを知っていると知らないとじゃ効率にかなり差が出ます！
開発者ツールの表示の仕方
大半のブラウザではキーボードのF12キーで表示されます。
私が使用しているブラウザはGoogle Chromeなので、例としてChromeの画面を以下に示します。
複雑なように見えますが、最低限知っておきたい機能について解説していきます。
各タブの説明
Elementsタブ
ページを構成するDOM要素が表示されるタブです。
主な機能としては、以下の通りです。
DOM要素の解析
下記赤枠のボタンで指定のDOM要素の構成が確認可能です。
普段は属性等が正しく設定されているかの確認に使用。
CSSの確認及び、一時的な反映
緑枠で選択した要素に設定されているCSSが赤枠に表示されます。
また、任意のプロパティの追加／削除、値の変更等も可能です。
ページを更新すると元に戻ります。
Consoleタブ
デバッグ情報やログが出力されるタブです。
主な機能としては、以下の通りです。
デバッグメッセージの表示の確認
console.log()等で出力されるデバッグメッセージの表示を確認します。
下記赤枠ボタンでログがクリアされます。
出力処理を行っているロジックへのジャンプ
出力されているログ行の右側にリンクが表示されており、そこから該当箇所へジャンプが可能です。
一時的なスクリプトの実行
コンソールからスクリプトの実行も可能です。
上記のように、任意のJavaScriptが実行可能です。
とはいえ、これに関しては使用頻度低めでしょうか・・・。
Sourceタブ
現在のページのHTML／JavaScript／CSSが表示されます。
主な機能としては、以下の通りです。
ソースの解析
現在適用されているソースの解析が可能。
以下は、このサイトの適用ソース（プラグイン）のソースを表示しています。
ブレークポイントの設定
とりあえずこれだけ知っていれば良い印象。
Visual Studioみたいにソース中にブレークポイントが設定できる。
・即時関数の場合は画面表示時に実行されるので、ブレークポイント設定後、表示を更新すると反映される。
・開発者ツールを非表示にするとブレークされない。
おわりに
IE、Firefoxでも確認しましたが、ほぼほぼ同じUIでした。
そしてローカルでサクサク確認できる環境がある場合は、そちらの方が良い事は言うまでもないです・・・。
