Chromeのデベロッパーツール(検証機能)の使い方！開発者モードで編集！

Google Chromeのデベロッパーツール（検証機能）は、Google Chromeに組み込んだWebサイトを作成する際に使用する作成、記述したプログラムに誤りがないか検証できるデバッグツールのセットを指します。プログラム作成にバグ（誤り）はつきものです。

Google Chromeのデベロッパーツールを利用してバグを見つけて直すことでクオリティの高いWebサイトを作成することができます。デベロッパーツールは、開発者モードで利用可能です。

デベロッパーツールでは、正式にコーディングする前に記述コードに問題がないかを確認したり、問題が起きたときなど、開発者モードで検証ツールを使います。そのため、「いつ使う？」というよりは「常に使う」ツールです。

開発者は問題が発生した、しないに関わらず、コードの挙動を確認します。正式にコーディングをする前にコードの記述方法が複数あれば、挙動を確認してその中で一番パフォーマンスの良いコードを選択するのは開発者として当然と言えます。

デベロッパーツールは、開発者がコーディング完成までの間の手間を省いて簡単にコードの挙動を確認できるのが大きな特徴です。経験豊富な開発者でもデベロッパーツールは必要なツールです。特にコードを使い始めたばかりの方は、常に確認した方が良いでしょう。

Google Chromeのデベロッパーツールでは、さまざまな機能が用意されていてできることは沢山あります。

Google Chromeのデベロッパーツールでは、実ファイルの記述を変えずに開発者がデベロッパーツール上で記述を変えて表示を確認できます。確認した結果、変更したものが良ければ実ファイルの記述を変更します。

以下の画像を例に表示のテスト方法を説明します。

表示を変更したい箇所を選択して右クリックすると表示されるコンテキストメニューから、"検証"をクリックます。

変更したい箇所をダブルクリックすると編集できます。

ここでは、「Chromeをダウングレードする方法！自動更新を止めるには？」から「Chromeをダウングレードする方法！自動更新を止めるには？」に変更しています。

Google Chromeブラウザの内容が変更した内容に変更され、その内容を確認できます。

今回は、表示のテストを行っているだけなので、タイトルを変更したWebページを更新すると元のタイトルに戻ります。

Webサイト確認時にレイアウトが崩れた等、問題となった箇所にデベロッパーツールの検証機能を使うと、該当箇所に記述されているコードのHTMLやCSSを一度に確認できます。またレイアウト表示が崩れているときは、CSSのコードのテストや新たにHTMLを追加するときのテストといった使い方もできます。

Webサイトを構築しているとき、気に入ったサイトのコードを参考に見たいときは、デベロッパーツールの検証機能で他サイトのコードを確認することができます。Webサイト構築の学習を始めたばかりの人は経験者が作成したコードを見て学ぶといった使い方もできます。

デベロッパーツールには、PC以外のモバイルやタブレット画面での表示確認ができる「デバイスモード」があります。レスポンシブ対応のWebサイト構築時、想定している端末の画面サイズの表示デザインを確認をする使い方ができます。

デベロッパーツールのConsole機能は、どこで、どのようなエラーが発生しているのかを確認できます。Console機能は、Javascript/jQueryのデバッグ時にもよく使います。

デベロッパーツールのNetwordなどでは、ファイルの読み込み速度のチェックの他、問題と想定されるJSファイルを書き換える使い方ができます。

Google Chromeのデベロッパーツールは、以下のGoogle Chromeブラウザを利用できる環境で使用できます。（2019年2月時点）
 

Google Chromeのデベロッパーツールの主なショートカットキーを紹介します。良く利用するので覚えておくと作業を効率よく行えます。ここでは、WindowsとMacのショートカットキーを紹介します。

【Windows】

【Mac】

Google Chromeのデベロッパーツールは、先ほど紹介したショートカットキーを押すか、ブラウザの任意の箇所を右クリックすると表示されるコンテキストメニューから"検証"をクリックして起動します。

"検証"をクリックすると、デベロッパーツールが起動します。

【「要素を選択して検証」のショートカットキーを押した場合】

HTML/CSSの問題箇所が特定されている場合や確認したい箇所が決まっている場合は、「要素を選択して検証」のショートカットキーを押して該当箇所をクリックします。

・Windowsの場合
Cmd + Shift + C

・Macの場合
command + Shift + C

確認したい箇所をクリックすると、デベロッパーツールが起動します。

デベロッパーツールのデフォルトカラーは白色ですが、色の変更やパネル表示をブラウザの上下に2分割から左右2分割に変更することができます。

【デベロッパーツールのデザイン変更方法】

デベロッパーツール画面の右側にある"メニュー"アイコンをクリックすると表示されるメニューから、"Settings"をクリックします。

