LoginSignup
46
42
お題は不問！Qiita Engineer Festa 2024で記事投稿！
Qiita Engineer Festa20242024年7月17日まで開催中！
@mi2__user(岡田 光博)in株式会社HRBrain

Chromeのデベロッパーツールにはたくさんの機能がある！

Last updated at Posted at 2024-07-10

こんにちは:sunny:

株式会社HRBrainでバックエンドエンジニアをしているみつです！

Web開発で何かとお世話になるデベロッパーツール:fire:

色々な機能があるんだとは思いながら、深堀りしたことがなかったのでドキュメントを読んでみました。

どんな機能があるのかを色々調べてみたら機能もりもりのツールだったので記事にしてみました。

目次

:writing_hand:デベロッパーツールとは

Chrome DevTools は、Google Chrome ブラウザに直接組み込まれたウェブデベロッパーツールです。DevTools を使用して、その場でページを編集し、問題をすばやく診断して、より優れたウェブサイトをより迅速に構築できます。

デベロッパーツールは、Google Chromeに備わっている機能の1つ。

その場でページを編集したり、問題を素早く診断するためのツールとして提供されています。

image.png

:writing_hand:機能1: 要素 - DOM

  • DOMの操作を行うことができるタブ
  • ※HTMLを操作を行うことはできない

要素を選択して、[検証]を押下することでDOMを表示することができます。

[画面をクリック]
image.png

[タブを開く]
image.png

DOMとHTMLの違い

HTMLは、最初のページコンテンツを表し、DOM は現在のページコンテンツを表します。JavaScriptがノードを追加、削除、編集すると、DOMはHTMLとは異なるものになります。

:writing_hand:機能2: 要素 - CSS

  • 要素のCSSを表示することができるタブ

同じく要素を選択して、[検証]を押下することで要素に当たっているCSSを表示することができます。

[画面をクリック]
image.png

[検証ボタンを押下してCSSを見る]
image.png

:writing_hand:機能3: コンソール

  • JavaScriptなどが期待どおりに動作していることを確認できるタブ
  • console.table()でテーブル表示とかもできます

[画面をクリック]
image.png

[コンソールを押下して実行環境を開く]
image.png

[console.table()を実行する]
image.png

:writing_hand:機能4: ソース

  • ファイルの表示と編集、スニペットの作成、JavaScriptのデバッグ、ワークスペースの設定ができるタブ

[画面をクリック]
image.png

[ファイルの表示ができる]
image.png

:writing_hand:機能5: ネットワーク

  • 個人的には、一番使う機能！
  • ネットワークのアクティビティを見ることができるタブ
  • APIでの通信やファイルがアップロード、ダウンロードができていることを確認する
  • リソースが実際にアップロードまたはダウンロードされていることを確認する
  • HTTP ヘッダー、コンテンツ、サイズなど、個々のリソースのプロパティを検査する

[通信を見ることができる]
image.png

:writing_hand:機能6: パフォーマンス

  • ページのパフォーマンスを知ることができるタブ

実行時のパフォーマンスとは、ページの読み込み時と実行時でのページのパフォーマンスを表します。

[パフォーマンスを計測する]
image.png

[パフォーマンスを確認する]
image.png

[重たいタスクを確認する]
image.png

:writing_hand:機能7: メモリ

  • メモリ分布の確認、メモリリークの検出と隔離、関数別のメモリ割り当ての内訳の表示などができるタブ

[メモリパネルを確認する]
image.png

[（例）ヒープスナップショットを確認する]
image.png

ヒープスナップショット

ヒープスナップショットには、ページのJavaScriptオブジェクトと関連するDOMノードのメモリ分布が表示されます。

タイムラインでの割り当ての計測

割り当てタイムラインには、計測された JavaScriptメモリ割り当ての推移が表示されます。プロファイルの録画後に時間間隔を選択して、プロファイル内に割り当てられ、録画が終了するまでに継続しているオブジェクトを表示できます。このプロファイル タイプを使用してメモリリークを隔離します。

タイムラインでの割り当ての計測

サンプリングメソッドを使用してメモリ割り当てを記録します。このプロファイルタイプはパフォーマンスのオーバーヘッドが最小限で、長時間実行オペレーションに使用できます。JavaScript 実行スタックごとに分類された割り当てのおおよその値がわかります。

:writing_hand:機能8: アプリケーション

  • Webサイトのfaviconや背景等の情報も確認ができる
  • アプリケーションタブでは、Service Worker、Service Workerのキャッシュを検査、変更、デバッグができる

[アプリケーションタブを確認する]
image.png

:writing_hand:機能9: レコーダー

  • ユーザーフローを記録、再生、測定することが出来るタブ

[ユーザーフローを記録する]
image.png

[実際に記録された画面]
image.png

:writing_hand:機能10: レンダリング

  • レンダリングのパフォーマンスを確認することができるタブ
  • フォーカスを当てたり、レイヤの枠線を表示したりすることができる

[レンダリングを確認する]
image.png

まとめ

標準で備わっている機能でも結構使ってみたいと思えるものがたくさんありました。

他にも色々な機能がありますが、日々の中で使えそうなものを拾っていきたいと思います。

参考

[公式ドキュメント日本語版]

[公式ドキュメント英語版]

PR

株式会社HRBrainでは、一緒に働く仲間を募集しています！

興味を持っていただいた方はぜひ弊社の採用ページをご確認ください！

HRBrain文化を一緒に作っていきましょう！

46
42
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
46
42