DevTools (開発ツール)

対象ブラウザ

• Chrome (Chromium basedなら何でも)
• Firefox

DevTools (開発ツール)とは？

DevToolsとは、ブラウザの開発者向けツールのこと。これをうまく使うことで、開発速度を向上させたり、Webサイトのデバッグがしやすくしたりできる。

使い方

F12キーまたはCtrl + Shift + Iで開く。(Webページを右クリックして「検証」や「調査」でも開ける)
押してみよう！

Chrome

Firefox

こんな感じの画面が出てくるはず。

ここからはタブごとに便利な機能を紹介する、

要素 / インスペクター タブ

現在見ているページのHTML要素を確認できる。また、HTML、CSSの編集もできる。

特定要素へのフォーカス

要素を右クリックして「要素を検証」を選択すると、その要素がインスペクターに表示される。
または、インスペクターの左上にあるカーソルアイコンをクリックして、要素を選択することもできる。

試しに下のHello, World!の要素を「検証」してみよう
↓

id="flag{h31lo_1nspec70r!}"が見れればOK。

また、文字を変更することもできる。
インスペクターの変更したい文字の部分をダブルクリックすると編集できる。

関連

Developer Tools (開発者ツール) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

開発者ツール（"DevTools" と略されます）は開発者がソフトウェアを作成、テスト、デバッグするのを助けるプログラムです。

developer.mozilla.org