「Settings」画面が表示されるので、「Preferences－Appearance」の"Theme"で"Dark"を選択します。「Light」の場合は画面が白色、「Dark」の場合は画面が黒色に変更されます。

以下は、「Theme」を「Dark」に変更した場合のデベロッパーツールの画面です。

【デベロッパーツールの表示向きの変更方法】

デベロッパーツールのパネルの表示向きを変更する方法を説明します。

以下は、デベロッパーツールのパネルが、Google Chromeブラウザの下側に表示されている画面です。

デベロッパーツール画面の右側にある"メニュー"アイコンをクリックすると表示されるメニューの「Dock side」からパネルを表示する位置を選択します。

以下は、「Dock side」から、一番右のアイコンを選択した後の画面です。

CSSのデザイン変更は、デベロッパーツールの中でも新人の開発者が良く使う機能です。本項では、以下の4点について使い方と説明します。

1. colorを追加・編集する方法
2. text-shadowを追加・編集する方法
3. background-colorを追加・編集する方法
4. box-shadowを追加・編集する方法

まず、デベロッパーツールのCSSパネルを選択する手順を説明します。デベロッパーツール画面の上部にあるメニューから"elements"をクリックします。

デフォルトでは、「HTML」エリアと「CSS」エリアに分かれてパネルが表示されます。

CSSデザインを編集したい箇所のHTMLコードをクリックします。このとき、一部のHTMLの要素が閉じた状態で該当のHTMLの要素が見当たらない場合は展開します。要素が開いているときはHTMLの頭にあるマークが「▼」で表示されています。（閉じているときは「▶」で表示されています。）

HTMLに関わらず、複数階層になっている要素は「Alt」キーを押しながらコードの頭の"▶"マークをクリックすると全ての階層を一括で展開することができます。

デベロッパーツールでデザインを編集したい箇所のHTMLコードを選択すると、右側のCSSのパネルにそのHTMLコードが記述している箇所で定義されているCSSコードが表示されます。

以上で、デベロッパーツールのCSSパネルを選択する手順は終了です。以降ではCSSパネルの主な機能を説明をします。

①"Style"では、選択したHTMLに対応するCSSコードが表示されます。開発者がHTMLおよびCSS確認するときに良く利用するのが"style"です。右横にある「Computed」は指定したCSSを一覧で確認できます。

②「element.style」と記載されている部分にはデザインを適用したいHTML選択後、CSSコードを記述します。記述したCSSは試験的なデザインとして表示されます。デザイン戻すときはブラウザを更新するとリセットされます。

③Webサイトで使用されているCSSコードです。デザインを変えたい場合は、直接コードを編集します。「element.style」と同じように、デザインが変更されます。

【補足】
取り消し線がついているコードは「適用されていない」コードです。同じプロパティに対する指定が複数存在すると、指定の優先順位が低いコードが取り消し線で消されます。例えば、上記の画像の「margin」プロパティや「font size」プロパティがその例です。

④記載されているCSSコードがどのCSSファイルから適用されているのかを示しています。優先順位は、上位に表示されているCSSコードほど高くなるため、どのCSSファイルのどのコードが適用されているのかが判別できれば、修正箇所が分かります。

デベロッパーツールで「color」コードを追加・編集する場合の使い方はとても簡単です。変更したいプロパティの値をダブルクリックして入力して、カラーコードを修正するだけでできます。また、カラーコードを入力し直さなくても、カラーパレットから色を変更することができます。

まず、Webサイトで色を変更したい箇所と、該当するCSSを特定します。下記の画面の場合、タイトルのCSSを利用していることが分かります。

【変更前】

「element.style」で「color: #333;」から「color: #E91E63;」に変更します。このとき、HTMLパネルでは色を変更する場所のタグ（画面の場合「h1」タグ）にカーソルで選択した状態です。

画面の表示が変更されて、HTMLコードが以下のようになります。戻したいときはブラウザを更新してください。

【カラーパレットを利用する場合】

複数の色を確認したいときなどは、カラーパレットを利用します。カラーパレットは、「color」の右横にチェックがついている状態で、マウスを合わせると右横に表示される"メニュー"アイコンをクリックして表示します。

"Add Color"アイコンをクリックします。

新しい「color」プロパティが追加されて、カラーパレットが表示されるので試したい色を指定します。複数の色を比較したい場合は、「color」プロパティのチェックボックスからチェックを付けたり外したりすると、色の比較を簡単にすることができます。

「element.style」で新しくCSSプロパティを追加・編集したいときは、すでに記述されているコードの下あたりをクリックします。

