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

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

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

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

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

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

DevToolsを介して行った変更は、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を介して、Webページを構成するファイルにアクセスできます。これらのファイルにアクセスするには、ソースをクリックします DevToolsメニューの上部にあるオプション。これにより、Webサイトのファイルシステムが公開され、編集も可能になります。

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

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

ウェブページへのライブ編集の実行

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

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

DevToolsを使用してページを編集する場合、ブラウザでページをリロードすると元の形式に戻り、編集内容は自分だけに表示されることに注意してください。 DevToolsを介して編集しても、他のユーザーがそのWebサイトをスムーズに実行したり使用したりすることには影響しません。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ウェブサイトを監査する

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

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

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

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

ChromeDevToolsを活用する

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

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