【解説】Chrome 開発者ツールを別ウィンドウで開く方法(表示位置変更も)

こんにちは、現役エンジニアの inno_tech です。

Google Chromeの開発者ツール(デベロッパー ツール) で 別ウィンドウで表示する方法、位置を変更する方法 をお探しでしょうか？

本記事を見れば、Chrome 開発者ツールを別ウィンドウで開く方法や、表示位置を変更できるようになります。

本記事は、Windows版 Google Chromeで動作確認しています。

Chrome開発者ツールの表示位置を変更

まず、Google Chromeを起動し、開発者ツールを開きます。(ショートカット Ctrl + Shift + J)

開発者ツールの右上の三点リーダーをクリックします。すると「Dock side」という項目があるので、この中から好みの表示方法を選択します。

ショートカットで切り替えも可能

Chrome開発者ツールを起動した状態で、ショートカット Ctrl + Shift + Dを押すと、直近2つの表示方法を交互に切り替えできます。

例えば左側と下側が直近ならば、 左 ⇒ 下 ⇒ 左 ⇒ 下 ・・・というように切り替わります。

補足｜別ウィンドウで開いた場合に元に戻す

別ウィンドウで開いた状態を元に戻したい場合、Chrome開発者ツールの右上の3点リーダーをクリックし、Dock sideの中から好みのレイアウトを選択します。(右側の3つ分がウィンドウ一体化のレイアウト)

すると別ウィンドウに分離する前のウィンドウに開発者ツールが戻ります。

まとめ

2021年の全国の本屋さんで最も売れた年間ベストセラー本が気になる方はこちら。

参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!