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割をデベロッパーツールにしてデバッグ作業をするのが快適なのだ。

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

もっと読むGoogle Chromeまとめ
FOLLOW / 最新情報を購読