GoogleChrome デベロッパーツールって何？

GoogleChrome デベロッパーツールって何？

はじめに

Google Chromeのデベロッパーツールは、フロントエンド開発において欠かせないツールです。

他のブラウザにも同様のツールはありますが、Chromeのものが最も使いやすいと感じる人が多いのではないでしょうか。

デベロッパーツールは機能毎にタブで別れています。

まずはデベロッパーツールでできることと使用頻度の高いタブについて簡単に紹介します。

デベロッパーツールでできること

Chromeの検証（デベロッパーツール）を使うと、例えば以下のようなことができます。

ウェブサイトやブログのHTMLとCSSコードをテストで書き換えて、表示をチェックすることができます。

ウェブサイトのコードがどのように書かれているのかもチェックすることができます。

様々な画面サイズでの表示をチェックすることもできます。これはウェブサイトやブログをデザインするうえで便利です。

基本的なタブ

Elementsタブ

Elementsタブは、タグの要素やスタイルを検証することができます。

Consoleタブ

Consoleタブは、コマンドライン入力により、さまざまな操作ができるようになっています。

あとはログの閲覧です。

Sourcesタブ

Sourcesタブは、CSSやJavaScriptのコードをデバッグできます。

Networkタブ

Networkタブは、ページのリクエストをしてからの通信内容を一覧で表示ができます。

Applicationタブ

CookieやWeb Storageの確認、編集ができます。

Elementsタブ

要素を編集する

要素の内容はダブルクリックすることで編集が可能です。

F2のショートカットキーを使うと、子要素もまとめて編集ができます。

また、Deleteキーを押すことで要素を削除することもできます。

マージンやパディング、サイズを確認・変更する

右側のComputedタブを開くと要素自身のサイズや、マージン、パディングを確認することが可能です。

クリックすることで、このまま編集することも可能です。

要素の変更に対してブレイクポイントを貼る

要素のstyleやクラスをJSで変更する処理を書く際に、要素の変更に対してブレイクポイントを使用すると便利です。

要素を右クリックすることでBreak onという表示が出てきます。

設定したブレイクポイントは、右側のDOM Breakpointsタブで確認が可能です。

DOM Breakpointsというチェックボックスにて、オンオフの切り替えが可能です。

styleを編集する

右側のStylesタブでstyleの編集が可能です。

各カーソルを当てるとチェックボックスが表示されますので、クリックすることでオンオフを切り替えることができます。

Stylesタブにて、他にも以下のようなことが可能です。

Filterに文字を入力すると、style名で絞り込みができます。

.cls をクリックすると、クラスを追加することができます。

element.style の欄に自由にstyleを追加することができます。

子要素を展開する

要素を右クリックして、Expand Recursivelyを実行すると全展開できます。

Consoleタブ

JSのエラーやconsole.logを表示する以外に、任意のJSを入力して実行することができます。

関数やプロパティについては、タブで補完が可能です。

JSを実行する際は、ブレイクポイントと併用することが多いです。

左から2番目の丸のボタンでクリアが可能です。

Sourcesタブ

デバッガーを起動することで、ＪＳのデバッグをすることができます。

ブレイクポイントの設定

左のツリーからＪＳファイルを選択し、ファイルの行数部分をクリックすることでブレイクポイントを設定できます。

ブレイクさせた状態にて、変数の値を確認したいことはよくあります。

変数の値を確認するには、以下の方法があります。

代入された変数は、その行の右側に値が表示されるのでそれを見る。

変数にカーソルをあてる。

Watchに変数を追加するなど。

ステップ実行

ブレイクポイントから1行進めたり、次のブレイクポイントまで進める処理は、ボタンで行うことができます。

ボタンにカーソルを当てると、ショートカットキーが表示されます。

次のブレイクポイントまで進む F8

ステップ実行(関数に入る) F9

ステップオーバー(関数に入らない) F10

ステップイン(関数に入る、ステップ実行との違いはよく分かっていない) Cmd + ;

ステップアウト(関数から抜ける) Cmd + Shift + ;

Networkタブ

JSや画像など、ページを開いた際に行われた通信を確認することができます。

APIのAjax通信のリクエストやレスポンスも確認することができます。

Disable cacheにチェックを入れるとブラウザキャッシュを無効にできます。

通信をクリックをすると、Headers や Previewのタブが表示されます。

右側のHeadersを下にスクロールすることで、リクエストヘッダやレスポンスヘッダ、クエリ文字列の確認が可能です。

Previewでは、JSONなどのAPIレスポンスを整形された状態で確認が可能です。

Applicationタブ

CookieやWeb Storageの中身を確認したり、編集することが可能です。

おわりに

ここまでデベロッパーツールの基本的な使い方の一例を紹介してきました。

ウェブ制作を行うのに欠かせないデベロッパーツールを触り始めるきっかけとなれば幸いです。