ブラウザ・デベロッパーツール使用法のまとめ[Chrome/Safari/Edge/Firefox]

HTML+CSS

この記事は、各ブラウザ毎のデベロッパーツール(開発者ツール)の使用法について、役立ちそうなサイトを選定して多少の解説を入れて整理した、まとめ記事です。

日本語の公式マニュアルもあり、丁寧に解説してくれているサイトが沢山ある以上、わざわざ改めて本記事で同様の内容を書く必要もないので、後々また見る用に、というもの。

なお、対象は以下のブラウザ。

  • 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)
入門的な解説。

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.

タイトルとURLをコピーしました