Chrome の devtools を使いこなす Part1 | 基本編

この記事では、Chromeの devtools を使いこなせていない気がしている人に対して、押さえておきたいよく使う基本的な機能を紹介します！

最近知ったんですが、devtools にドキュメントがあったんですね. Devtools docs
ということで、今後このドキュメントで学びながら、普段何気なく使ってるdevtoolsを使いこなせるようになることを目指します！

初回では、今まで使ってきた機能の中でよく使用した機能を紹介します. その後、ドキュメントを見ながら各機能ごとに紹介していきます.
気になるかたは、ぜひフォローして追っていただけるとうれしいです！

devtoolsの開き方

開き方にも、ショートカットを含めると、方法は4つあります.

• 右クリック → 検証
• Cmd + Opt + i
• Cmd + Opt + c (CSSのStylesタブを直で開く)
• Cmd + Opt + j (js の consoleを直で開く)

スタイル周りの検証でよく使う機能

• 画像の左上にある矢印を押して、画面の要素にホバーすると、UIから要素を特定することができる.
• 隣にあるスマホ・PCアイコンのボタンを押すと、レスポンシブデザインを確認することができる.

• iマークをホバーすると、特定のスタイルが効かない原因を教えてくれる.

コンソールタブでよく使う機能

• クライアントサイドで動く js の機能で、どこまで動いているかをデバッグするときに、console.log で出力して結果を見る

• CORSの問題などで、ブラウザからのリクエストが正常に送れていない可能性を確かめるために、直接 fetch リクエストを送ったり.
  • 簡易的なクライアントサイドのJSの機能を確かめるために使用する.

ネットワークタブでよく使う機能

• 一番基本的な使い方は、リクエストが成功したか、どうかを見たりする時に使用する.

• 画像上部のタブのところで、レスポンス結果を絞り込むことができる. この場合、CSSファイルの読み込み結果だけを表示している.

-「No throttling」 と書いてあるプルダウンを押して、任意の速さを選ぶと、ネットワークの通信速度を遅くすることができる.
- パフォーマンスの計測などで、読み込みが遅いコンテンツが何かを特定しやすくなったりする.

まとめ

今回紹介した機能は、devtools の一部で、よく使う機能だと思います. が、まだまだ使いこなせていない感覚が強いです. 今後、各カテゴリーごとに学んだ内容をまとめてアウトプットする予定なので、ぜひ楽しみにお待ちください！

YouTubeでは、もっと色々な知識を詰め込んだ動画をアップしているので、気になる方はチェックしてみていただけるとうれしいです！