Google Chromeデベロッパーツール

Chromeの起動オプション

--allow-file-access-from-files

file URIスキームからの読み込みを許可する。Ajaxでローカルファイル(file:// path )を読み込めるようになる。

URI

DNS chrome://net-internals/#dns
Sockets chrome://net-internals/#sockets

デベロッパーツール

Chromeのデベロッパーツールを開くには、メニューから[その他のツール] - [デベロッパー ツール]をクリックする。

Chromeのデベロッパーツールは次の情報を表示することができる。

パネル 説明
Console JavaScript コンソール
Elements ウェブページの要素を検証できる。
Network ウェブページでロードされるリソースを検証できる。
Sources ウェブページで使用しているCSSJavaScriptを編集して、表示に反映させることができる。
Resources ウェブページを構成するリソース(Cookieローカルストレージ、セッションストレージ)を確認できる。
Audits ウェブページの診断を行える。
Console ウェブページのHTMLやJavaScriptのエラーが表示される。

Console

コンソール・パネルには JavaScript のエラー、ログ及びスタックトレースが出力される。

Network

HTTP Request Header、FormのPostデータ、HTTP Response Headerを見ることができる。

Sources

Sourcesパネルでは、Webページで使用しているJavaScrptやCSSを編集して、表示に反映させることができる。

ソースビュー上で右クリックすると、右クリックメニューが表示される。右クリックメニューの項目を次に示す。

項目 説明
Save JavaScriptやCSSの変更を表示に反映させる。ただし、ページをリロードすると、変更した内容は破棄される。
Save as 変更した内容をローカルのファイルに保存する。

ブレークポイントを設定するには、JavaScriptソースの任意の行番号を右クリックし、コンテキストメニューの「Add breakpoint」をクリックする。

ブレークポイントから実行を再開するには、「Resume script execution」のアイコンをクリックする。

Resources

ChromeデベロッパーツールのResourcesパネルは、次のリソースを確認できる。

Resource Description
Local Storage ローカルストレージ
Session Storage セッションストレージ