Google Chromeの「デベロッパーツール(要素の検証)」画面を独立したウィンドウに切り替える方法

Google chrome inspector
Google Chromeには信じられないほど便利な「デベロッパーツール」がある。通常のPC表示だけではなく、最新のスマートフォンのディスプレイサイズに偽装し表示を確認できるなど、ウェブ制作者必見のデバッグツールなのだ。

比較的頻繁にgori.meのデザインをいじっている僕も活用しているが、昨日久しぶりにGoogle Chromeを再インストールした際にデバッグツールがGoogle Chromeと一体化してしまい、これまで利用していたように独立したウィンドウとして使用することができなかった。

あれこれ触っているうちにGoogle Chromeのデベロッパーツール(要素の検証)画面を独立したウィンドウに切り替える方法を発見したので、紹介する!

画面表示位置切り替えボタンを長押しで独立ウィンドウに切り替え

まずは「Command + Option + I」または右クリックで「要素の検証」をクリックすることによってデベロッパーツールを起動。

起動すると画面下または画面横にデベロッパーツールが表示される。下記スクリーンショットの赤枠で囲まれたボタンをクリックすることによって画面の右側もしくは画面の下側に移動することができる。
Google chrome inspector
Google chrome inspector
ただ、僕はデベロッパーツールを独立したウィンドウにしたいのだ。そのためには同じボタンを長押しすることによって以下のような選択肢が表示される。
Google chrome inspector 

これをクリックすると、以下の通り独立したウィンドウが表示される。
Google chrome inspector
複数のウィンドウを管理するのが面倒という人はブラウザ内でデベロッパーツールを表示した方が楽かもしれないが、個人的には画面の7割を通常のブラウザ、残りの3割をデベロッパーツールにしてデバッグ作業をするのが快適なのだ。

困っている人がいたらお試しあれ!

オススメ

gori.meの最新情報をチェック!!

  1. 精算不要の「Amazon Go」、登場!万引きにしか見えない最先端スーパー
  2. 「iOS 10.2 Beta 6 / Public Beta 6」、配信開始
  3. Twitter 、2016年の人気ツイートをまとめたランキング「2016年振り返りツイート」を公開!
  4. 【保存版】iPhoneのストレージ容量不足を劇的に解消する7つの方法
  5. 【保存版】Macの「その他」を削除し、ストレージ容量不足を解消する方法