Webサイトのコーディングをしていると、「このCSS、どこから指定されているんだろう？」「この要素、JavaScriptのどの処理で変わっているんだろう？」と、原因を調べたくなる場面がよくあります。
そんなときに活躍するのが、Google Chromeに標準搭載されている「Chrome DevTools（デベロッパーツール）」です。
HTMLやCSSの確認・調整はもちろん、レスポンシブ表示のチェックやJavaScriptのデバッグ、フォームの動作確認、
アクセシビリティのチェックなど、Webサイトを制作・検証するうえで便利な機能がたくさん用意されています。
普段何気なく使っている機能でも、「こんなこともできたのか」と知ることで、コーディング中のちょっとした手間を減らせることがあります。
今回は、Chrome DevToolsに搭載されている機能の中から、私が実際のコーディングや検証でよく使っているものを中心にご紹介します。
すべての機能を網羅するのではなく、「こんなときに使えるんだ」と、実際の作業をイメージしながら読んでもらえたらと思います。
Chrome DevToolsについての関連記事です。よかったらあわせてどうぞ。
今すぐコーディング爆速化！プロ仕様なChrome検証ツールの使い方
目次
Chrome バージョン151、英語版を使用。
HTMLをみるとき
このセクションで紹介する機能は、ElementsタブでHTML要素を右クリックして表示されるメニューから操作します。
Duplicate element / Delete element
表示中のHTML要素を複製したり削除したりして、ページのレイアウトを確認できます。
お知らせやコラムなどの更新コンテンツを、WordPressなどのCMSで構築する場合に活躍します。
CMSでは、まだ記事が1件も登録されていない、エラーで表示されないなどの状態も考慮する必要があります。
Delete elementで要素を削除してみて、見た目が不自然でないか、などを確認します。
逆にDuplicate elementで要素を増やしてみて、要素同士が空白無しにくっついてしまわないか、などを確認します。
Force state
ホバー時のボタンの見た目を検証したい。でもマウスを離すと見た目が通常時に戻ってしまい、開発者ツール上でのCSSの調整がむずかしい！
そんなときに便利なのがForce stateです。
:hoverや:focusなど、普段は操作しないと確認しにくい状態を一時的に再現できます。
Force stateのサブメニューには、
- :active
- :hover
- :focus
などがあります。これらの設定をオンにすることで、その状態をキープしてくれます。
:hoverをオンにすることで、常にホバー状態を保ってくれるので、CSSの調整やスクリーンショットを撮ったりなどがとても楽になります。
Capture node screenshot
対象要素のmarginを除いた範囲を、スクリーンショット画像で保存することができます。
縦に長い要素の場合や、きれいにトリミングされた状態でキャプチャが欲しいときなどに便利です。
BRISKのトップページのメインビジュアルでやってみました。
レスポンシブチェック
DevToolsのToggle device toolbar（レスポンシブモード）を活用することで、さまざまな画面幅・デバイスでの見え方を手軽に確認できます。
Rulers
ページ上に定規を表示し、画面幅や要素のサイズ・位置を確認できます。
縦横の定規に100単位で表示される数字をクリックするとその画面幅になります。
いちいち数字を入力する手間が省けます。
Custom devices
よく使う画面幅を自分で作って設定したい、というときがよくあると思います。
そんなときはDimensionsのResponsiveからEditをクリックし、カスタムデバイスを追加しましょう。
Macのサイズや1920pxなど、デフォルトの画面幅にないものを設定できます。
デザインカンプや案件ごとの仕様に合わせて、確認したい画面幅を登録しておくと便利です。
Throttling
通信速度を意図的に遅くして、低速な環境での表示を確認できます。
処理が重くないか・画像の読み込みに時間がかかりすぎないかなど、ストレスなく閲覧ができるかを確認したいときに使います。
確認するときはFast 4G、またはSlow 4Gにすることが多いです。
Rotate
画面を縦向き・横向きに切り替えて、スマートフォンやタブレットでの表示を確認できます。
右上のRotateボタンを押すと、縦と横の数値を切り替えてくれます。
CSSをみるとき
コーディング中に「指定したCSSが反映されない」「このスタイルはどこから指定されている？」といったことがあります。
ここでは、そんなときに役立つCSSの確認・調整機能をご紹介します。
Disable cache
キャッシュを使わずにページを読み込みます。
ローカルでコーディングしているときもブラウザはキャッシュを残します。
Networkタブから「Disable cache」をオンにすると、キャッシュを使わず、毎回最新のファイルを読み込んでくれます。
Stylesパネル
選択したHTML要素に適用されているCSSを確認・編集できます。
:hovボタン
Force state（HTML要素を右クリックで出てくるメニュー）とほぼ同じですが、Emulate a focused pageのチェックは入れておくとよいです。
DevToolsを開いた瞬間にページのフォーカスが外れてしまうため、:focusや:focus-visibleのスタイルが消えてしまいます。
Emulate a focused pageをオンにしておくことでページのフォーカス状態を維持してくれるので、フォーカス時のスタイルをそのまま確認・調整できます。
.clsボタン
一時的にクラスの追加・削除を行いたいときに使います。
すでについているクラスはチェックボックスでのつけ外しができ、クラスを追加したいときには入力欄から追加ができます。
コンマ+空白で複数入力もでき、入力予測にクラスが表示される機能もとても便利です。
flex/grid
displayをflexまたはgridにしていると、このようなモーダルを表示できる、6つの四角が書かれたボタンが出てきます。
justify-contentやalign-itemsなど、Flexbox・Gridの各設定を画面上で切り替えながら挙動を確認できます。
CSSプロパティを発見する
CSSの一括指定や適用状況を確認しながら、必要なプロパティを見つけることができます。
Styleタブ アコーディオン内
backgroundやmarginなど、複数の値をまとめて指定しているCSSを分解して、それぞれのプロパティを確認できます。
Computedタブ
対象の要素にかかっているCSSすべてを一覧で確認することができます。
アコーディオン内から、どの記述が効いているかを優先度順で見ることができます。
Show allのチェックは外し、Groupのチェックは入れておくと、確認が容易になります。CSSの競合を調べるときや、目当てのプロパティの値を見つけたいときに便利です。
JSをデバッグするとき
JavaScriptの処理によってHTMLが変更されたりしたとき、どの処理が原因なのかを追いかけたいことがあります。
ここでは、そんなときに役立つデバッグ機能をご紹介します。
Break on
選択した要素に変更が加わったタイミングでJavaScriptの処理を一時停止し、どこで変更されたのかを追跡できます。
Break onのサブメニューには、以下があります。
- subtree modifications
- attribute modifications
- node removal
subtree modifications
その要素の子要素が削除・追加されたり、コンテンツが変更されたりしたときにトリガーされます。
attribute modifications
その要素の属性が削除・追加されたり、値が変更されたりしたときにトリガーされます。
node removal
その要素が削除されたりしたときにトリガーされます。
トリガーで何が起きるのか、というと
JavaScriptなどで要素にクラスのつけ外しをしたり、要素の削除・移動などをしたときに、選択した要素でそれらの処理が行われた場合、その処理を行った該当の記述をハイライトして表示してくれます。
これを活用することで、JavaScriptのデバッグ時に、どの記述によってその動作が行われたのかを追うことが容易になります。
！注意：jQueryを使用した記述の場合、jQueryのソースファイルに飛ばされます。
jQueryを使用している場合
jQueryを使用している場合、Break onのトリガーが発動するとjQueryのソースファイルに飛ばされてしまいます。
そのときは、Sourcesパネル右側にあるCall Stackを確認してみましょう。
Call Stackには処理の呼び出し履歴が表示されるので、jQuery以外のファイル名をクリックすることで、実際にトリガーとなったコードの記述箇所に飛ぶことができます。
Consoleをみる
JavaScriptのエラーや警告を確認できるConsoleでは、AIを使ってエラーの原因を調べることもできます。
AI Assistanceでエラーの原因を理解する
電球マークをホバーすると、Understand this error（このエラーを理解する）と出てきます。クリックすると、ずらりとエラーの原因、そしてそれがなぜエラーなのかなどを説明してくれます。
AI Assistanceでは、エラーの原因だけでなく、確認すべき箇所や修正方法まで提示してくれます。
- なぜこのエラーが出るか：ダブルクォーテーションなどの開始または終了がなく、正しく囲われていない。
- どのように突き止めるか：該当ファイルの235行目を見て、特に関数を呼んでいるまたは定義している箇所を見てみよう。すべての開始かっこが終了かっこを持っているか確認しよう。
- 推奨する修正方法：どの記号がないか、文法エラーになっているか特定しよう。よくあるミスと修正方法の例を以下に提示するよ。
ChatGPTなどにファイルをアップロードしたり、記述をコピペしたりしてエラーの原因を聞くのも面倒なときに、
さくっとAI Assistanceに聞いて、エラーの該当行を修正するのがおすすめです。
修正方法が分からなくても、AI Assistanceにエラー箇所を特定してもらい、それを別のAIに伝えて修正を頼むと効率的かもしれません。
！AI Assistanceを使うには設定が必要です。
DevTools右上の歯車アイコンからSettingsを開き、AI innovationsを選択します。
Console Insightsのトグルをオンにすると、コンソールのエラーに電球マークが表示されるようになります。
お問い合わせフォームチェック
お問い合わせフォームは、入力項目が多く、実際にすべて手入力して確認するのは大変です。
ここでは、フォームの動作確認を効率化できる機能をご紹介します。
オートコンプリート
Chromeの設定から、検証用の自動入力の住所を設定しておくと、検証時の入力の手間が省けて楽です。
姓名分けて登録することができないため、変なところで区切られてしまうのが玉にきずです。
ついでの補足で、開発者ツールを開いた状態にすると、デベロッパーツールというメニュー項目が表示され、アメリカ合衆国・ブラジル・メキシコのダミー情報を入力できます。グローバルなサイトでの検証に活躍しそうです。
品質・アクセシビリティチェック
Webサイトを公開する前に、パフォーマンスやアクセシビリティなどに問題がないかチェックすることも大切です。
ここでは、DevToolsから手軽に実行できる品質チェック機能をご紹介します。
Lighthouse
パフォーマンスやアクセシビリティなどをまとめて診断してくれるツールです。
Pagespeed Insightsと違い、開発者ツール上で実行できるので、本番公開していない・アクセス制限のあるサイトでも確認できるのが利点です。
また、JSON形式やHTML形式で結果を書き出すことができ、AIに渡して細かい原因調査が行えます。
PageSpeed Insightsとは計測方法が若干異なるようで、結果に差異が生じる場合があるので注意が必要です。
axe DevTools（ブラウザ拡張機能）
アクセシビリティに関する問題を自動でチェックできるChrome拡張機能です。
axe DevTools – Web Accessibility Testing（Chrome ウェブストア）
インストールすると、開発者ツールのタブにaxe DevToolsが出てきます。
「全ページをスキャン」をクリックするとチェック結果が出てきます。
バリデーションエラーや、文字コントラストの確認、アクセシビリティ対応のエラーがないかを、ざっくりと確認することができます。
！あくまでも自動チェックです。すべてのアクセシビリティ対応エラーをキャッチできるわけではないので、目視での確認は必須です。
おわりに
今回は、Webサイトのコーディングや検証で役立つChrome DevToolsの機能をいくつかご紹介しました。
HTML要素を増やしたり削除したりして表示崩れを確認したり、レスポンシブ表示をさまざまな画面幅でチェックしたり、
CSSの競合やJavaScriptの処理を調べたりと、DevToolsには日々のコーディングを少し楽にしてくれる機能がたくさんあります。
中には、普段使っている機能でも「ここまでできるのは知らなかった」というものもあるかもしれません。
DevToolsは機能が多く、最初からすべて覚えようとすると大変です。
まずは気になった機能をひとつ試してみて、「こういうときに使えるんだ」と覚えておくだけでも、いざというときに役立ちます。
今回の記事が、普段のコーディングや検証でChrome DevToolsを使うきっかけになればうれしいです。
