Web開発者のためのデベロッパーツール完全ガイド！ページの解析と隠れた便利機能【Chrome】

この記事では、Google Chromeのデベロッパーツールについて基本的な使い方からあまり知られていない便利な機能まで紹介したい。

デベロッパーツールは「開発者ツール」や「検証ツール」などとも呼ばれ、ウェブ系の開発者であれば使わない日は無いような必須のツールである。IDEを使いこなすのと同じような感覚で使いこなせるようになっておきたい。

デベロッパーツールには多くの機能が備わっており、そのすべてを説明するにはかなりの文章量が必要となる。

ここでは、もっとも使用頻度の高い4つのパネルをメインにデバイスモードや便利なショートカットキーについても紹介したい。

デベロッパーツールの基本

まずはデベロッパーツールの基本的な事柄を説明したい。

デベロッパーツールとは?

デベロッパーツールは「開発者ツール」「検証ツール」などとも呼ばれ、おもにウェブページの解析をおこなうのに使われる。

デベロッパーツールは「Google Chrome」「Microsoft Edge」「Mozilla Firefox」といったモダンなウェブブラウザに標準で搭載されており、ブラウザの使用中に簡単に呼び出すことができる。

この記事で解説するGoogle Chromeのデベロッパーツールは正式名称を「Chrome DevTools」と言う。

DevToolsドキュメント:: https://developer.chrome.com/docs/devtools

デベロッパーツールのおもな使い道

デベロッパーツールには様々な機能が搭載されており、ウェブ開発における様々な場面で使用できる。

デベロッパーツールにおもな使い道には以下のようなものが挙げられる。

• ウェブページの構成やスタイリングを確認する。
• モバイル端末での画面表示を確認する。
• JavaScriptコードのデバッグをおこなう。
• コンソールメッセージの出力をチェックする。
• APIリクエストのレスポンスを確認する。

また、拡張機能を追加することにより、ReactやAngularなどのフレームワークに対応したより高度な解析機能を使用することができる。

なお、デベロッパーツール内での編集はローカル環境にのみ適応されるものであり、ウェブ上にアップロードされたHTMLファイルに影響を与えることは無い。また、編集した内容はブラウザーをリフレッシュすれば基に戻る。

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

まずはデベロッパーツールの開く方法について確認しよう。

デベロッパーツールの開く方法には以下の3種類がある。

1. ショートカットキー
   Windows/Linux: 「F12」または「Ctrl + Shift + I」
   Mac: 「Cmd + Option + I」または「Cmd + Shift + C」
   
2. Chromeメニュー
   画面右上のアイコンをクリックして、「その他のツール」から「デベロッパーツール」を選ぶ。
   
   
3. コンテキストメニュー
   ウェブページ上で右クリックして、メニューから「検証」を選択する。
   
   

デベロッパーツールの基本的な設定

デベロッパーツールの中でも特に重要な設定を2つ紹介したい。

デベロッパーツールの表示位置の設定

デベロッパーツールの表示位置は「別ウィンドウに表示」「左に固定」「下部に固定」「右に固定」の4つから選択することができる。

スクリーンサイズなどを考慮して見やすい位置に表示するようにしよう。

デベロッパーツールの言語の設定

デベロッパーツールの表示言語は設定メニューから変更することが出来る。

この記事では、日本語を選択したデベロッパーツールを使用して解説をおこなっていく。その他の言語に設定されているは「日本語」を選択することをお勧めする。

「要素」パネルでのHTML/CSS編集

まずは要素パネルから概要とできる事を確認しよう。

要素パネルの概要

要素パネルは「要素」タブをクリックすることにより開くことができる。

要素パネルでは以下のような作業をおこなうことができる。

• ウェブページの構成要素の検証
• 要素の属性変更や削除
• CSSスタイルの確認と変更

ウェブページの構成要素の検証

要素パネルでは表示しているウェブページのHTMLを構成要素を確認することができる。

各要素はツリー構造で表示されており、左側の三角形をクリックするか、要素をダブルクリックすれば中身を表示できる。

現在選択されている要素は画面上で青のレイヤーが掛かって表示される。

特定の要素を探す

要素パネルにて特定の要素を探したい場合はおもに2つの方法がある。

画面上で直接要素をクリックする

特定の要素を要素パネルから見つけたい場合は、もっとも簡単で直感的なのはデベロッパーツールの要素選択モードを利用することだ。

要素選択モードをオンにするには、「Ctrl+Shift+C」を押すか「ページ内の要素を選択して検査」ボタンをクリックする。

要素選択モードがオンになった状態では、画面上でマウスオーバーした要素が要素パネルでもリアルタイムで選択される。

文字列検索を使う

テキストやID・クラスなどの名前から要素を探したい場合は文字列検索を使う。

「Ctrl+F」を押せば入力バーが表示されるので目的の文字列を入力する。

要素の属性を編集する

要素パネルでは要素に変更を加えることができる。

要素の属性を変更したりCSSクラスを追加したりすれば、際にどのように表示されるか確認することができる。

要素の上で右クリックを押せばコンテクストメニューが表示されるので、目的のメニューを選ぶ。

目的のクラスや属性プロパティをダブルクリックすることによりダイレクトに変更することもできる。

スタイルの確認と修正

要素を選択すると右側のパネルに要素に適用されているCSSクラスとプロパティが表示される。

このパネルではCSSプロパティを変更することができ、変更はすぐに画面に適用される。これによりデザインや意図してない不具合などを即座に確認・調整することができる。

「コンソール」パネルでのエラー確認

次にコンソールパネルでできる事を確認しよう。

コンソールパネルの概要

コンソールパネルは「コンソール」タブをクリックすることにより開く。

