みなさんこんにちは!おさかなです!
今回は「デベロッパーツールのCoverage」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・コードカバレッジを確認したい方
・コードカバレッジの見方を知りたい方
・ブログ・サイト運営者の方
「コードカバレッジ」って何?
「コードカバレッジ」とは、コード網羅率のことでソフトウェアテストにおいて、テストされたソースコードの割合をパーセンド(%)で表したものです。(ふむふむ…。)
例えば、ソースコード100行の内、42行がテストされたら、コードカバレッジは42%になります。
![](https://osakanav.com/wp-content/uploads/2022/04/rectangle_large_type_2_a19029012960ca8065c6b27a726592e5.webp)
![](https://osakanav.com/wp-content/uploads/2022/03/pagespeed-top-160x90.png)
実際につかってみよう!
デベロッパーツールを起動しよう!
まずは、調査したいサイトを開きます!(今回はおさかなびを使用します。)
![](https://osakanav.com/wp-content/uploads/2022/04/osakanav-home.png)
サイトを開いた状態で「F12」キーを押して、デベロッパーツールを起動します。
![](https://osakanav.com/wp-content/uploads/2022/04/coverage.png)
そしたら、右上の「三点マーク」を押しましょう!(ポチっと)
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-santen.png)
メニューが開くので、「More tools」>「Coverage」の順に選択します。(はい!)
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-menu.png)
すると、下の方に「Coverageタブ」が表示されましたー!(おお!)
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-tab.png)
丸い○レコードボタンを押すと…?
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-rec.png)
こんな感じで、サイトの「コードカバレッジ」が表示されました!(すごい!)
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-info.png)
![](https://osakanav.com/wp-content/uploads/2022/03/kensaku-go-jp-160x90.png)
(あともう少し…。😊)
コードカバレッジを確認いしよう!
コードカバレッジの情報が表示されたので、Coverageタブを詳しく見ていきましょう!
まず左側の「URL」では、分析されたソースコードのURLがわかります。
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-url.png)
「Type」では、CSS・JavaScriptまたはその両方がソースコードに含まれているかどうか、チェックできます!(なるほど!)
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-type.png)
「Total Bytes」では、合計バイト数がわかります。
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-tb.png)
「Unused Bytes」では、未使用のバイト数がわかります!(ほうほう…。)
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-ub.png)
「Usage Visualization」では、「合計バイト数(赤)」と「未使用バイト数(青)」が、棒グラフ形式で表示されています。(わかりやすい…!)
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-uv.png)
行をクリックすると…?
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-select.png)
ソースコードの中身を見れます。(いいね!)
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-code.png)
左側に「赤、青」の識別もあります…!(助かる)
![](https://osakanav.com/wp-content/uploads/2022/04/coverage-redblue.png)
みなさんも是非コードカバレッジをチェックしてみてください〜✨
![](https://osakanav.com/wp-content/uploads/2022/04/rectangle_large_type_2_beb2ddf83dd652bf9e32f9266fddcf78.webp)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
デベロッパーツール優秀すぎ!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
さすがGoogle
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/03/riju-top-160x90.png)