非開発者向けのGoogleChrome DevTools

Google Chromeは、世界中で最も広く使用されているブラウザの1つであり、ユーザーの65％近くが世界中にいます。 そしてそれには正当な理由があります、それはうまく機能し、たくさんのウェブ機能をサポートし、グーグルが提供するすべてのものとネイティブに統合し、そしてそれは使いやすいです。

しかし、ユーザー側だけではありません。 開発者向けにも非常によく構築されています。 Firefoxは、ユーザーベースは比較的小さいものの、優れた開発エクスペリエンスを提供するもう1つの優れたブラウザーです。 そのため、ChromeとそのDevToolsに焦点を当てていますが、ありがたいことに、ほとんどのブラウザーのUIは非常に似ているため、ここでのヒントはFirefox、Safari、Edgeなどのブラウザーに適切に翻訳されます。

Chrome DevToolsとは何ですか？

Chrome DevToolsは、GoogleChromeブラウザに直接組み込まれている一連のウェブ開発者ツールです。 DevToolsを使用すると、ページをオンザフライで編集し、問題をすばやく診断できます。これにより、最終的には、より優れたWebサイトをより迅速に構築できます。
ChromeDevToolsドキュメントのホームページ

DevToolsは、ほとんどのフロントエンド（および多くの場合バックエンド）開発者がWebページのパフォーマンス、Webページを定義するHTMLタグ、および最も基本的な形式で適用されるスタイルを検査するために使用するものです。 それは、開発者以外の一般的なユースケースでも機能する限り、私たちが一瞥する他の非常に役立つ機能をたくさん提供します。

上のスクリーンショットにある開発ツールは、左側にコード、右側にさまざまなプロパティがあります。 これは、Command + Option + C（Mac）またはControl + Shift + C（Windows、Linux、Chrome OS）を押した場合に表示されるデフォルトのビューです。

DevToolsは多くの機能を提供しますが、より注目すべき機能は次のとおりです。

• ページの読み込み後および読み込み中に生成されたドキュメント構造（HTML）。
• 特定のHTML要素に適用されるCSSと、親要素から継承されるもの。
  ビューポートのサイズ、要素のサイズ、パディング、マージン、境界線などを表示します。
• 実行中のスクリプトを除いて、ページ上のすべてを変更する機能。
• ページを更新すると保存されるコードに変更を加えることはできません（ただし、デフォルトでは不可能です）。
• すべての変更はクライアント側です。つまり、変更を加えても、ページを更新するまでは表示されます。
• キャッシュなしで、シミュレートされたより遅いネットワーク速度でテストする方法。
• パフォーマンスを測定し、ページのパフォーマンスをスコアリングするだけでなく、それを解決するためのヒントを提供するツール。
• ページのコンソールとそのエラー、警告、メッセージ、およびそこでjavascriptコードを実行する方法を表示します。

これは非常に短いリストですが、より注目すべき機能のいくつか、主に私たちがカバーするものをカバーしています。

関連：最初のChrome拡張機能を作成する方法

なぜDevToolsが必要なのですか、ユースケースは何ですか？

開発者にとっては明らかですが、非開発者はどうでしょうか？ さて、パワーユーザーのステータスに近づくための巧妙なトリックとヒントがいくつかあります。 多くの場合、サイトの所有者はサイトの問題を見つけ、1つか2つの質問をし、問題を修正するために「貼り付ける」ためのコードスニペットを受け取ることがあります。 開発者がそのようなスニペットをテストする方法の1つは、それらを開発ツールに直接適用することです。 また、物事をどのように見せたいかについて、開発者に素晴らしいプレビューを提供する方法でもあります。

CSSコードを適用する

DevToolsの最初の最も一般的な使用法は、CSSを変更して適用することです。 CSSは、ページの外観を定義するものであり、美学です。 これを行うには、スタイルを設定する要素をポイントし、右クリックして「検査」を選択するだけです。

同じことが他のほとんどのブラウザにも当てはまりますが、メニュー項目のテキストは多少異なる場合があります。 これを行うと、DevToolsが開き、必要な要素を直接選択するのがわかります。 そこには、開発ツールの2つの主要部分があります。 HTML側とCSS側（左と右）：

