Chromeのデベロッパーツールが表示されない場合の対処法!

Chromeのデベロッパーツールが表示されない場合の対処法を解説していきます。順番に可能性を確かめていき、原因を特定していきましょう。

コンテンツ [表示]

  1. 1Chromeのデベロッパーツールが表示されない問題
  2. 2Chromeのデベロッパーツールが表示されない場合の対処法
  3. 2.1マルチディスプレイを使っていて、別の場所でデベロッパーツールが開いている
  4. 2.2シークレットウィンドウでデベロッパーツールを開いてみる
  5. 2.3再インストールしてみる

Chromeのデベロッパーツールが表示されない問題

Chromeのデベロッパーツール(開発者ツール)はHTMLやCSS、JSのデバッグ・検証ができるツールでWEBエンジニアには必須のツールとなっています。

デベロッパーツールの起動の仕方についてはぜひ下記の記事を参考にして下さい。

Chromeでデベロッパーツールをショートカットで開く方法!のイメージ
Chromeでデベロッパーツールをショートカットで開く方法!
Chromeでデベロッパーツールをショートカットキーで開く方法を紹介します。先にショートカットのやり方の結論を伝え、また検証から開く方法やメニューから開く方法もあわせて解説します。

ちなみにショートカットの開き方は下記となります。

Chromeのデベロッパーツールをショートカットで開く

[WindowsのChrome]
Ctrl + Shift + I
または
F12

[MacのChrome]
Command + Option + I

一方でこのデベロッパーツールが表示されないという方は次の章をぜひ参考にしてみましょう。

Chromeのデベロッパーツールが表示されない場合の対処法

マルチディスプレイを使っていて、別の場所でデベロッパーツールが開いている

マルチディスプレイを使っていて、デベロッパーツールが別のウィンドウで開くようになっている場合などで、他のディスプレイなど別の場所で開いているが見つけられない場合です。

一度マルチディスプレイを解除して、原因がマルチディスプレイかどうかを確認して対処しましょう。

シークレットウィンドウでデベロッパーツールを開いてみる

Chromeの拡張機能が悪さをして、デベロッパーツールが開いていない可能性もあります。一度シークレットウィンドウにして拡張機能を無効にした状態でデベロッパーツールを起動してみましょう。

シークレットウィンドウの開き方
Chromeの右上のメニューをクリックし「新しいシークレットウィンドウ」をクリックします。シークレットウィンドウが開いたら後はデベロッパーツールの開き方は同じです。

シークレットウィンドウでデベロッパーツールが無事に表示されたら、拡張機能の説が有力です。インストールしている拡張機能(とりわけ最近入れたもの)を外していって、無事にデベロッパーツールが起動するかトライしてみましょう。

再インストールしてみる

これまで紹介してきた内容でだめだった場合は、Chromeを再インストールして状況が改善するか確かめてみましょう。

GeekHive採用サイト