web担当者必見！ディベロッパーツールの便利な使い方を紹介

2024.03.12

リスティング

AI要約

ChatGPT4で要約生成中

Google chromeの便利な機能

web制作を行っている人であれば、不要なjavascriptを検出したり、CSSをデモンストレーションしたりするためにディベロッパーツールを使っていることと思います。
Google chromeブラウザを使っている方であれば誰でも無料で利用することができるツールとして今や当たり前に使われています。
web担当者の皆様にとっては欠かせないツールとなっているディベロッパーツールですが、半年ほど前に実は新機能が追加されたのをお気づきでしたか？
そこで今回はディベロッパーツールに新しく追加された新機能とその便利な使い方について紹介していきます。

今回追加された新機能とは

ページの軽量化と、未使用のCSSとjava scriptを見つける機能。こちらの機能は“Coverage tab”と呼ばれます。使い方としては、ctr + shift + P で、「Show Coverage」を入力して選択します。

上のように“cover”だけ入力しても自動で検出してくれるので大丈夫です。
上の“show coverage”をクリックすると各要素に使用されたコードの容量と割合が表示されます。
上のデータからはjavascriptとCSSに使われている容量が大きいことが分かります。

各デバイス上のでフルスクリーンがキャプチャできる

まず、Ctr + shift + Mでデバイスを選択します。Ctr + shift + P で“Capture full size screenshot”を入力して選択。
こちらは各デバイスでのフルサイズのスクリーンショットを撮影することができます。“Cap”まで入力すれば自動で検出してくれます。

入力後、enterキーを押すとすぐに撮影されます。

スクリプトやスタイルシートのロードをブロック

スタイルシートやスクリプトがロードされていない時のページの挙動をシュミレーションできます。
シュミレーションする手順は下のようになります。
ディベロッパーツールを起動後“Network”と書かれた項目を選択し赤枠部分で右クリック後“Block Request URL”をクリックします。そうするとファイルが読み込まれていない場合の挙動をシュミレーションすることができます。

まとめ

今回は、ディベロッパーツールの新機能について紹介しました。webサイトのレイアウトを改善する時など、簡単なコーディングをシュミレーションする際によく使われるディベロッパーツールですが、それだけではなく機能は多岐に渡ります。例えば、今回紹介したようにページ表示速度を考える上で役に立つ使い方もできます。また、実際の業務を行う上で今回紹介したものを押さえておけば、多少はやりやすくなると思うので是非マスターしておきたいところです。