こんにちは
株式会社HRBrainでバックエンドエンジニアをしているみつです!
Web開発で何かとお世話になるデベロッパーツール
色々な機能があるんだとは思いながら、深堀りしたことがなかったのでドキュメントを読んでみました。
どんな機能があるのかを色々調べてみたら機能もりもりのツールだったので記事にしてみました。
目次
- デベロッパーツールとは
- 機能1: 要素 - DOM
- 機能2: 要素 - CSS
- 機能3: コンソール
- 機能4: ソース
- 機能5: ネットワーク
- 機能6: パフォーマンス
- 機能7: メモリ
- 機能8: アプリケーション
- 機能9: レコーダー
- 機能10: レンダリング
- まとめ
- 参考
- PR
デベロッパーツールとは
Chrome DevTools は、Google Chrome ブラウザに直接組み込まれたウェブデベロッパーツールです。DevTools を使用して、その場でページを編集し、問題をすばやく診断して、より優れたウェブサイトをより迅速に構築できます。
デベロッパーツールは、Google Chromeに備わっている機能の1つ。
その場でページを編集したり、問題を素早く診断するためのツールとして提供されています。
機能1: 要素 - DOM
- DOMの操作を行うことができるタブ
- ※HTMLを操作を行うことはできない
要素を選択して、[検証]を押下することでDOMを表示することができます。
DOMとHTMLの違い
HTMLは、最初のページコンテンツを表し、DOM は現在のページコンテンツを表します。JavaScriptがノードを追加、削除、編集すると、DOMはHTMLとは異なるものになります。
機能2: 要素 - CSS
- 要素のCSSを表示することができるタブ
同じく要素を選択して、[検証]を押下することで要素に当たっているCSSを表示することができます。
機能3: コンソール
- JavaScriptなどが期待どおりに動作していることを確認できるタブ
-
console.table()
でテーブル表示とかもできます
機能4: ソース
- ファイルの表示と編集、スニペットの作成、JavaScriptのデバッグ、ワークスペースの設定ができるタブ
機能5: ネットワーク
- 個人的には、一番使う機能!
- ネットワークのアクティビティを見ることができるタブ
- APIでの通信やファイルがアップロード、ダウンロードができていることを確認する
- リソースが実際にアップロードまたはダウンロードされていることを確認する
- HTTP ヘッダー、コンテンツ、サイズなど、個々のリソースのプロパティを検査する
機能6: パフォーマンス
- ページのパフォーマンスを知ることができるタブ
実行時のパフォーマンスとは、ページの読み込み時と実行時でのページのパフォーマンスを表します。
機能7: メモリ
- メモリ分布の確認、メモリリークの検出と隔離、関数別のメモリ割り当ての内訳の表示などができるタブ
ヒープスナップショット
ヒープスナップショットには、ページのJavaScriptオブジェクトと関連するDOMノードのメモリ分布が表示されます。
タイムラインでの割り当ての計測
割り当てタイムラインには、計測された JavaScriptメモリ割り当ての推移が表示されます。プロファイルの録画後に時間間隔を選択して、プロファイル内に割り当てられ、録画が終了するまでに継続しているオブジェクトを表示できます。このプロファイル タイプを使用してメモリリークを隔離します。
タイムラインでの割り当ての計測
サンプリングメソッドを使用してメモリ割り当てを記録します。このプロファイルタイプはパフォーマンスのオーバーヘッドが最小限で、長時間実行オペレーションに使用できます。JavaScript 実行スタックごとに分類された割り当てのおおよその値がわかります。
機能8: アプリケーション
- Webサイトのfaviconや背景等の情報も確認ができる
- アプリケーションタブでは、Service Worker、Service Workerのキャッシュを検査、変更、デバッグができる
機能9: レコーダー
- ユーザーフローを記録、再生、測定することが出来るタブ
機能10: レンダリング
- レンダリングのパフォーマンスを確認することができるタブ
- フォーカスを当てたり、レイヤの枠線を表示したりすることができる
まとめ
標準で備わっている機能でも結構使ってみたいと思えるものがたくさんありました。
他にも色々な機能がありますが、日々の中で使えそうなものを拾っていきたいと思います。
参考
[公式ドキュメント日本語版]
[公式ドキュメント英語版]
PR
株式会社HRBrainでは、一緒に働く仲間を募集しています!
興味を持っていただいた方はぜひ弊社の採用ページをご確認ください!
HRBrain文化を一緒に作っていきましょう!