新しいプロパティと値が入力できるようになるので、プロパティに「text-shadow」を入力して"Enter"キーを押します。プロパティ入力時、プロパティ候補の一覧が表示されるのでその中から「text-shadow」を選択しても同じです。

「text-shadow」プロパティに対応する値を入力します。

「element.style」で「text-shadow」を変更するとき、HTMLパネルでは色を変更する場所のタグ（画面の場合「h1」タグ）にカーソルで選択した状態です。変更後、以下のように文字に影が付いた状態で表示されます。

「text-shadow」プロパティの色は、「color」プロパティと同じ方法で変更可能です。

「background-color」プロパティは、「text-shadow」と同じ方法で追加・編集できます。

「box-shadow」プロパティは、「text-shadow」と同じ方法で追加・編集できます。

マウスオーバー時の動作を変更したい場合は、デベロッパーツール画面で":hov"をクリックします。

":hov"をクリックすると、「Force element state（擬似クラス）」が表示されので、マウス動作を1つを選択してチェックを入れます。選択した擬似クラスが適用された状態となります。

新しいクラスを追加したい場合は、デベロッパーツール画面で".cls"をクリックします。

開いた画面内にある「Add new class」と表示されている部分に、"sample_title"と入力してみます。

"sample_title"と入力すると、HTMLコードパネルの「h1」タグのclassの中に「sample_title」が自動で追加されています。

デザイン開発中に表示が崩れていたり、意図と違った表示となっていた場合、開発者がやることは「問題箇所の特定」と「対処」となります。このときの対応方法は、今までの使い方と大差はありません。

Webサイトの問題となっている箇所を選択してデベロッパーツールを起動し、デザインに影響しているファイルとCSSコードを特定します。

デザインでよくある問題としては、「width」「padding」「margin」など、幅・距離の指定や調整、または1つのプロパティに対して複数の指定をしていて、CSSコードの優先順位の指示が正常に働いていないことが原因です。1つずつ原因を探って問題を解決していき、確定したCSSコードを最終的にCSSファイルにコピーして反映します。

Google ChromeのデベロッパーツールにはPC以外にも、さまざまな端末で表示状態を確認することができます。この機能は、「デバイスモード」と呼ばれており、レスポンシブ対応のWebサイトやブログを構築する際の確認時には良く使う機能です。

デバイスモード機能を使うには、左端から2つ目の"デバイスマーク"アイコンをクリックします。

"デバイスマーク"アイコンをクリックすると、Webサイトの画面がデバイスモードとなり、モバイルやタブレットに合わせた表示確認ができるようになります。

表示を確認するとき、デバイスモードパネルの画面の右横のメニューをクリックすると表示される"Hide rulers"をクリックすると、ルーラーを表示したり非表示にしたりすることができます。

初期表示されているデバイスの種類を増やしたいときは、デバイスモードパネルのデバイスの選択する箇所をクリックして、"Edit..."をクリックします。

デバイスモード画面の右側に「Settings」－「Devices」画面が表示されるので、"Emulated Devices"から表示を増やすデバイスにチェックを入れて、確認できるデバイス追加します。

デベロッパーツールの「Console」では、どのようなエラーがどの場所で発生しているかを確認することができます。開発者は、「Console」に表示されているエラーから原因となっているコートやエラーの種類を確認して、問題を解決します。

エラーは出ていないことが一番ですが、他のWebサイトを検証してみると実はエラーが発生している、という場合があります。開発者はWebサイトの挙動や表示など、利用者に対して影響するようなエラーであれば必ず原因を特定して解決しなければなりません。

Javascript/jQueryのデバッグは、Web開発者が覚えておきたいスキルの1つです。デバッグモードでは、記述したJavascript/jQuery（以降「プログラム」と記載）を実行してみて、現在設定している変数の値や処理の進み方を確認します。デバッグモードでは、記述したプログラムが開発者が意図した動作で動いているかを確認する際に役立ちます。

本節では、Google Chromeの「デベロッパーツール」でプログラムをデバッグするときの使い方を説明します。

デベロッパーツールでは、デバッグでブレークしたときにスタックをし逆に処理できる機能があります。デバッグが停止したときに「Call Stack」グループには関数の呼び出し履歴が表示されています。

停止している関数よりも前の処理を右クリックすると表示されるコンテキストメニューから"Restart frame"をクリックします。この機能を使うことで、実行済みの呼び出し元をさかのぼってデバッグすることができます。

JSファイルの表示方法を説明します。

デベロッパーツールでデバッグを行うときは、デベロッパーツールを起動し"Sources"をクリックします。

画面左にある「Page」のツリーからデバッグするJSファイルを選択すると、デベロッパーツール画面の真ん中のパネルに選択したJSファイルの内容が表示されます。例として「jquery.min.js」というJSファイルを表示します。

