Googleデベロッパー・ツール

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

 

Google Chrome Developer Tools

Webアプリ開発の上で便利な様々なツールを集めた開発者向けツール

 

・まず開くには

Macの場合はCommandOptionIキー

または右クリック、検証

 

[Elements]パネル

 

<マウスによる各種操作>

矢印アイコンで検証したい要素を選択できる

タグ名、属性をダブルクリックで編集できる。

HTMLタグの右クリックメニューより[Edit as HTML]

タグ全体を編集したり、タグを追加したりできる。

 

<要素の属性/スタイルの確認>

・Stylesグループ

要素の適用されているスタイルの確認と編集が可能

チェックボックスが表示されて、スタイルを外した時と適用された時の違いを即座に確認できる。

スタイルの値や、スタイルを追加できる

色要素の編集も簡単にできる。

 

・DOM Breakpointsグループ

Document Object Modelのイベントに対するブレークポイント

「これらの要素が変更されるタイミングでスクリプトにデバックしたい」って時に使う。

 

DOMエレメントつりーでブレークしたい要素を右クリックして[Break on]メニューから選択、

1.Subtree modifications    =>要素が変更された時ブレーク

2.Attributes modifications =>要素の属性が変更された時にブレーク

3.Node removal                 =>要素が削除された時にブレーク

例;テキストボックス要素を選択、2を選択すると

  テキストボックスに値を入力した時の処理がブレークされる

 

・Event Listenersグループ

要素に関連づけられたイベントハンドラーの確認ができる

 

[Network]パネル

ページのリクエストをしてからの通信内容を一覧で表示できるため、ページ表示が遅くなっている原因を特定するのに非常に有益。

Status:HTTPステータス

Initiator:ファイルを呼び出す起点。JavaScriptコードから読み込まれた時などはJavaScriptファイル名が表示される

Time:DLにかかった時間。

Preserve log:ページを遷移してもログを残しておきたい場合はチェックする

フィルター:リクエストの種類をフィルターして、特定の項目だけに表示を変えることができる。

 

<各通信項目の詳細表示>

  • Headersタブ
  • HTTP リクエストとレスポンスのヘッダーを確認できる
  • Previewタブ
  • テキストデータならレスポンスのテキスト、画像ファイルなら画像情報が表示される
  • Responseタブ
  • レスポンス本文
  • Timingタブ
  • ファイルの取得にかかった時間

 

[Sources]パネル

CSSJavaScriptのコードをデバックできる昨日

Visual StudioEclipseのようなIDEと同様にデバックに必要な機能が備わっている。

 

<コードの整形>

左下のコード整形ボタンを押すとインデントとかもついた綺麗な形に

 

<デバッカー機能>

サイドバー(今は下の表示されているみたい)にある

項目 説明
Watch Expressions ウォッチ式。[+]アイコンをクリックして追跡したい変数を追加できる
Call Stack コールスタック。ブレーク時の処理の呼び出し階層を確認できる
Scope Variables ブレーク時に実行中のスコープにある変数とその値を確認できる
Breakpoints JavaScriptコードのブレークポイント
DOM Breakpoints Elementsパネルでも説明したDOMイベントのブレークポイントを確認できる
XHR Breakpoints AjaxなどJavaScriptコードからのXMLHttpRequest呼び出しをドメイン単位でブレークできる
Event Listener Breakpoints ページの中で発生したイベント単位でブレークを指定できる。例えば、マウスのクリックやアニメーションの開始時など
Workers Web Workersの開始時にデバッグを開始するかどうかを指定できる

 

[Console]パネル

コマンドライン入力により様々な機能ができる

・ログの観覧

インタラクティブな操作

Consoleパネルは全てのパネルからアクセスできるため、

Elementパネルで要素を操作したり、SorcesパネルでJavaScriptのオブジェクトを操作したり、デバックに便利