読み方：かいはつしゃツール

開発者ツール【developer tools】デベロッパーツール/DevTools

概要

開発者ツールとは、Webブラウザに内蔵されている、表示中のWebページの構造や動作、通信などを検査したりデバッグするための機能。Google ChromeやMozilla Firefox、Microsoft Edgeなど主要ブラウザに組み込まれており、いずれもF12キーまたは右クリックメニューの「検証」から起動できる。

一般に、開発者ツールは複数のパネルで構成される。Chromeを例にとると、「要素」（Elements）パネルでは、ページを構成するHTMLのツリー構造をリアルタイムで確認・編集できる。CSSのスタイルも同画面で表示され、値を直接書き換えてデザインの変化を即座に確かめることができる。この変更はあくまで一時的なものであり、ページを再読み込みすれば元に戻る。

「コンソール」（Console）パネルは、ページ上で実行されたJavaScriptのエラーメッセージや警告が表示される。開発者がコード中に組み込んだ console.log（）関数で出力した値もここに流れるため、スクリプトの動作確認に頻繁に使われる。その場でJavaScriptのコードを直接入力・編集して実行することもできる。

「ネットワーク」（Network）パネルは、WebブラウザとWebサーバ間の通信をすべて記録する。HTMLファイル本体だけでなく、埋め込まれた画像やCSSファイル、ページ上から呼び出した外部のWeb APIの応答などについて、個々のリクエストの内容、ステータスコード、読み込み時間を一覧で把握できる。表示が遅いリソースや失敗したリクエストの特定に役立つ。

「ソース」（Sources）パネルでは、ページが読み込んだファイルの中身を参照できる。ブレークポイントを設定してJavaScriptの実行を任意の行で一時停止させながら変数の値を追うデバッグ作業が行える。「パフォーマンス」（Performance）や「メモリ」（Memory）といったパネルも備え、ページのレンダリング速度やメモリ使用量の分析にも対応する。