HTML部分を回避する方法を見つけるのは少し難しいかもしれませんが、心配しないでください。左側のパネルに要素を合わせると、DevToolsが要素を強調表示します。 必要なものが見つかったら、右側にスタイルを書くことができます。 すでにいくつか追加されています。 それでは、背景を変更して読んで、どのように見えるかを見てみましょう。

入力するとすぐに、ページのスタイルが更新されます。 ここに任意のCSSを書くことができ、それはすでにページにあるスタイルと同じように適用されます。 ルールの終わり近く（「幅」の下）を押すと、新しいスタイルの追加が開始されます。 または、「element.style」と表示されている上部に書き込むこともできます。 次に、これを開発者と共有したい場合は、コードを選択してコピーして貼り付けるだけです。 プロのヒント、スタイルの「セレクター」も入手してください。 これは上のスクリーンショットの「.RNNXgb」です。 これにより、スタイルを追加する要素が開発者に通知されます。

関連：WordPress CSS：初心者のための基本ガイド

色を選ぶ

もう1つの優れた方法は、正確に使用されている色を確認することと、DevToolsから直接カラーピッカーを使用して他の色を確認することです。 カラーコードの横にある四角（上の矢印が指しているところ）をクリックするだけで、カラーピッカーが開きます。

使用されているフォントを探す

CSS開発者は、使用中のフォント、フォントサイズ、行の高さ、色、フォントの太さ、およびその他のタイポグラフィ関連のプロパティも定義します。 それらはすべて右側に表示されます。 交差していない限り、表示されているスタイルが適用されます。 Googleフォームでの検索に使用されているフォントを調べてみましょう。 フォントが表示されるまで右クリックして調べ、下にスクロールするか、右側のセクションの上部にある上の[フィルタ]フィールドで検索します。

先に進んでフォントを更新すると、サイトが別のフォントでどのように表示されるかがわかります。すぐに切り替えることができます。 もちろん、開発者は後でコードを変更し、フォントの変更によって発生する問題を修正する必要がありますが、この方法は、開発環境を設定せずにすばやくテストするのに最適です。

「Georgia」をフォントに設定した場合のGoogleのホームページは次のようになります。 これを実現するには、複数のプロパティを更新する必要がありましたが、Google開発者による優れたCSSアーキテクチャのおかげで、かなり簡単でした。 ほとんどの場合、不十分に記述されたサイトでは、サイト全体が更新されるのを確認するために、大量のプロパティを更新する必要があります。

関連：あなたのウェブサイトに最適なフォントを選択する方法

キャッシュ、スロットル、速度

キャッシュとは何ですか？ 簡単に言うと、将来使用するためにマシンに保存されるリソースです。 リソースには、JS、CSSファイル、または画像があります。 ページを開くたびに変わらなければ、毎回ダウンロードする必要はありませんよね？ したがって、ブラウザはそれをしばらくの間マシンに保持するだけです。

しかし、サーバーに変更があり、セットアップがリソースの更新にベストプラクティスを利用していない場合はどうなりますか？ つまり、開発者がコードベースを変更したとしても、古いスタイルが表示されます。 それなら、キャッシュを停止して「ハードリフレッシュ」を実行できます。

開発ツールを開き、「ネットワーク」タブに移動します。 次に、「キャッシュを無効にする」をクリックして、「ハードリフレッシュ」を実行します。

これで、DevToolsを開いた状態でページを閲覧している間、ブラウザからキャッシュされたリソースはありません。 リソースが毎回読み込まれるため、ページの読み込みは遅くなりますが、変更が表示されます。 通常、開発者はデフォルトで「キャッシュを無効にする」をオンのままにし、ロード時間が重要な実際のユーザーインタラクションをテストする場合にのみ無効にします。

更新後の同じタブに、ページの速度と重量の測定値も表示されます。 「ロード」がトリガーされるまでの時間（他のスクリプトが追加の作業を行うためにアタッチするイベント）、要求されたファイルの数（上記の31の要求、かなりの量）、ダウンロードされた量など。 単純ですが、値が小さいほど良いです。 100〜150を超えるリクエストがあると、大きな速度の問題が発生し始めます。

