D4 ブラウザーの活用と検索術 - 10 ブラウザーの便利な活用法 - 25 Webページのデバッグに利用
30 中級
10 Webページをデバッグする Edge
WebページのデバッグにEdgeを利用する方法
Edgeには、「開発者ツール」という機能があり、Webページのデバッグに利用することができます。
Web上の要素をクリックすると、その要素を表すHTMLのコードと、適用されているCSSのコードが表示され、正しくコーディングされているかを確認することができます。
また、その場で、CSSのコードを一時的に変更して、Webページの表示が、どのように変わるのかを、チェックすることなどもできます。
非常に多くの機能がありますが、基本的な機能の部分を説明します。
【１．開発者ツールの画面】
開発者ツールを起動すると、下図のように、Edgeの画面が3分割されて、①実際のWebページの表示と、②HTMLのコードと、③CSSのコードとを同時に確認することができます。
【２．開発者ツールの起動方法】
デバッグしたいWebページをEdgeで開き、開発者ツールを起動します。
起動方法には、3つのやり方があります。いずれかの方法で起動します。
（１）ファンクションキーで起動する
Webページを開いている状態で、ファンクションキーの、①「F12」を押して起動します。
