【Chrome】デベロッパーツールで【コードカバレッチ】を確認しよう!

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「デベロッパーツールのCoverage」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・コードカバレッジを確認したい方
・コードカバレッジの見方を知りたい方
・ブログ・サイト運営者の方

「コードカバレッジ」って何?

コードカバレッジ」とは、コード網羅率のことでソフトウェアテストにおいて、テストされたソースコードの割合をパーセンド(%)で表したものです。(ふむふむ…。)
例えば、ソースコード100行の内、42行がテストされたら、コードカバレッジは42%になります。

サイトの「読み込み速度」を測定・診断できるサイト【PageSpeed Insights】とは?
みなさんこんにちは!おさかなです!今回は「PageSpeed Insights」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・サイトの読み込み速度を調べたい方・スピードを改善したい方・サ...

実際につかってみよう!

デベロッパーツールを起動しよう!

まずは、調査したいサイトを開きます!(今回はおさかなびを使用します。)

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

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

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

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

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

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

【裏ワザ】病気についての正しい情報が得られる検索方法【go.jp】とは?
みなさんこんにちは!おさかなです!今回は、検索の裏ワザである「go.jp」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・病気についての正しい情報を得たい方・病気の情報を得たい方・検索方法...

(あともう少し…。😊)

コードカバレッジを確認いしよう!

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

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

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

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

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

をクリックすると…?

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

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

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

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)
「美しいコードを見ると感動する。優れたコードは見た瞬間に何をしているかが伝わってくる。そういうコードは使うのが楽しいし、 自分のコードもそうあるべきだと思わせてくれる。本書の目的は、君のコードを良くすることだ」(本書「はじめに」より)。 コードは理解しやすくなければならない。本書はこの原則を日々のコーディングの様々な場...
おさかな
おさかな

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

ナビまる
ナビまる

さすがGoogle

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【環境構築不要】で、プログラミング言語・コードを試せるサイト【Riju】とは?
みなさんこんにちは!おさかなです!今回は「Riju」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・環境構築で躓いている方・とりあえず色々な言語を試したい方・サクッとプログラムを実行したい...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました