【学習準備】Google Chromeのデベロッパーツールの使い方を覚えよう

ブラウザに搭載されている開発者用機能のことをデベロッパーツールといいます。

ブラウザで実行されるHTMLやCSS、JavaScriptのコード(記述)を確認したり、擬似的に追加でコードを書き込むことができます。
また、ブラウザの画面サイズをモバイル端末やタブレット端末で確認することができたり、通信結果を確認したりなど、Webの開発において便利な機能が備わっています。

そのため、Web開発者にとって必須の機能で、開発時はほとんど常にデベロッパーツールを確認しています。

理解度チェック

  • デベロッパーツールはなんのために必要なものですか?

クロームでデベロッパーツールを開く

Chrome(クローム)でデベロッパーツールを開く方法は2つあります。

メニューからマウスで開く

1つ目の方法は、クロームのメニューから開く方法で「表示 > 開発 / 管理 > デベロッパーツール」の順に進めます。

デベロッパーツールの開き方

ショートカットキーで開く

2つ目は、ショートカットキーを使用します。
クロームを開いて、環境ごとに次のショートカットキーを使用してみてください。

Windows: F12 または Fn + F12 または Ctrl + Shift + I
Mac: Command(⌘) + option(⌥) + I

理解度チェック

  • デベロッパーツールを実際に開いてみてください!

デベロッパーツールについて

デベロッパーツールを開くと次の様な画面(Dock)が表示されます。

デベロッパーツール

デベロッパーツールを画面右側で開く

画面の幅や高さなどで、デベロッパーツールを画面右側で開きたい場合があります。

ツールバー右側に位置するメニューボタンを押して、開き方を選択できます。

ドックを開く位置を選択する

右側に表示した場合は次のようになります。

デベロッパーツールを右側で開く

理解度チェック

  • Dockを右側で表示させてみてください!

ツールバーについて

クロームのデベロッパーツールには非常に多くの機能があり、学習段階ですべてを覚えようとするのは現実的ではありません。

ここでは、学習および実際の開発で特に使用する機能について説明します。

要素選択

このボタンを押すことで、画面上のHTML要素を選択することができます。

選択した要素はElementsタブで要素のCSSを確認したり擬似的に編集することができます。

デベロッパーツールの要素選択モード

理解度チェック

  • 実際に要素を選択してみましょう!

デバイスツールバーの表示

ブラウザの画面をデバイスツールバーに変更します。

このデバイスツールバーでは、他の端末のサイズで開発中のWebページがどのように表示されるかについて簡易的に確認することができます。
このモードから行われるネットワーク通信にもデバイス特有のエージェントが使用されるなど、あたかも実機のようにふるまいます。

しかし、実機で確認するとレイアウト崩れなどの不具合が見つかることも多く、本番で稼働させるためには実際の端末で確認するようにしましょう

デベロッパーツールのデバイスツールバー

理解度チェック

  • デバイスツールバーを表示してみましょう!

Elementsタブ

Elements(要素)タブは、選択したHTMLの要素に適用されているCSSをStylesタブで確認するために使用します。

このStylesタブの、element.style {}に擬似的にCSSを記述したり、既に適用されているセレクタの属性や値を編集することができます
色はカラーピッカーで選択して試すことができ、アニメーションや影、擬似クラス(hoverなど)を編集することもできるため、この機能を使うことは開発時に大きなメリットとなります。

擬似的に編集した属性や値を永続的に適用したい場合は、そのままコピー&ペーストでファイルに記述します

デベロッパーツールのElementsタブ

理解度チェック

  • Elementsタブではどんなことができますか?
  • CSSの学習を始めた方は、実際に属性や値を編集してみましょう!

Consoleタブ

Console(コンソール)タブは、JavaScriptによって出力されたログを確認するために使用します

左側の一覧から、すべてのログを確認したり、ログのレベル(errorwarninginfoなど)で絞り込み(フィルタリング)表示することができます。

また、ここでもJavaScriptを記述し実行することができますが、編集エディタのようなコード補完等はありません。
次の画像は、console.log('Hello, World');を実行した結果、コンソールにHello, Worldと出力されている結果です。一番下のundefinedは、実行した関数の返り値が無い(undefined: 未定義)であることを表しています。

デベロッパーツールのConsoleタブ

理解度チェック

  • Consoleタブはどんなときに使用しますか?
  • JavaScriptの学習を始めた方は、実際にコンソールに出力してみましょう!

Networkタブ

Network(ネットワーク)タブは、Webサイトが通信した結果をすべて一覧にして表示するタブです。
このNetworkタブに表示される一覧は、デベロッパーツールが表示されてから通信した結果のみを表示します

Disable cache(キャッシュを無効)にチェックを入れているのは、キャッシュというブラウザに一時的に保存されたデータを開発時に使用しないためのものです。このキャッシュの対象となるデータは通信一覧に表示されているファイルです。

クッキー(Cookie)やセッション等のキャッシュはApplicationタブで削除することができます。

また、通信結果は一覧の列名で並び替え(ソート)を行うことができます。

デベロッパーツールのNetworkタブ

通信一覧から任意のデータを選択すれば、その通信の詳細を確認することができます。

この詳細では、リクエスト(Reqest)の種類(GET、POSTなどのメソッド)やステータスコード、ヘッダー(Header)についてや、レスポンス(Response)の内容を分かりやすくプレビュー(Preview: 表示)してくれる機能があります。

デベロッパーツールのNetwork詳細

理解度チェック

  • Networkタブはどんなときに使用しますか?
  • JavaScriptで非同期通信を学習した方は、実際にリクエストとレスポンスを確認してみましょう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。