Google chromeの検証ツールについてまとめ

はじめに

みなさんは検証ツールを使っていらっしゃるでしょうか？
検証ツールはウェブページの要素を詳しく調べたりデバッグを行う際にとても優秀な機能で、主要なブラウザのほとんどに実装されています。
今回は自分が開発業務で使用してきた観点から、Google chrome搭載の検証ツールの見方と使い方を詳しくまとめていきます。
HPの知識が必要になった非IT系の方や初学者の方にも理解しやすいよう専門用語をなるべく省いて記述していきますので、気負わず読み進めていただければ幸いです。

開発者用ツールとは？

ショートカットのF12キーを押したときにウィンドウの右側に表示されるものを、検証ツールを言います。
Webサイトのパフォーマンスを向上させるための機能が搭載されており、HTML、CSS、JavaScriptなどのページを構成する要素の分析やデバッグを行う際にとても役立ちます。
ちなみにDevツールや開発者ツールとも呼ばれるので開発現場では注意が必要です。人によってツールの呼び方が違うのはエンジニアあるあるですよね。
ブラウザごとに機能は微妙に違いますが、ひとつのブラウザで使い方を覚えれば他の検証ツールも充分動かせます。

検証ツールの使い方

検証ツールはF12キー、または右クリックから[検証]で開くことができます。
開いた際デフォルトで画面右側にウィンドウが表示されますが、変更することも可能です。

要素

初めから表示されているのは[要素(element)]機能です。
現在開いているページを構成しているHTMLが上部に表示され、そのHTMLに対応するstyleが下部に表示されます。

検証ツールウィンドウ左上の「ページ内の要素を選択して検査」というカーソルマークをクリック後ページの好きな個所をクリックすると選択した箇所のHTMLにフォーカスされて要素の情報を見ることができます。
これを使えば、他のページの記述の要素を参考にしてＨＰを作成したりすることができて学習効率が大きく向上するかと思います。

いかがだったでしょうか。次回は他の機能について見ていきますので、興味がございましたら是非読んでみてください！