コンソールパネルでは以下のような作業をおこなうことができる。

• ログ出力の確認
• コマンドラインインターフェイス

ログ出力の確認

コンソールパネルにはエラーや処理に関する情報が表示される。

コンソールに情報を出力したい場合は、ソースコードにてconsole.log()などの関数を使用する。

console.info()やconsole.error()を使用すれば、ログレベルを指定してメッセージを出力できる。

ログレベルには以下の4つがある。

console.log("Console.log => 通常のメッセージ出力");
console.debug("Console.debug　=> デバッグ目的のメッセージ出力");
console.info("Console.info => 通常のメッセージ出力");
console.warn("Console.warn => 警告レベルのメッセージ出力");
console.error("Console.error => エラーレベルのメッセージ出力");

上記のコードはコンソール上では以下のように表示される。

コンソールに表示するログレベルは目的によって変更できる。

コマンドラインインターフェイス

コンソールパネルでは簡単にJavaScriptのコードを実行することができる。

コマンドラインを使って、以下のような事ができる。

• JavaScriptを使ったプログラミングの練習。
• 要素を取得して直接属性を書き換える。
• HTML上に定義された関数を呼び出して内容を確認する。

以下はコマンドラインから要素を取得して、スタイルを書き換える例だ。

「ソース」パネルでのJavaScriptデバッグ

次にソースパネルについて見ていこう。

ソースパネルの概要

ソースパネルは「ソース」タブをクリックすることにより開く。

ソースパネルはWeb開発者にとってもっとも重要なパネルであり、以下の作業をおこなうことができる。

• ソースコード（JavaScript、HTML、CSS）の表示
• JavaScriptコードのデバッグ

ブレークポイントの設定

JavaScriptコードのデバッグをおこなう際は、解析したいコード部分にブレークポイントをセットする。

デベロッパーツールでブレークポイントをセットする

デベロッパーツール上でブレークポイントセットする際は、左のパネルからデバッグをおこなうファイルを探し出し、ブレークポイントをセットする行番号をクリックする。

ブレークポイントのセットされた行には青いマーカーが表示される。

ソースコード上でブレークポイントをセットする

ソースコード上でブレークポイントをセットする場合はデバッグを行いたい箇所に「debugger;」と記述する。

btn.addEventListener("click", function () {
  debugger;
  const randomNumber = getRandomNumber();
  document.body.style.background = colors[randomNumber];
});

プログラムのステップ実行

ブレークポイントをセットした状態でプログラムがブレークポイントの位置まで進むとデバッグモードに入る。

デバッグモードに入ると画面上に「デバッガ内で一時停止」といったメッセージが表示され、ブレークポイントの行がフォーカスされた状態でソースパネルが表示される。

ここからは右パネルの上部にあるボタンを使ってステップをコントロールする。

ボタンは左から順番に「スクリプトの再開」「ステップオーバー」「ステップイン」「ステップアウト」「ステップ」「ブレークポイントの無効化」である。

デバッグ中は変数の中身を「範囲」タブにて確認することができる。

「ネットワーク」パネルでの通信の解析

次にネットワークパネルの概要とできる事を確認しよう。

ネットワークパネルの概要

ネットワークパネルは「ネットワーク」タブをクリックすることにより開く。

ネットワークパネルではページを開いてから呼び出されたHTTPリクエストが一覧で表示される。

ネットワークパネルでは以下のような作業をおこなうことができる。

• 特定のHTTPリクエストが呼び出されているか確認する。
• HTTPリクエストの成否とレスポンスの確認
• パフォーマンスの測定と改善

リクエストのフィルタリング

ネットワークパネルには実にたくさんのリクエストが表示される。

目的のリクエストを探すには検索バーとリクエストタイプによるフィルタリングを使うといい。

検索バーでは、ステータスコードを入力してリストを結果を絞り込むこともできる。

リクエストとレスポンスの確認

リクエストの一覧からリクエストを選択すると右側に詳細パネルが表示される。

詳細パネルでは、さらにタブにて分割されておりヘッダー情報、ペイロード、レスポンス内容が確認できる。

この詳細パネルはウェブアプリケーションにてエラーが発生した場合に原因解明のために頻繁に使われる。どの情報がどこに表示されているか覚えておこう。

パフォーマンスの測定と改善

リクエストの一覧の上にはリクエストのタイミングがタイムライン上に表示されている。

これはページのリクエスト処理を最適化しパフォーマンスを向上したい時におおいに参考になる。

ユーザが快適にウェブアプリケーションを使用できるようにするに、同期・非同期処理が効率的に行う必要がある。

デバイスモードでモバイル端末をシミュレート

次に様々なサイズの端末をシミュレートできるデバイスモードについて確認しよう。

デバイスモードの概要

デバイスモードではデスクトップPCの画面上でスマートフォンやタブレットの画面サイズをシミュレートすることができる。

このモードにより、昨今では標準となったレスポンシブな画面のチェックが容易におこなえる。

デバイスモードを有効にするにはショートカット「Ctrl + shift + M」を押すか、デベロッパーツールの左上部に位置する「デバイスのツールバーを切り替え」ボタンをクリックする。

画面サイズをモバイル端末のサイズに合わせる

デバイスモードでは画面上部のドロップリストからシミュレートする端末を選択することができる。

また、右上部の「回転」ボタンをクリックすればポートレートモードでの表示を確認できる。

Developerツールのショートカットキー一覧

Chrome DevToolsには開発作業を効率化するための便利なショートカットキーが割り当てられている。以下は、おもなショートカットキーの一覧だ。

DevToolsの起動・ナビゲーション

要素パネル

コンソールパネル

ネットワークパネル

ソースパネル