「ブレークポイント」とは、デバッグをするとき記述したプログラムの実行を任意の行で処理を止めることができる機能です。ブレークポイントを使用すると、変数の現在の状態を確認できます。

デベロッパーツールの画面の真ん中のパネルに表示されているソースコードの「行番号」の部分をクリックします。

「行番号」をクリックすると、クリックした行に青い矢印が表示されます。これでブレークポイントが設定された状態となります。この状態でプログラムを実行させると、この行を処理している際に処理が止まります。ブレークポイントを削除したい場合は、青い矢印を再度クリックします。

プログラムを実行すると、ブレークポイントの箇所でスクリプトの実行が一時停止します。画面の場合、3行目にブレークポイントを設定しているので、2行目までJavascript/jQueryが実行された状態です。

ブレークポイントは複数設定することができます。設定したブレークポイントは画面右パネルにある「Breakpoints」に表示されます。

「Breakpoints」に表示されているブレークポイントの1行目にはソースのファイル名と行番号、2行目にはその行に記述されているソースコードが表示されています。

デベロッパーツールでブレークポイントを設定してプログラムの実行を止めると、プログラムに設定されている現在の変数を確認できます。変数を確認して処理が自分の期待どおり動作しているかを確認することは開発者としてはとても大事なことです。

今まで変数の値を確認したいときに「alert()」関数や「console.log()」関数などを使っていた人は、ソースコードを編集せずにGoogle Chromeブラウザで任意の変数を確認する使い方ができます。

Google Chromeブラウザ上で変数の値を確認する方法は簡単で、変数の上にマウスを合わせるだけで確認することができます。

プログラムの複雑なオブジェクトの変数を確認したいときは、"Scope"で確認する使い方ができます。「Scope」では、実行中のJSのスコープの変数が表示されます。変数が関数内のローカル変数の場合は、Localツリーに表示されます。

【階層が深いときは"Watch"を使う】

関数で使われている変数が多いときやオブジェクトの階層が深い場合は、"Watch"を使って変数を確認する使い方をします。

"+"をクリックして、確認したい変数の名前を入力します。

「Watch」に変数名を入力します。

"Enter"キーを押すと、変数の状態を一覧で確認できます。

ブレークポイントで止まったプログラムは画面右上のボタンでブレークポイントの行より後ろの処理を実行できます。また、エラーが起きたとき、他でエラーがでていないかを一度で確認するためにステップ実行をすることができます。

デバッグ時、ブレークポイントで止まったプログラムの続きを実行します。ブレークポイントを複数設定している場合は、ブレークポイントごとに停止するのでリジューム実行をすることで、自分の想定通りの処理順になっているかを確認するといった使い方をすることができます。

ステップインとは、ブレークポイントでプログラムの処理が停止しているときに、停止した行のプログラムはまだ実行されていない状態のため、停止した行の処理を実行して次の行へ移動して停止させる機能です。デバッグ時にステップインを実行すると、ブレークポイントに設定した行以降のコードを1行ずつ確認する使い方をします。

ステップオーバー／ステップアウトとは、ステップインのように1行ずつ確認できるのに対し、大まかな処理の流れを確認する使い方をします。

デバッグ時、ステップオーバーは現在停止している行の関数が実行されているときにその関数の内部処理を全て実行してその次の行で停止します。ステップアウトは現在止まっている処理の関数内の残りを全て処理して実行して、関数を呼び出している行に移動します。

デベロッパーツールでは、テキストやコードを検索することができます。検索方法は簡単です。本節では、Google Chromeのデベロッパーツールの検証機能でテキストやコードを検索する方法を説明します。

デベロッパーツールで「"Ctrl"キー+"F"キー」を押します。（Macの場合は、「"Command"キー+"F"キー」を押します。）

画面下部に「Find by string, selector, or XPath」と表示されている部分に検索したいコードまたはテキストを入力します。

たとえば「frame」と検索するとHTMLコード全体から「frame」を含むテキストやコードを表示してくれます。

「デベロッパーツール」でできることや使い方などを説明してきました。Webサイトやブログサイトを作る上で、デベロッパーツールはとても重要です。読むだけでは分かりづらいことも多いですが、実際に何度も繰り返して作っていくことで、Webサイトやブログサイトを開発する際のノウハウは身についていきます。

しかし、やみくもに始めるよりもGoogle Chromeのデベロッパーツールの「できることの内容」や「できることの範囲」を頭に入れながら作業をすれば、作業効率化が図れるでしょう。デベロッパーツールを積極的に利用して、作業効率化とクオリティの高いサイト構築を行ってください。