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

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

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

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

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

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

起動すると画面下または画面横にデベロッパーツールが表示される。下記スクリーンショットの赤枠で囲まれたボタンをクリックすることによって画面の右側もしくは画面の下側に移動することができる。


ただ、僕はデベロッパーツールを独立したウィンドウにしたいのだ。そのためには同じボタンを長押しすることによって以下のような選択肢が表示される。
　

これをクリックすると、以下の通り独立したウィンドウが表示される。

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

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

• 【関連】ブラウジングを快適に！Google ChromeにインストールしているExtension（拡張機能）17選
• 【関連】Google Chromeなら「1Password」をキーボードショートカットで呼び出してIDやパスワードを爆速入力できる！
• 【関連】ページ内の全角英数字を全て半角に自動変換！Chrome拡張機能「goodbye “Zenkaku” – さよなら全角英数」が神すぎる
• 【関連】Google Chromeで応答しない特定のタブを強制終了する方法
• 【関連】画像付きツイートが簡単にできるアプリ「Twitshot」のChrome拡張機能も便利！