HTML デベロッパーツールの使い方

06デベロッパーツールの使い方

ここでは開発中のデバッグやちょっとした確認のときによく使われるデベロッパーツールの使い方について説明します。

6-1 デベロッパーツールについて

デベロッパーツールとは、Webブラウザに搭載されている、Webページの開発やデバッグを行うためのツールのことを指します。

デベロッパーツールを使用すると、WebページのHTMLやCSSを確認したり、JavaScriptのコンソールを開いたりすることができます。

デバッグとは？

プログラムやシステムに潜む不具合やバグを発見し、修正することを指します。デバッグを行うことで、 プログラムやシステムが正しく動作するようになります。

6-2 デベロッパーツールの使い方

①開き方

【開き方その１】

右クリックで検証をクリック

【開き方その２】

ctrl + shift + j　を押す

【開き方その３】

F12　を押す

②使い方

下の画像の赤丸をクリックしWebページの適当な要素にカーソルを持って行ってください。

実際にHTMLやこの後出てくるCSSを編集することができます。

※変更は自分のパソコンにしか反映されません。さらに画面を読み込むともとに戻ります。

Lesson3で学習するCSSや送受信したデータ、URLなど様々な情報をデベロッパーツールで確認することができます。