Google Chrome や Microsoft Edge で「DevTools(開発者ツール)」とは、現在、開いている Webページのソースの確認、検査、デバッグなどができるツールで「F12」キーを押すと画面右側に表示されます。
一般的にはサイトの作成や管理にたずさわる人(開発者)が活用するツールですが、Chrome や Edge の一般利用者も使用できます。
開発者でなくても HTML や CSS を多少でも知っていれば役立つことがあります。
「DevTools」を開く方法は以下の2つを覚えておけばいいでしょう。
- ファンクションキー「F12」を押す
- Webページ上で調べたい場所にカーソルを合わせ、右クリックで開いたメニューから Chrome なら「検証」、Edge なら「開発者ツールで調査する」を選択
これでブラウザー画面の右側に「DevTools」画面が現れ、左のページに対応するソースコードや各種情報が表示されます。
ちなみに、以下の方法でも開くことができます。
- 「設定」メニュー >「その他のツール」>「デベロッパーツール」
- ショートカットキー「Ctrl + Shift + I」
でも、基本は「F12」キーか右クリックメニューからでいいでしょう。
「DevTools」を閉じるときは画面右上にある「x」マークをクリックするか、もう一度「F12」キーを押します。
逆に、たとえば「F11」キーで「全画面表示」にしようと間違って「F12」キーを押してしまい、使い慣れない「DevTools」が開いて慌てることもあるかもしれません。
そんなときは落ち着いて、もう一度「F12」キーを押せばいいのです。
Chrome と Edge のショートカットキーの違いを一覧表にまとめました。
記事の情報は公開時あるいは更新時のもので、最新情報はリンク先など情報元の公式ページでご確認ください。