ブラウザー毎の開発者向けツールの起動方法について整理した結果をメモ。Safariだけ、機能を有効化する必要があります。
| ブラウザー | 利用ツール名 | 起動方法（複数あり） | 備考 |
|---|---|---|---|
| Chrome | デベロッパー ツール | ・メニュ「その他のツール > デベロッパー ツール」 ・右クリックメニュー「検証」 ・Ctrl + Shift + I キーを押下 |
|
| Firefox | 開発ツール | ・メニュー「開発ツール」 ・右クリックメニュー「要素を調査」 ・Ctrl + Shift + I キーを押下 |
|
| IE / Edge | F12 開発者ツール | ・メニュー「F12 開発者ツール」 ・F12キーを押下 |
|
| Safari | Web インスペクタ | ・メニュー「開発 > Web インスペクタを表示」 設定の「詳細」タブで「メニューバーに”開発”メニューを表示」のチェックが必要。 ・Ctrl + Alt + I キーを押下 |
設定の「詳細」タブで「メニューバーに”開発”メニューを表示」のチェックが必要。 |
それぞれのブラウザーで大まかにはできることは似通っていますが、細かな機能の作り込みや操作性が雲泥の差です。個人的な見解としては、優秀な順に Chrome > Firefox >>> IE/Edge >>>> Safari な感じです。Safari固有の問題が発生したときに、Safariで原因調査を強いられた時には泣きました。。