当メディアのリンクにはアフィリエイト広告が含まれています

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

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

もっと読む

12本の記事を表示する
関連キーワード
公開情報
更新日2015年04月10日
執筆者g.O.R.i
コメント(0件)

コメントは承認後に表示されます。良識のあるコメントを心がけ、攻撃的な表現や他人が傷つく発言は避けましょう。なお、コメント投稿時に「利用規約」に同意したとみなします。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

「Google Chrome」新着記事
トレンド検索