DevToolsは、低速接続のシミュレーションも提供します。 3Gのような低速のネットワークでサイトがどのように機能するかを確認するのに非常に役立つ機能。 オンにするには、[キャッシュを無効にする]の横の値を変更し、[更新]をクリックします。 更新すると、サイトの読み込みの各ステップが表示されます。 キャッシュを無効にすると、これが通常の使用の最初の訪問になります。

「Slow3G」を選択して更新した場合の速度の違いを、実際の接続速度を使用した最初の例と比較して確認してください。 ここでは、「オフライン」をテストすることもできます。インターネットに接続していなくても、サイトはどのように機能するのでしょうか。 それが奇妙に聞こえるなら、そうではありません。プログレッシブWebアプリでは、訪問者が少なくとも1回アクセスしたことがあれば、インターネットに接続していなくてもサイトを機能させることができます。

監査は、ページのユーザーフレンドリーな速度分析を提供するもう1つの優れた機能です。 「監査」タブに移動して「レポートの生成」をクリックするだけで実行できます。

右側には、テストに時間がかかる場合があるため（1〜2分）、テスト対象を決定するためのオプションがいくつかあります。そのため、テストを何度も実行する場合は、現在のテストに必要なものだけを選択できます。 。 上記のオプションを使用したGoogleのホーム画面の結果の例を次に示します。

素晴らしいスコア！ 94は非常に優れており、このページに配置されたすばらしい作業を紹介しています。 表面的には非常に単純に見えるかもしれませんが、バックグラウンドで実行されている大量のスクリプトが非表示のままであり、サイトの速度が低下することを忘れないでください。 テストされた他の多くのメトリックがあり、どのサイトでこれを実行して、どのような問題があり、何を改善できるかを見つけることができます。

関連：「あなたのサイトをスピードアップする」とは本当に何を意味し、それを達成する方法は？

DevToolsコンソール

ここで取り上げる最後のビューはコンソールです。 ESCキーを押すか、「コンソール」タブに移動するだけで簡単にアクセスできます。 予想どおり、エラーは発生しません。問題が多すぎないようにするための警告がいくつかあります。

ただし、サイトが最近更新された後、何らかの理由でインタラクティブコンポーネント（ドロップダウン、メニュー、マップ、フォームなど）が機能しなくなった場合は、いつでもコンソールを確認できます。 理由を示すエラーがある可能性があります。

このようなエラーがどのように見えるかの例を次に示します。

エラーログのドキュメントページを使用してエラーを紹介するのは少し皮肉なことですよね？ いずれにせよ、それは良い目的を果たします。 これらは、一部の機能の動作を停止させるエラーです。 このような情報はいつでも開発者と共有し、支援を求めることができます。 ページを操作するとログがライブで投稿されるため、ボタンをクリックしてエラーが表示された場合は、その背後にあるスクリプトに問題がある可能性があります。

関連：優れたWebデザイナーになるための道

セキュリティに関する注意：コードの機能を理解せずにコードをコンソールにコピーして貼り付けることはお勧めできません。 特に、信頼性の低いソースからのものであり、会社の内部アプリケーション/ Webサイトで使用されている場合。 Facebookは、そのためにコンソールに警告を投稿しました。

概要

DevToolsは、開発者とサイト所有者の両方を支援する素晴らしいツールです。 ページを微調整および変更するために必要なすべてのものを提供します。 これにより、CSSの変更、HTMLの変更、ページ上の要素の削除と再配置、速度レポートと報告されたエラーの表示を行うことができます。

サイトの所有者は、テキストの段落を書くよりも理解しやすいかもしれないアイデアやニーズの例を開発者に紹介するためにそれを使用できます。 基本的なプロパティに関するCSSの知識があれば、ニーズをより詳しく説明できます。これにより、新しい変更に費やす時間とやり取りが大幅に削減されます。

使用されるのを待っている他の機能がたくさんあります。探索することを恐れないでください！