みなさんこんにちは!おさかなです!
今回は「デベロッパーツールのCoverage」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・コードカバレッジを確認したい方
・コードカバレッジの見方を知りたい方
・ブログ・サイト運営者の方
「コードカバレッジ」って何?
「コードカバレッジ」とは、コード網羅率のことでソフトウェアテストにおいて、テストされたソースコードの割合をパーセンド(%)で表したものです。(ふむふむ…。)
例えば、ソースコード100行の内、42行がテストされたら、コードカバレッジは42%になります。


実際につかってみよう!
デベロッパーツールを起動しよう!
まずは、調査したいサイトを開きます!(今回はおさかなびを使用します。)

サイトを開いた状態で「F12」キーを押して、デベロッパーツールを起動します。

そしたら、右上の「三点マーク」を押しましょう!(ポチっと)

メニューが開くので、「More tools」>「Coverage」の順に選択します。(はい!)

すると、下の方に「Coverageタブ」が表示されましたー!(おお!)

丸い○レコードボタンを押すと…?

こんな感じで、サイトの「コードカバレッジ」が表示されました!(すごい!)


(あともう少し…。😊)
コードカバレッジを確認いしよう!
コードカバレッジの情報が表示されたので、Coverageタブを詳しく見ていきましょう!
まず左側の「URL」では、分析されたソースコードのURLがわかります。

「Type」では、CSS・JavaScriptまたはその両方がソースコードに含まれているかどうか、チェックできます!(なるほど!)

「Total Bytes」では、合計バイト数がわかります。

「Unused Bytes」では、未使用のバイト数がわかります!(ほうほう…。)

「Usage Visualization」では、「合計バイト数(赤)」と「未使用バイト数(青)」が、棒グラフ形式で表示されています。(わかりやすい…!)

行をクリックすると…?

ソースコードの中身を見れます。(いいね!)

左側に「赤、青」の識別もあります…!(助かる)

みなさんも是非コードカバレッジをチェックしてみてください〜✨


デベロッパーツール優秀すぎ!

さすがGoogle
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
