Google Chromeデベロッパーツールの便利機能５選！

Google Chromeのデベロッパーツールを開くと、そのページのコードを見ることができます。

開くにはChromeを開いた状態で下記のショートカットキーが使えます。

カーソルで要素指定

デベロッパーツールを開いて、ツール上の（画像参照）マークをクリックした状態で、要素をホバーすると、その要素の範囲が表示されます。クリックすることで、右側のコードでその要素がハイライトされます。

コードを右クリックして、「Edit as HTML」を選択すると、HTMLを編集することが出来ます。（リロードすると変更はもとに戻ります）

Deleteキーを押すか、「Delete element」をクリックするとその要素を削除できます。

「Hide element」をクリックすると、その要素を非表示に出来ます。
（たまに閲覧しているサイトがバグっていて、上に来ている要素が邪魔で下の要素が見れないときなどにも使えます）

HTMLの下にあるCSSをいじることで、CSSを編集することが出来ます。

クラスの書いていないエリアに記述すると、選択している要素のみに記述したCSSが反映されます。

「：hover」というところをクリックすると、チェックボックスが出てきます。
チェックボックスにチェックを入れることでその要素をホバーしたときや、フォーカスした時のスタイルを確認できます。

HTMLの上のスマホマークをクリックすることで、Windowサイズの変更ができます。

サイズは、セレクトボックスから選択することも出来ますし、Responsiveにすると、自由に縦横幅を変更できます。

Networkタブを開き、「No throttling」をクリックすると、回線速度を変更できます。

Lighthouseタブを選択すると、そのページのスコアを調べることが出来ます。

Generate reportをクリックすると、結果が表示されます。

それぞれのスコアを100に近づけることで、Googleに良いサイトだと評価してもらえます。

どうすれば評価をあげられるかは、それぞれの項目のところに英語で書かれています。
例えばAccesibilityを確認すると以下のように出ています。

「Background and foreground colors do not have a sufficient contrast ratio」というのは、背景色とテキストのコントラストが小さいので、文字が見づらいという指摘です。背景色を濃くすれば点数が上がります。

色のコントラストを調べるのに使えるサイトがあるのでリンクを張っておきます。
https://dequeuniversity.com/rules/axe/3.2/color-contrast?lang=ja

英語を読んでも意味がわからない場合には、指摘文をコピーして検索してみてください。解決策が出てくると思います。