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

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タブ


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


ブレイクポイントの設定

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

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

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

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

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

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


ステップ実行

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

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


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

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

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

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

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




Networkタブ


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

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

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

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

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

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




Applicationタブ


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




おわりに

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

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

Additional Images




Comments

Add your comment

Book a free consultation
user-symbol

Stay in touch

Get Practical Tips For Business and Developers.
Learn about PieceX Community Needs for Source Code Projects.
Be the First to Know PieceX Newest Free Community Code Projects.