Webサイトを作っているときに、target="_blank" のリンクや window.open() で別タブに開いたページでもスマートフォン表示を確認したい場合など、DevTools を最初から開いておきたいことがあります。
新しく開いたタブでも最初から DevTools が開いている状態にする方法を2つ紹介します。
📌 確認した Chrome バージョン: 156.0.8078.48
方法1: DevTools の設定「Auto-open DevTools for popups」を有効にする
- F12 キー（macOS は
⌘ + Option + I）、または右クリック →「検証」で DevTools を開きます - DevTools 右上の歯車アイコン（Settings / 設定）をクリックします
- Preferences → Global にある「Auto-open DevTools for popups」にチェックを入れます
効果
DevTools を開いているタブから開いたタブ・ウィンドウでは、最初から DevTools が開いた状態でページが読み込まれます。
効くのは「DevTools を開いているタブから開いたタブ」だけです。DevTools を閉じたタブから開いた場合や、アドレスバーから新規タブを開いた場合は対象外です。
方法2: 起動オプション --auto-open-devtools-for-tabs を付けて Chrome を起動する
方法1と違い、DevTools を開いていないタブやアドレスバーから開いた新規タブも含めて、すべてのタブで DevTools が自動で開きます。
macOS
Chrome を完全に終了してから（⌘ + Q）、ターミナルで次を実行します。
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
Windows（コマンドプロンプト）
Chrome を完全に終了してから、コマンドプロンプトで次を実行します。
start chrome --auto-open-devtools-for-tabs
Chrome がすでに起動していると、オプションは反映されません（既存のプロセスにタブが追加されるだけです）。必ず Chrome を終了してから起動してください。
Windows では、ウィンドウを全部閉じても Chrome がバックグラウンドで動き続けていることがあります。その場合は、タスクトレイの Chrome アイコンを右クリックして「終了」を選んでください。
元に戻すには
Chrome を完全に終了してから、普通に起動し直します。
便利な使い方: 別プロファイルで起動する
--user-data-dir で別のプロファイルを指定すると、既存の Chrome とは別のプロセスとして起動します。普段使いの Chrome を終了しなくても使えて、使い終わったらウィンドウを閉じるだけで元に戻るので手軽です。
※ 別プロファイルでは、ログイン状態や拡張機能は引き継がれません。
macOS
open -na "Google Chrome" --args --auto-open-devtools-for-tabs --user-data-dir=/tmp/chrome-debug
-n は、すでに起動している Chrome とは別に、新しいインスタンスを起動するオプションです。
Windows（コマンドプロンプト）
start chrome --auto-open-devtools-for-tabs --user-data-dir=%TEMP%\chrome-debug
まとめ
普段の開発なら、設定にチェックを入れるだけの方法1で十分です。
すべてのタブで DevTools を開きたいときは、別プロファイルで起動する方法が便利でした。普段の Chrome を終了したり起動し直したりせずに使えます。