ChromeDevToolsを使用してウェブサイトの問題をトラブルシューティングする方法

Chrome DevToolsは、開発者にとって不可欠な資産です。他のブラウザは非常に便利なトラブルシューティングツールを提供しますが、Chrome DevToolsは、その多機能インターフェイスと人気のために注目に値します。

Chromeは、強力なデバッグツールスイートがあるため、開発者に最も人気のあるブラウザです。 Chrome DevToolsの使用は簡単ですが、それを最大限に活用するには、ChromeDevToolsがどのように機能するかを理解する必要があります。

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

Chrome DevToolsを使用すると、エラーコンソールやその他のデバッグおよび監視ツールを介してウェブサイトの問題を解決できます。 DevToolsを使用すると、フロントエンドの抜け穴が明らかになり、モバイルデバイスやタブレットデバイスでWebサイトがどのように表示されるかを監視できます。

DevToolsを使用すると、JavaScript、HTML、CSSなどのWebサイトのコードをリアルタイムで編集し、変更の結果を即座に取得できます。

DevToolsを介して行った変更は、Webサイトに永続的に影響を与えることはありません。実際のソースコードに適用したかのように、期待される結果を一時的に表示するだけです。これにより、Webサイトの読み込みを大幅に高速化し、バグの修正を容易にする方法を見つけることができます。

ChromeDevToolsにアクセスする方法

ChromeDevToolsにはいくつかの方法でアクセスできます。 Mac OSでショートカットメソッドを使用して開発者ツールを開くには、 Cmd + Opt + Iを押します。 Windows OSを使用している場合は、キーボードのCtrl + Shift + Iキー押します。

または、画面の右上隅にある3つのドットをクリックして、Chromeデベロッパーツールにアクセスすることもできます。その他のツールに移動し開発者ツールを選択します。もう1つのオプションは、Webページを右クリックして、[検査]オプションをクリックすることです。

ウェブサイト診断のためのChromeデベロッパーツールの使用

Chrome DevToolsは、ウェブページを微調整してトラブルシューティングするいくつかの方法を提供します。 DevToolsがあなたを助けることができるいくつかの方法を見てみましょう。

あなたのウェブサイトがスマートフォンでどのように見えるかを見る

Chromeブラウザを開発者モードに切り替えると、ウェブページのハーフサイズバージョンがレンダリングされます。ただし、これではスマートフォンやタブレットでどのように表示されるかを実際に確認することはできません。

ありがたいことに、Chrome DevToolsでは、ウェブページの画面サイズを設定するだけでなく、さまざまなモバイル画面の種類やバージョンを切り替えることもできます。

このオプションにアクセスするには、検査モードをオンに切り替えます。次に、DevToolsの左上隅にある[レスポンシブ]ドロップダウンをクリックして、お好みのモバイルデバイスを選択します。次に、選択したモバイルデバイスのサイズに合わせて、Webページがレンダリングおよび調整されます。

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

Chrome DevToolsを介して、ウェブページを構成するファイルにアクセスできます。これらのファイルにアクセスするには、DevToolsメニューの上部にある[ソース]オプションをクリックします。これにより、Webサイトのファイルシステムが公開され、編集も可能になります。

ソースファイルを検索することもできます。これは、多くのリソースがあるWebページを扱っているときに役立ちます。 DevToolsを介してソースファイルを検索するには、コンソールのすぐ上にある[検索]オプションをクリックします。

ただし、[検索]オプションが見つからない場合は、キーボードショートカットを使用することをお勧めします。 Mac OSでは、 Cmd + Opt + Fキーを押してソースファイルを検索します。 Windows OSを使用している場合は、 Ctrl + Shift + Fキーを押してソースファイルの検索バーにアクセスします。

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

DevToolsを使用する主な目的の1つは、 Webページ上の要素の偽の編集を即座に実行することです。開発者ツールに切り替えると、[要素]オプションをクリックしてWebサイトのHTMLコンテンツを編集できます。次に、コードエディタ内で変更を適用するポイントを右クリックし、[ HTMLとして編集]を選択します

