ブラウザーの「DevTools（開発者ツール）」とは

Google Chrome や Microsoft Edge で「DevTools（開発者ツール）」とは、現在、開いている Webページのソースの確認、検査、デバッグなどができるツールで「F12」キーを押すと画面右側に表示されます。

一般的にはサイトの作成や管理にたずさわる人（開発者）が活用するツールですが、Chrome や Edge の一般利用者も使用できます。

開発者でなくても HTML や CSS を多少でも知っていれば役立つことがあります。

「DevTools」を開く方法は以下の２つを覚えておけばいいでしょう。

ファンクションキー「F12」を押す
Webページ上で調べたい場所にカーソルを合わせ、右クリックで開いたメニューから Chrome なら「検証」、Edge なら「開発者ツールで調査する」を選択

これでブラウザー画面の右側に「DevTools」画面が現れ、左のページに対応するソースコードや各種情報が表示されます。

ちなみに、以下の方法でも開くことができます。

でも、基本は「F12」キーか右クリックメニューからでいいでしょう。

「DevTools」を閉じるときは画面右上にある「ｘ」マークをクリックするか、もう一度「F12」キーを押します。

逆に、たとえば「F11」キーで「全画面表示」にしようと間違って「F12」キーを押してしまい、使い慣れない「DevTools」が開いて慌てることもあるかもしれません。

そんなときは落ち着いて、もう一度「F12」キーを押せばいいのです。

Chrome と Edge のショートカットキーの違いを一覧表にまとめました。

記事の情報は公開時あるいは更新時のもので、最新情報はリンク先など情報元の公式ページでご確認ください。