カバレッジ ツールを使用して、使用されていない JavaScript コードと CSS コードを検索する
カバレッジ ツールは、未使用の JavaScript と CSS コードを見つけるのに役立ちます。 未使用のコードを削除すると、ページの読み込みが高速化され、モバイル ユーザーの携帯データネットワーク データが保存される可能性があります。
未使用のコードを見つけることは比較的簡単です。 ただし、各ページに必要な JavaScript と CSS のみが付属するようにコードベースをリファクタリングすることは困難な場合があります。 このリファクタリングはテクノロジ スタックに依存するため、このガイドでは、コードベースをリファクタリングして未使用のコードを回避する方法については説明しません。
概要
未使用の JavaScript または CSS の配布は、Web 開発で一般的な問題です。 たとえば、ページで ブートストラップ ボタン コンポーネント を使用するとします。 ボタン コンポーネントを使用するには、HTML の Bootstrap スタイルシートへのリンクを次のように追加する必要があります。
<head>
...
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
...
</head>
このスタイルシートには、ボタン コンポーネントのコードが含まれるだけではありません。 すべてのブートストラップ コンポーネントの CSS が含まれています。 ただし、他のどのブートストラップ コンポーネントも使用していません。 そのため、ページは必要のない CSS の束をダウンロードしています。
この余分な CSS は、次の理由で問題になります。
余分なコードにより、ページの読み込みが遅くなります。
ユーザーがモバイル デバイス上のページにアクセスすると、追加のコードによって携帯データネットワーク データが使い果たされます。
カバレッジ ツールを開く
入力を
coverage開始し、[ カバレッジの表示 ] コマンドを選択し、 を押しますEnter。 ドロワーでカバレッジ ツールが開きます。
コード カバレッジを記録する
カバレッジ ツールで次のいずれかのボタンをクリックします。
ページの読み込みに必要なコードを確認するには、[イン
![ストルメント化と再読み込みページの開始] (インストルメント化カバレッジと再読み込みページの開始](../media/reload-icon.msft.png)
) をクリックします。ページを操作した後に使用されるコードを確認する場合は、[ インストルメント カバレッジ (
)] をクリックします。
コード カバレッジの記録を停止する場合は、[ インストルメント化カバレッジの停止 ] をクリックし、結果の
) をクリックします。
コード カバレッジを分析する
カバレッジ ツールのテーブルには、分析されたリソースと、各リソース内で使用されているコードの量が表示されます。 行をクリックして 、ソース ツールでそのリソースを開き、使用されているコードと未使用のコードの詳細を 1 行ずつ表示します。
コード カバレッジ レポート:
コード カバレッジ レポートの列:
| 列 | 説明 |
|---|---|
| URL | 分析されたリソースの URL。 |
| Type | リソースに CSS、JavaScript、またはその両方が含まれているかどうか。 |
| 合計バイト数 | リソースの合計サイズ (バイト単位)。 |
| 未使用バイト数 | 使用されなかったバイト数。 |
| 最後の名前のない列 | [合計バイト数] 列と [未使用バイト数] 列の視覚化。 バーの赤いセクションは未使用のバイトです。 緑色のセクションはバイト単位で使用されます。 |
注
このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、 ケイス・バスク (テクニカルライター、Chrome DevTools & Lighthouse)によって作成されています。
