ブラウザTool

HTML/CSS/JavaScriptのデバッグツールWebInspecto

Google ChromeではそのWebInspectorにデベロッパーツールという名前が付けられており，デフォルトで利用することができるようになっています・・・この解説はこちら2010年の記事から。

初めに知っておきたいのは「このツールのツール」である「ルーペ」で、左上にあります。

一度クリックするとマウスが要素選択モードになり，ページ側の要素をクリックしたときにその要素がハイライトされるようになります（一度ページ側をクリックするとそのモードは解除されます）。

さて、 ８つのタブがあります。（2013年時点ではさらに増えています）

1. Elementsパネル（HTML・CSSの確認と編集）
2. Resourcesパネル（ネットワークの監視）
3. Scriptsパネル（JavaScriptのデバッグ）
4. Profilesパネル（JavaScriptのパフォーマンスチェック）
5. Storageパネル（Cookie, localStorageの確認・編集）
6. Timelineパネル（レンダリングを含めたパフォーマンスチェック）
7. Auditsパネル（YSlowのようなパフォーマンスチェックツール）
8. Consoleパネル（JavaScriptのコマンドラインツール）

そして右側にある「HTML・CSSプロパティビュー」

その中のタブ５つ

1. Computed Style
2. Show inherited
3. Styles
4. Event Listeners

その他いろいろ

初心者が利用できるツールというと・・・Elementsパネル（HTML・CSSの確認と編集）あたりでしょうか。

こちらの解説も見ておきましょう。（２０１３年記事ですのでこちらの方がよろしいようで）

Chrome Developer Toolsの主要機能