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

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

wd211006-01.png

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

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

 

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

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

wd211006-03.png

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

wd211006-02.png

 

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

  •  「設定」メニュー >「その他のツール」>「デベロッパーツール」
  • ショートカットキー「Ctrl + Shift + I」

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

 

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

wd211006-04.png

 

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

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

 

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

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

スポンサーリンク

ご意見&コメント

パソコン用語解説」をご利用いただき、ありがとうございます。

「参考になった」「ちょっと違うかも?」というときは TwitterFacebookページを使ってご感想やコメントをいただけると嬉しいです!励みにもなりますし、必要に応じて情報の追加や修正もしてまいります。

 

同じカテゴリー「ウェブブラウザー」の用語解説

 

同じカテゴリー「ウェブブラウザー」のQ&A

関連した記事を検索

パソコントラブルQ&A」「パソコン用語解説」では関連Q&Aや用語解説を豊富に掲載中です。検索してみてください!

五十音順」インデックス

別サイトで「パソコン用語集」も公開しています。

過去の用語解説 (762 件)

編集長のプロフィール

編集長

:パソコン生活応援アドバイザー。「なにしろパソコン.com」サイト運営、メルマガ編集、セミナー講師からコラム・書籍執筆まで実績豊富!

「パソコン用語解説」では厳密さよりも、分かりやすさ、覚えやすさを優先しています。そのため強引なたとえを使ったり、編集長独自の見解も交えておりますのでご了承ください。解説の中でパソコンの設定や操作法を紹介していますが、お使いのバージョンなど環境によって違う場合があります。

また、本サイトを参考にしたパソコン設定、サイト閲覧、紹介したソフトウエアや機器の購入&使用、そしてトラブル対応やインターネット活用は『利用者の責任』でお願いします(免責事項)。