完璧に構築されたウェブサイトはありません。人間が製造したすべての製品と同様に、コードエラーもプロセスの一部です。そのため、作成する新しいWebサイトを徹底的にテストして、ユーザーに可能な限り最高のエクスペリエンスを提供するために、エラーが発生しないことを確認することが重要です。
Google ChromeのDevToolsキットを最初に試すことなくWebサイトをテストするべきではありません。 Chromeデベロッパーモードでは、新しいサイト（または既存のサイト）を試して徹底的にテストし、バグを見つけて修正することができます。また、ソースコードの表示など、他のサイトがどのように実行されているかを知ることができます。
ここでは、Google Chromeブラウザーの開発者モード、そのツール、およびそれを効果的に使用する方法について知っておく必要があるすべてのものを示します。
Chromeとは開発者モード？
Chrome開発者モードについて言及するときは、Chromebookに表示される同じ開発者モード のことではありません。私たちが言及しているのは、ブラウザ自体に組み込まれている広範なChrome開発ツール（Google DevToolsと呼ばれます）です。
これらは、テスト、分析、および意図的に設計されたツールですテストのためにGoogle ChromeブラウザーにロードしたWebページを（必要に応じて）中断します。基本的なレベルでは、DevToolsを使用してWebサイトのソースコードを表示し、内部を覗いてサイトの構築方法と実行状況を確認できます。
Googleただし、DevToolsはこれ以上のものを提供します。 Chrome開発者モードを使用して、ロード後にページを変更したり、Google Chromeコンソールコマンドを実行してページを制御および操作したり、速度とネットワークテストを実行してWebトラフィックを監視したりできます。
In_content_1 all：[300x250] / dfp：[640x360]->Chrome DevToolsモードでは、さまざまなオペレーティングシステムや画面解像度など、他のデバイスをエミュレートすることもできます。これにより、サイトにレスポンシブなウェブデザインがあるかどうか、サイトのコンテンツとレイアウトがデバイスの解像度やタイプに応じてどこに変化するかを確認できます。
これらのツールはプロのウェブ開発者またはテスター向けですが、便利です標準のChromeユーザーがDevToolsスイートの使い方を知ることができます。解決できないサイトに問題がある場合は、Chromeデベロッパーモードに切り替えると、問題がサイトにあるのか、ブラウザにあるのかを確認できます。
Googleへのアクセス方法Chrome DevToolsメニュー
使用するツールに応じて、Google Chrome DevToolsメニューにアクセスする方法はいくつかあります。
これを行う最も簡単な方法Google Chromeメニューからです。これを行うには、右上の3つのドットのメニューアイコンをクリックします。表示されるメニューから、[その他のツール]>[デベロッパーツール]をクリックします。
これにより、開いているChromeタブまたはウィンドウの右側にある新しいメニューでDevToolsキットが開きます。
キーボードショートカットを使用してこれを行うこともできます。 WindowsまたはLinux PCからChromeブラウザを開き、F12キーを押します。開いているChromeタブまたはウィンドウでCtrl + Alt + JキーまたはCtrl + Alt + Iキーを押すこともできます。
macOSでは、 F12またはOption + Command + JまたはOption + Command + Iキーを押して、代わりにChrome DevToolsメニューを開きます。これによりChromeコンソールが開き、DevToolsメニューの上部にある他のChromeツールに移動するオプションが表示されます。
必要に応じて、ウェブサイトのソースコードを表示できます（ElementsプロセスのDevToolsメニューのタブ）を右クリックして、[Inspect]オプションをクリックします。
Chrome DevToolsの使用
これまで簡単に説明したように、Chrome DevToolsキットを使用して、[要素]タブでウェブサイトのソースコードを確認できます。ロードしたページの背後にあるコードを分析し、Chromeコンソールの[コンソール]タブにエラーメッセージ（サイトのロード方法に関する問題を示す）を表示できます。
[ソース]タブで、ウェブサイトのコンテンツのさまざまなソースを表示することもできます。たとえば、サイトがコンテンツ配信ネットワーク（CDN）の使用 の場合、サイトのメディアはここに別のソースとしてリストされます。
Chromeデベロッパーモードでは、そのコンテンツを直接ダウンロードするか、より多くのことを実行できますコンテンツの複雑な分析。
サイトのパフォーマンスをテストする場合は、[ネットワーク]タブでネットワークの使用状況を監視および記録できます。これにより、ブラウザとサイトの間で行われたネットワークリクエストの速度、サイズ、およびタイプが表示されます。
たとえば、ページが最初に読み込まれるとき、サイトはページコンテンツ自体を読み込みますが、サードパーティのデータベースからデータをリクエストします。たとえば、サインインすると、ここでネットワークリクエストとして表示されるデータベースがクエリされる場合があります。
これは、[パフォーマンス]タブでさらに分析できますさまざまなポイントでのスクリーンショットの記録など、Chromeブラウザの使用状況をより詳細に記録できます。これにより、サイトを読み込んでさらに分析するのにかかる時間が記録されます。
Google ChromeはPCのメモリに負担がかかる で定評があるため、[メモリ]タブでサイトのJavaScriptメモリ使用量をテストできます。ここではさまざまなChromeテストプロファイルを使用できます。このテストの詳細については、Chrome DevToolsのドキュメントページ をご覧ください。
サイトコンテンツの詳細な分析についてもたとえば、データを記録するために使用しているブラウザストレージと同様に、[アプリケーション]タブから検索できます。ここの[Cookie]セクションでサイトのCookie情報を表示するか、[ストレージをクリア]オプションをクリックして使用中のストレージをクリアできます。
サイトのセキュリティが心配な場合は、[セキュリティ]タブでサイトのパフォーマンスを確認できます。これにより、ページのChromeのセキュリティ分析の概要がわかります。これには、ページに正しい信頼できるSSL証明書があるかどうかも含まれます。
サイトのレポートを生成する場合パフォーマンス（通常のユーザー標準を満たしているかどうか、サイトのパフォーマンスが検索エンジンの最適化に影響している可能性があるかどうかなど）は、[灯台]タブをクリックできます。これにより、レポートをオンまたはオフにできる設定が提供されます。[レポートを作成]をクリックして、表示するレポートを作成します。
これにより、Chromeが持つ可能性の表面にかすかに傷がつく開発者モードは開発者にもたらすことができます。さらに詳しく知りたい場合は、Chrome DevToolsのドキュメント を使用して、独自のユーザーテストを作成する方法など、提供されているツールや機能を利用してください。
Google Chromeの高度なトリック
ほとんどのChromeユーザーは、Google Chrome DevToolsキットがブラウザーに存在することを知ることはありませんが、パワーユーザーの場合はWebサイトをテストおよび分析するための非常に便利な方法であり続けます。サイトをさらにテストするために利用できるサードパーティのウェブデベロッパー向けのChrome拡張機能 もあります。
基本的なウェブサイトを構築する の場合は、Chromeデベロッパーモードに切り替えると役立つ場合がありますすぐには表示されないサイトのエラーを見つけます。 Chromeが正常に機能している場合にのみこれを行うことができるため、Chromeのクラッシュに悩まされている の場合は、最初にブラウザをリセットまたは再インストールする必要がある場合があります。