Chromeデベロッパーモードとは何ですか？その用途は何ですか？

完璧に構築されたウェブサイトはありません。人間が作ったすべての製品と同様に、コードエラーはプロセスの一部です。そのため、作成した新しいWebサイトを徹底的にテストして、ユーザーに最高のエクスペリエンスを提供するために、可能な限りエラーがないことを確認することが重要です。

最初にGoogleChromeのDevToolsキットを試さずにウェブサイトをテストしないでください。 Chromeデベロッパーモードでは、新しいサイト（または既存のサイト）を試して徹底的にテストし、バグを見つけて修正することができます。また、ソースコードの表示など、他のサイトがどのように実行されているかについての洞察を得ることができます。

Google Chromeブラウザのデベロッパーモード、そのツール、およびその効果的な使用方法について知っておく必要のあるすべてがここにあります。

Chromeデベロッパーモードとは何ですか？

Chromeデベロッパーモードとは、Chromebookに表示されるのと同じデベロッパーモードのことではありません。私たちが言及しているのは、広範なChrome開発ツール（ Google DevTools と呼ばれる）です。 ）ブラウザ自体に組み込まれています。

これらは、テスト目的でGoogle Chromeブラウザに読み込んだウェブページをテスト、分析、および意図的に破壊するように設計されたツールです（必要な場合）。基本的なレベルでは、DevToolsを使用してWebサイトのソースコードを表示し、内部を覗いてサイトがどのように構築され、どの程度うまく機能しているかを確認できます。

ただし、GoogleDevToolsはこれ以上のものを提供します。 Chromeデベロッパーモードを使用して、ページの読み込み後にページを変更したり、Google Chromeコンソールコマンドを実行してページを制御および操作したり、速度とネットワークテストを実行してウェブトラフィックを監視したりできます。

Chrome DevToolsモードでは、さまざまなオペレーティングシステムや画面解像度など、他のデバイスをエミュレートすることもできます。これにより、サイトにレスポンシブWebデザインがあるかどうか、およびデバイスの解像度やタイプに応じてサイトのコンテンツとレイアウトがどこで変わるかを確認できます。

これらのツールはプロのウェブ開発者やテスターを対象としていますが、標準のChromeユーザーがDevToolsスイートの使い方を知っていると便利です。解決できないサイトの問題を見つけた場合は、Chromeデベロッパーモードに切り替えると、問題がサイトにあるのかブラウザにあるのかを確認するのに役立ちます。

GoogleChromeDevToolsメニューにアクセスする方法

使用するツールに応じて、GoogleChromeDevToolsメニューにアクセスする方法はいくつかあります。

これを行う最も簡単な方法は、GoogleChromeメニューからです。これを行うには、3ドットメニューアイコンをクリックします 右上にあります。表示されるメニューから、[その他のツール>開発者ツール]をクリックします 。

これにより、開いているChromeタブまたはウィンドウの右側にある新しいメニューでDevToolsキットが開きます。

キーボードショートカットを使用してこれを行うこともできます。 WindowsまたはLinuxPCから、Chromeブラウザを開き、 F12を押します。 鍵。 Ctrl + Alt + Jを押すこともできます またはCtrl+ Alt + I 開いているChromeタブまたはウィンドウのキー。

macOSでは、 F12を押します または、オプション+コマンド+ Jを押します またはオプション+コマンド+私 代わりに、ChromeDevToolsメニューを開くためのキー。これにより、Chromeコンソールが開き、DevToolsメニューの上部にある他のChromeツールに移動するオプションが表示されます。

必要に応じて、Webサイトのソースコードを表示できます（要素を開く） を右クリックして検査をクリックすることにより、開いているWebページのDevToolsメニューのタブ） オプション。

ChromeDevToolsの使用

簡単に触れたように、Chrome DevToolsキットを使用して、要素の下にあるWebサイトのソースコードを確認できます。 タブ。ロードしたページの背後にあるコードを分析したり、コンソールの下のChromeコンソールでエラーメッセージ（サイトのロード方法に問題があることを示す）を表示したりできます。 タブ。

ソースの下のWebサイトからコンテンツのさまざまなソースを表示することもできます タブ。たとえば、サイトがコンテンツ配信ネットワーク（CDN）を使用している場合、サイトのメディアはここに別のソースとしてリストされます。

Chromeデベロッパーモードでは、そのコンテンツを直接ダウンロードしたり、コンテンツのより複雑な分析を実行したりできます。

サイトのパフォーマンスをテストする場合は、ネットワークでネットワークの使用状況を監視および記録できます。 タブ。これにより、ブラウザとサイトの間で行われたネットワークリクエストの速度、サイズ、およびタイプが表示されます。

たとえば、ページが最初に読み込まれるときに、サイトはページコンテンツ自体を読み込みますが、サードパーティのデータベースからのデータを要求する場合もあります。たとえば、サインインすると、ここにネットワークリクエストとして表示されるデータベースがクエリされる場合があります。

これは、パフォーマンスでさらに分析できます。 タブ。さまざまなポイントでのスクリーンショットの記録など、Chromeブラウザの使用状況をより詳細に記録できます。これにより、さらに分析するためにサイトをロードするのにかかる時間がログに記録されます。

Google Chromeは、PCのメモリに負担がかかるという評判があるため、メモリでサイトのJavaScriptメモリ使用量をテストできます。 タブ。ここではさまざまなChromeテストプロファイルを使用できます。このテストの詳細については、ChromeDevToolsのドキュメントページをご覧ください。

サイトのコンテンツ、およびサイトが使用している可能性のあるブラウザストレージ（たとえば、データのログ記録）のより詳細な分析については、アプリケーションを検索できます。 タブ。ここでCookiesの下にサイトのCookie情報を表示できます セクションをクリックするか、ストレージのクリアをクリックして使用中のストレージをクリアします オプション。

サイトのセキュリティが心配な場合は、セキュリティでサイトのパフォーマンスを確認できます。 タブ。これにより、ページに正しい信頼できるSSL証明書があるかどうかなど、ページに対するChromeのセキュリティ分析の概要がわかります。

一般的なユーザー基準を満たしているかどうかや、サイトのパフォーマンスが検索エンジン最適化に影響を与える可能性があるかどうかなど、サイトのパフォーマンスに関するレポートを生成する場合は、灯台をクリックします。 タブ。これにより、レポートをオンまたはオフにできる設定が提供されます。[レポートの生成]をクリックします。 表示するレポートを作成します。

これは、Chromeデベロッパーモードがデベロッパーにもたらす可能性のほんの一部にすぎません。詳細を知りたい場合は、Chrome DevToolsのドキュメントが、独自のユーザーテストを作成する方法など、提供されているツールと機能を支援する必要があります。

高度なGoogleChromeの秘訣

ほとんどのChromeユーザーは、ブラウザにGoogle Chrome DevToolsキットが存在することを知りませんが、パワーユーザーにとっては、ウェブサイトをテストおよび分析するための非常に便利な方法です。ウェブ開発者向けのサードパーティのChrome拡張機能もあり、サイトをさらにテストするのに役立ちます。

基本的なウェブサイトを構築している場合、Chromeデベロッパーモードに切り替えると、すぐには表示されないサイトのエラーを見つけるのに役立つ可能性があります。これは、Chromeが正常に機能している場合にのみ実行できるため、Chromeのクラッシュに苦労している場合は、最初にブラウザをリセットまたは再インストールする必要があります。