Google Chromeデベロッパーツール

目次

1. URI
2. パネル
   1. Console
   2. Network
   3. Sources
3. メニュー
   1. Show console drawer
   2. Hide console drawer
4. Console drawer

Chromeの起動オプション

--allow-file-access-from-files

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

URI

Google Chrom に特殊な URI を入力することで、様々な設定画面を表示することができる。

デベロッパーツール

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

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

Console

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

Network

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

Sources

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

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

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

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

Resources

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

メニュー

Google Chrome デベロッパーツールのメニューには、以下に示す項目がある。

• Dock side
• Show console drawer / Hide console drawer (toggle)
• Search
• Run command
• Open file
• More tools
  1. Animations
  2. Changes
  3. Coverage
  4. CSS Overview
  5. Developer Resources
  6. Issues
  7. Layers
• Shortcuts
• Help

Show console drawer

Console drawer を開く。

Hide console drawer

Console drawer を閉じる。

Console drawer

Console drawer には、以下にパネルがある。

• Console
• What's new
• Network conditions

Network conditions

Network conditions パネルには、以下に示す項目がある。

Caching

Disable cache にチェックを入れると、キャッシュを無効にする。

User agent

Use browser deault にチェックを入れると、ユーザー・エージェントをブラウザのデフォルト値にする。

Use browser deault のチェックを外すと、ユーザー・エージェントの値を指定できる。いわゆる、ユーザー・エージェント偽装である。

• Chrome — Android Mobile
• Chrome — Android Mobile (high-end)
• Chrome — Android Tablet
• Chrome — iPhone
• Chrome — iPad
• Chrome — Chrome OS
• Chrome — Mac
• Chrome — Windows

ユーザー・エージェントを変更した場合、F5 を押下して画面を更新する必要がある。

TVer 等、ユーザーエージェントをチェックして、Microsoft Windows と Mac 以外は動画を再生出来ないようにしているウェブサイトがあるが、本来は Linux の Google Chrome でも動画を再生できる筈である。このようなときは、ユーザーエージェントを偽装することにより、動画を再生できるようになる。