Webプログラミングでは、複数のブラウザで動作や表示を確認する必要があります。
ブラウザの機能である開発者ツール（Developer Tool）の使い方に慣れておくことで、表示のズレや、プログラムのバグなどの原因を見つける際に、大変心強い味方になります。
本記事では、各種ブラウザでの開発者ツール（Developer Tool）の開き方を公開し、Google ChromeとEdgeについてはツール内の各タブについても簡単に解説しています。
目次
ほとんどのブラウザで有効な開発者ツールの開き方
サイト上の調べたい要素の上（任意の場所でもＯＫ）で、右クリックします。
表示されたメニューから、以下のメニューを選択します。
- Google Chrome 👉 「検証」
- Microsoft Edge 👉 「開発者ツールで調査する」
- Firefox 👉 「要素を調査」
- Safari 👉 「Webインスペクタを表示」
- Safariのみ別途設定が必要
参考：Safariの設定
『環境設定』画面にある『詳細』タブを選択し、ウィンドウの下部にある『メニューバーに”開発”メニューを表示』にチェックを入れてください。
Google Chrome／Microsoft Edge
※ 画像は Google Chrome ですが、Microsoft Edge でも同様の手順、操作です。
1. ブラウザの右上にある三点メニュー（緑枠で囲まれている箇所）をクリックします。
2. 「その他のツール」をクリックします。
3. 「デベロッパー ツール」を選択します。（Microsoft Edgeの場合は「開発者ツール」）
4. デベロッパーツールが開いた状態
各タブの説明
「要素」タブ
「要素」タブは、HTMLの要素を、CSSのスタイルと併せて詳細に確認することができます。
レイアウトのズレやデザインが想定と異なる場合の原因を迅速に発見するのに役立ちます。
「コンソール」タブ
JavaScriptを使用した開発の場合、このタブが最も使用頻度が高くなると思います。
「コンソール」タブには、プログラムでのエラー原因がメッセージとして表示されます。
エラーが発生した瞬間に感知できるため、ウェブ開発中はデベロッパーツールを開きっぱなしで操作しています。
「ソース」タブ
ブラウザ上で、ソースコードを確認できます。
コードの確認だけでなく、プログラムの構文エラーなどが赤い×印や赤下線で表示されるため、プログラムの構文エラーなどの場合は迅速な原因解決に繋がります。
最後に
繰り返しになり恐縮ですが、ブラウザで動作・表示の確認をする際にはデベロッパーツールは開きっぱなしを強く推奨します。
本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。
最後までお読みいただき、ありがとうございました。
コメント