中堅システムエンジニアの備忘ログ

20代後半SEによる、備忘を兼ねた技術的な記事メインのブログです。

【Webエンジニア向け】よくわかる「F12 開発者ツール」の使い方~DOM Explorer編~【MicrosoftEdge】

こんばんは。ねるおです。

 

今日はMicrosoftEdgeに搭載されている「F12 開発者ツール」の使い方を記録したいと思います。

駆け出しのWebエンジニア方向けの記事ですが、ベテランの方でも、「この機能、知らなかった!」なんてことがありました。

F12 開発者ツール?

Webサイトの作成、デバッグを強力にサポートしてくれるツールです。Edgeが起動されている状態でキーボードの「F12」を押すと、開発者ツールが起動します。

Edge以外の主要ブラウザ(FireFoxGoogleChrome)にも同様のツールが搭載されていますが、今回はEdgeの開発者ツールについて記載します。

いますぐ使える8つの機能

「F12 開発者ツール」には以下の便利な8つの機能があります。

 ・DOM Explorer

 ・コンソール

 ・デバッガー

 ・ネットワーク

 ・パフォーマンス

 ・メモリ

 ・エミュレーション

 ・試験的機能(これは・・・なんだろう?笑)

今回は特によく使うであろう、「DOM Explorer」「コンソール」「デバッガー」「エミュレーション」について詳細な使い方を解説します。

見た目の調整に便利な「DOM Explorer」

ブラウザがレンダリングしたWebページの構造を表示してくれます。表示された構造を編集して結果を確認することもできます。

 

こんな時に便利です。

・HTML要素に設定されている”属性”や”スタイル”を確認したい。

 →ソースコードを見返す必要ナシ!一瞬で確認できます。

・HTML要素のスタイルを微調整したい。

 →CSS編集して画面リロードして・・・とかやらなくていいです。一瞬で調整できます。

 

それでは実践してみます。

ユースケース:指定したHTML要素のスタイルを確認後、変更】

f:id:kojikoji1990:20170603184016p:plain

①「DOM Explorer」タブを選択します。

②現在表示中のWebページのDOMが表示されます。

 

 

f:id:kojikoji1990:20170603185533p:plain

③矢印アイコンをクリックします。

④HTML要素を選択します。(ここでは「こんにちは」と書かれたDIV要素)

⑤④で選択したHTML要素に設定されているスタイルが一覧できます。

 (ここでは何も設定されていないようです。)

 

f:id:kojikoji1990:20170603190148p:plain

⑥スタイルを変更します。(ここでは「背景色:青」「文字色:赤」「フォントサイズ:30px」を設定)

⑦変更結果が反映されます。 

まとめ

今回は「F12 開発者ツール」の中でもねるおがよく使う、「DOM Explorer」について使い方を解説しました。数年前に職場の先輩に教えてもらって「なんて便利な!」と感動したのを今でも覚えています。

「ちょっと横幅を広くしたいな。けど何pxにすればちょうどいいかな?」なんて時は

DOMExplorer上でスタイルの変更結果を随時確認しながらやると、捗ります。

(最終的に変更後のpx数が決定したらソースコードに反映するのをお忘れなく!)

 

 

 

ねるお。