この記事は、各ブラウザ毎のデベロッパーツール（開発者ツール）の使用法について、役立ちそうなサイトを選定して多少の解説を入れて整理した、まとめ記事です。
日本語の公式マニュアルもあり、丁寧に解説してくれているサイトが沢山ある以上、わざわざ改めて本記事で同様の内容を書く必要もないので、後々また見る用に、というもの。
なお、対象は以下のブラウザ。
- Chrome
- Safari
- Edge
- Firefox
私はChromeをメインに使用しますので（シェアも一番高いし）、Chromeの情報が多くなるかもしれません。また、最後に私が実際読んで役に立った書籍も紹介します。
一応、最初に短い概説を書きます。
そもそも、デベロッパーツール（開発者ツール）とは？
画面で言えば、Chromeだと、メニューの「その他のツール」→「デベロッパーツール」で出てくる↓の右の部分のこと。
Webサイト・アプリ作成の際には欠かせない機能で、HTML要素の解析、JavaScriptのデバッグ・実行、各要素の読込パフォーマンスの計測、メモリの管理…など、他にもあります。Webサイトかアプリ制作をするなら、JavaScriptのデバッグと読込パフォーマンスの計測機能は使用するでしょう。
画面の出し方
Windowsはどのブラウザでも共通で、「Shift」＋「Ctrl」＋「i」で出現させることが可能。
一応、画面の場所は以下の通り。
Chrome
「メニュー」→「その他のツール」→「デベロッパーツール」
Safari
まず、「環境設定」→「詳細」の「メニューバーに”開発”メニューを表示」にチェック。
すると、メニューに「開発」が出る（そこから選ぶ）。
Edge
「メニュー」→「その他のツール」→「開発者ツール」
Firefox
「メニュー」 → 「Web開発」→「開発ツールを表示」
Chrome
・Chrome DevTools
Google公式ドキュメント。日本語（機械翻訳かもしれない）だが、一部（Securityなど）は英語のまま。ただ、ここで全ての機能が説明されているっぽい。
・progateによる「検証ツール（デベロッパーモード）の使い方
プログラミング学習サイトで有名なprogateによるもの
・Web制作が3倍速くなるChromeデベロッパーツールの使い方（ASCII）
ASCIIのサイトだが、2015年なので内容は古いかもしれない。
・Chrome デベロッパーツールの使い方まとめ
Qiitaの記事。簡略にまとめられている。
そもそも、公式マニュアルがあるので、わざわざ他のサイトを見に行かなくてもいいかもしれない。
Safari
公式サイトを探したものの、マニュアルはなさげ。Web Development Toolsなる概要程度のページはあるが、マニュアルではない。Safari開発者用ヘルプのページが一応あるが何もない…。どういうこと？
Chromeである程度理解できれば応用が利くかもしれないので、まぁいいかれども…。
実物の画面を見て理解しろ、ということなのだろうか。
Edge
・Microsoft Edge (Chromium) 開発者ツール
Microsoft公式によるサイト。MSならマニュアルあるだろう…と思ったが、やはり、あった。読みにくいレイアウトは昔からだが、無いより良い。機能については全般的に解説されている模様。
旧バージョンEdgeのマニュアルは、こちら。
・開発者ツール 機能や特徴（パソコン工房）
なぜかパソコン工房による解説。端的な内容。
補足として、2020年1月からEdgeはレンダリングエンジンがChromiumベースに刷新されている。
あと、Linux版Edgeも登場する予定らしく、.NET CoreやVisual Studio Codeと同様に、クロスプラットフォーム対応が進んでいるみたい。
→『Linux版Mictosoft Edgeブラウザー、10月にプレビュー版が公開へ』(Engadget, 2020/9/23)
Firefox
・開発ツール（MDN web docs）
Mozilla公式のマニュアル。
・ブラウザー開発者ツールとは？（MDN web docs）
公式だが、FAQの1つ。JavaScript Consoleについては翻訳未完のよう。
全般
・Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本
en JapanのエンジニアHUBのページ(2017)。ChromeとSafariっぽいが、全般的、基本的な解説。
・初心者がブラウザーでデバッグするための基礎知識
@ITの。2015年と古めではあるけど。
React DevTools
ブラウザの開発者ツールというより、JavaScriptライブラリであるReactのDevToolsですが、一応。React開発には当然必須。
・react-devtools (Github)
英語ですが、操作説明はここのFAQにあるようです。
Chrome、Firefox、Edgeのアドオンとして提供されているようです（各アドオンのリンクは省略）。スタンドアロン版もある。
・React Developer Toolsのすすめ （Qiita）
入門的な解説。
Redux Devtools
Chrome用拡張機能です。React + React Reduxのアプリを作成する際に使用しました。Storeに値が入っているかとか、Reduxのデバッグに便利です。テストコードを仕込む必要がありますが。アプリが複雑化するとReduxの使用機会は増えそうです。
Vue.js DevTools
・vue-devtools (Github)
Chrome、Firefox、スタンドアロン版がある（各アドオンのリンクは割愛）。
・VS Code によるデバッグ
ブラウザのアドオンではないですが、一応。本家サイトにある、Visual Studio Codeでデバッグする方法の解説。内容はしっかり確認してませんが。
・【Vue.js】Vuejsをchromeブラウザでデバッグする方法（Qiita）
簡単な入門的解説ですが。
書籍
本ではChromeが使用されていますが、デベロッパーツールの各機能をどう使用して、数値をどのように見ればよいのか、詳しく解説されている。まずは、この書籍に目を通すと、ツールの使い方だけでなくWebサイト表示の仕組みまでが詳しく分かると思う。
そもそもデベロッパーツールはその用途でも使用するものだと思うので。
・久保田光則 著『Webフロントエンド ハイパフォーマンス チューニング』技術評論社、2017
以上です。
Top Image is by Joseph Mucira from Pixabay.
