Chrome DevToolsでWebサイトの問題をトラブルシューティングする方法

Chrome DevTools(デベロッパーツール)は、Web開発者にとって欠かせない強力なツールです。他のブラウザにも便利なデバッグ機能は搭載されていますが、多機能なインターフェースと圧倒的な人気を誇るChrome DevToolsは、特別な存在と言えるでしょう。

Chromeは、充実したデバッグツール群を備えていることから、開発者の間で最も人気のあるブラウザです。Chrome DevToolsの操作自体は簡単ですが、その仕組みを理解しておくことで、より効果的に活用できるようになります。

Chrome デベロッパーツールの仕組み

Chrome DevToolsを使えば、エラーコンソールや各種デバッグ・モニタリングツールを通じて、Webサイト上の問題を解決できます。DevToolsを活用すると、フロントエンドの不具合を発見できるだけでなく、スマートフォンやタブレットでの表示状態も確認可能です。

また、JavaScript、HTML、CSSといったWebサイトのコードに対してリアルタイムで編集を行い、変更結果を即座に確認することもできます。

ただし、DevTools経由で加えた変更がWebサイトに恒久的に反映されるわけではありません。変更内容は一時的に表示されるだけで、実際のソースコードには影響しません。この特性のおかげで、ページの読み込み速度を改善する方法を安全に検証したり、バグの原因を効率的に特定したりすることが可能になります。

Chrome DevToolsへのアクセス方法

Chrome DevToolsを開く方法はいくつかあります。MacではCmd + Opt + I、WindowsではCtrl + Shift + Iのショートカットキーで起動できます。

その他にも、画面右上の3点リーダー(⋮)をクリックし、その他のツールからデベロッパーツールを選択する方法があります。さらに、Webページ上で右クリックして検証を選択することでも開けます。

Chrome デベロッパーツールによるWebサイト診断

Chrome DevToolsには、Webページの調整やトラブルシューティングに役立つ機能が多数用意されています。ここでは、特に便利な機能をいくつか紹介します。

スマートフォンでの表示を確認する

Chromeブラウザを開発者モードに切り替えると、Webページが半分程度のサイズで表示されます。しかし、これだけではスマートフォンやタブレットでの実際の見え方を正確に把握できません。

幸い、Chrome DevToolsでは画面サイズの設定だけでなく、さまざまなモバイル端末の種類やバージョンを切り替えて表示を確認できます。

この機能を使うには、まず検証モードをオンにします。次に、DevTools左上のResponsiveドロップダウンをクリックし、確認したいモバイルデバイスを選択しましょう。すると、選択した端末のサイズに合わせてWebページが再描画されます。

Webページのソースファイルにアクセスする

Chrome DevToolsを使えば、Webページを構成するファイルにアクセスできます。Sources(ソース)タブをクリックすると、Webサイトのファイルシステムが表示され、編集も行えます。

リソースの多いWebページを扱う際に便利なのが、ソースファイルの検索機能です。コンソール上部のSearch(検索)オプションをクリックして利用できます。

Searchオプションが見つからない場合は、キーボードショートカットを使うとよいでしょう。MacではCmd + Opt + F、WindowsではCtrl + Shift + Fでソースファイルの検索バーを呼び出せます。

Webページをライブ編集する

DevToolsの主な用途の一つが、Webページ上の要素をその場で仮編集することです。開発者ツールに切り替えたら、Elements(要素)タブをクリックしてHTMLコンテンツを編集できます。コードエディタ内の変更したい箇所で右クリックし、Edit as HTMLを選択してください。

インライン以外のCSSプロパティを編集する場合は、Sourcesタブを選択し、編集したいCSSファイルを開きます。コードコンソール内の任意の行にカーソルを置けば、ライブ編集が可能です。スタイルの変更が即座に反映されるため、フィードバックを得ながら作業を進められます。

なお、DevTools経由でページを編集しても、ブラウザでページを再読み込みすると元の状態に戻ります。編集内容が見えるのは自分だけで、他のユーザーのWebサイト利用や動作に影響を与えることはありません。

DevToolsコンソールでJavaScriptコードをデバッグする

JavaScriptのデバッグには、Chromeのデベロッパーツールを使うのが最も効果的な方法の一つです。無効なスクリプトについての詳細なレポートと、バグの正確な位置を把握できます。

JavaScriptを使ってWebサイトを開発する際は、常にDevToolsを開いておくのが良い習慣です。例えば、JavaScriptのconsole.log()コマンドを実行すると、プログラムが正常に動作していれば、そのログの結果がDevToolsコンソールに表示されます。

デフォルトでは、コンソールはWebサイト上のJavaScriptに関する問題を自動的に報告します。コンソールはDevToolsの下部に表示されるほか、Chrome DevToolsウィンドウ上部のConsole(コンソール)タブからもアクセスできます。

データベースからのリソース読み込みを監視する

JavaScriptのデバッグに加えて、コンソールではWebサイトのデータベースから正しく読み込めていないリソースの詳細も確認できます。

バックエンドの問題をデバッグする最良の方法とは言えませんが、どのリソースが404エラーを返しているのかを把握するのには役立ちます。

Chrome デベロッパーツールの表示位置を変更する

Chromeデベロッパーツールの表示位置を変更するには、DevTools内の3点メニュー(ブラウザ本体のものではない)をクリックします。次にDock side(ドック側)オプションから希望の位置を選択してください。

Chrome DevTools拡張機能をインストールする

Chrome DevToolsと連携する、言語やフレームワーク固有の拡張機能をインストールすることもできます。これらの拡張機能を導入すれば、より効率的にWebページのデバッグが行えます。

Chrome DevTools向けの拡張機能の一覧は、Chromeの「Featured DevTools Extensions」ギャラリーで確認できます。

Webサイトのセキュリティ問題をチェックする

Chrome DevToolsでは、Webセキュリティ証明書の有無や接続の安全性などの指標に基づいて、Webサイトのセキュリティ状況を評価できます。Webサイトが安全かどうかを確認するには、DevTools上部のSecurity(セキュリティ)タブをクリックしましょう。

Securityタブでは、Webサイトのセキュリティ詳細の概要と、潜在的な脅威に関する情報を確認できます。

Webサイトを監査する

Chrome DevToolsには、特定の指標に基づいてWebサイトの総合的なパフォーマンスをチェックできる機能があります。

この機能にアクセスするには、DevToolsウィンドウ上部のLighthouseを選択します。次に、チェックしたい項目を選び、MobileまたはDesktopのいずれかにチェックを入れると、プラットフォームごとのパフォーマンスを確認できます。

続いてGenerate report(レポート生成)をクリックすると、先ほど選択した項目に基づいてWebページの分析が実行されます。

また、Performance(パフォーマンス)オプションをクリックすれば、Webサイトのランタイム性能や読み込み性能を評価することもできます。テストを実行するには、Click the record buttonの横にあるアイコンをクリックしてランタイム分析を行うか、その下の再読み込みボタンをクリックして読み込み時間のパフォーマンスを測定します。Stopをクリックすると分析が停止し、結果が表示されます。

Chrome DevToolsを最大限に活用しよう

用途に応じて、Chrome DevToolsは単純なWebサイトのデバッグ以上のことができます。幸い、DevToolsはあらゆるスキルレベルのプログラマーにとって使いやすいツールです。閲覧したWebサイトのソースコードを調べることで、フロントエンド開発の基礎を学ぶこともできるでしょう。

本記事で取り上げていない機能にも、まだまだ便利なものがあるかもしれません。遠慮なくさまざまな機能を試してみてください。設定をいじっても、Webサイトに害を及ぼすことは一切ありません。