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