インラインではないCSSプロパティを編集するには、[ソース]を選択します。次に、編集するCSSファイルを選択します。コードコンソール内の選択した行にカーソルを置いて、ライブ編集を実行します。これを行うと、Webページに適用するスタイルの変更に関するフィードバックが即座に得られます。

DevToolsを使用してページを編集する場合、ブラウザでページを再読み込みすると元の形式に戻り、編集内容は自分だけに表示されることに注意してください。 DevToolsを介した編集は、他のユーザーによるそのWebサイトの円滑な実行や使用には影響しません。

DevToolsコンソールを使用してJavaScriptコードをデバッグする

JavaScriptをデバッグする最良の方法の1つは、Chromeの開発者ツールを使用することです。無効なスクリプトの直接レポートと、バグの正確な場所を提供します。

JavaScriptを使用してWebサイトを設計するときは、常にDevToolsを開いたままにしておくことをお勧めします。たとえば、一連の命令に対してJavaScriptのconsole.log()コマンドを実行すると、プログラムが正常に実行された場合に、そのログの結果がDevToolsコンソールに表示されます。

デフォルトでは、コンソールはWebサイト上のJavaScriptの問題を報告します。コンソールはDevToolsの下部にあるか、ChromeDevToolsウィンドウの上部にある[コンソール]オプションをクリックしてアクセスできます。

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

JavaScriptのデバッグに加えて、コンソールはWebサイトのデータベースから正しくロードされていないリソースの詳細を提供することもできます。

これはバックエンドの問題をデバッグするための最良の方法であるとは限りませんが、それらの要素のデータベースクエリを実行した後、どのリソースが404エラーを返しているかを示します。

関連:一般的なウェブサイトのエラーとその意味

Chromeデベロッパーツールの向きを切り替える

Chromeデベロッパーツールの位置を変更するには、DevTools内の3つのメニュードットをクリックします(ブラウザのメインドットではありません)。次に、[ドック側]オプションから希望の位置を選択します。

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

ChromeDevToolsで動作する言語またはフレームワーク固有の拡張機能をインストールすることもできます。これらの拡張機能をインストールすると、Webページをより効率的にデバッグできます。

Chromeの注目のDevTools拡張機能ギャラリーでChromeDevToolsで利用可能な拡張機能のリストにアクセスできます。

Webサイトのセキュリティ問題を確認する

Chrome DevToolsを使用すると、 Webセキュリティ証明書の可用性や接続の安全性などのパラメータに基づいて、Webサイトの安全性を評価できます。 Webサイトが安全かどうかを確認するには、DevToolsの上部にある[セキュリティ]オプションをクリックします。

[セキュリティ]タブには、Webサイトのセキュリティの詳細の概要が表示され、潜在的な脅威が表示されます。

あなたのウェブサイトを監査する

Chrome DevToolsには、特定のパラメーターに基づいてWebサイトの全体的なパフォーマンスを確認できる機能があります。

この機能にアクセスするには、DevToolsウィンドウの上部にあるLighthouseオプションを選択します。次に、確認するパラメータを選択し、[モバイル]または[デスクトップ]オプションにチェックマークを付けて、さまざまなプラットフォームでのWebページのパフォーマンスを確認します。

次に、[レポートの生成]をクリックして、前に選択したパラメーターに基づいてWebページの分析を実行します。

[パフォーマンス]オプションをクリックして、Webサイトの実行時または読み込みパフォーマンスを評価することもできます。テストを実行するには、 [記録ボタンをクリック]オプションの横にあるアイコンをクリックして、実行時分析を実行します。または、その下にあるリロードボタンをクリックして、ロード時のパフォーマンスを評価します。 [停止]をクリックしてアナライザーを停止し、結果を表示します。

ChromeDevToolsを活用する

Chrome DevToolsを使用すると、必要な目的に応じて、単純なWebサイトのデバッグ以上のことができます。ありがたいことに、DevToolsはすべてのスキルレベルのプログラマーにとって使いやすいです。アクセスしたWebサイトのソースコードを調べることで、Webサイトのフロントエンド開発の基本を学ぶこともできます。

また、この記事で説明しなかった他のいくつかのオプションを発見するかもしれません。だから、利用可能な機能を自由に試してみてください。さらに、これらの機能を微調整しても、Webサイトに少し害はありません。