Google Chrome起動時にデベロッパーツールを自動表示する方法｜F12不要で開く設定手順

Google ChromeでWeb制作やデバッグ作業を行っていると、起動するたびにF12キーを押してデベロッパーツールを開く操作が手間に感じることがあります。実はChromeには、起動時のオプション指定やショートカット設定を利用して、デベロッパーツールを自動的に表示させる方法があります。

この記事では、Chrome起動直後にデベロッパーツールを開くための具体的な設定方法や、うまく動作しない場合の確認ポイントについて解説します。

Chrome起動時にデベロッパーツールを開く基本的な方法

Chromeには起動オプション（コマンドライン引数）が用意されており、ショートカットの設定に追加することで、通常とは異なる動作でブラウザーを起動できます。

デベロッパーツールを自動表示したい場合は、Chromeのショートカットに起動オプションを追加する方法が一般的です。

例えばWindowsの場合、以下の手順で設定できます。

Chromeのショートカット設定では、通常以下のようなパスが指定されています。

“C:\Program Files\Google\Chrome\Application\chrome.exe”

この末尾に半角スペースを入れて、デベロッパーツール関連の起動オプションを追加します。

設定例としては以下のようになります。

“C:\Program Files\Google\Chrome\Application\chrome.exe” –auto-open-devtools-for-tabs

「–auto-open-devtools-for-tabs」は、Chrome起動時に開いたタブでデベロッパーツールを自動的に表示するためのオプションです。

設定後、このショートカットからChromeを起動すると、F12キーを押さなくてもデベロッパーツールが表示されるようになります。

起動オプションを追加してもデベロッパーツールが開かない場合は、いくつか確認すべきポイントがあります。

特に注意したいのが引用符の位置です。chrome.exeのパスを囲む「”」の内側にオプションを書いてしまうと正常に認識されません。

正しい例は「chrome.exe” –auto-open-devtools-for-tabs」のように、パスの外側へオプションを追加する形になります。

普段利用しているChromeとは別に、開発用のChrome環境を作成してデベロッパーツールを常時表示する方法もあります。

例えば、Web制作専用のショートカットを作成し、以下のようなオプションを追加すると作業用ブラウザーとして利用できます。

“C:\Program Files\Google\Chrome\Application\chrome.exe” –auto-open-devtools-for-tabs –user-data-dir=”C:\ChromeDevProfile”

この方法では通常利用しているChromeの設定や拡張機能に影響を与えず、開発専用環境として分けることができます。

Macの場合は、Windowsのショートカット設定とは異なり、ターミナルから起動オプションを指定します。

例えば以下のようなコマンドでChromeを起動できます。

open -a “Google Chrome” –args –auto-open-devtools-for-tabs

毎回入力するのが面倒な場合は、Automatorやシェルスクリプトを利用して専用の起動アイコンを作成すると便利です。

設定を解除したい場合は、追加した「–auto-open-devtools-for-tabs」の部分を削除するだけで元の状態に戻せます。

開発作業が終わった後も設定を残していると、通常のWeb閲覧時にもデベロッパーツールが開いてしまうため、用途に応じてショートカットを分けておくと便利です。

例えば「Chrome通常起動用」と「開発作業用」の2種類のショートカットを作成すると、状況に合わせて簡単に切り替えできます。

Google Chromeを起動した瞬間にデベロッパーツールを表示したい場合は、ショートカットへ「–auto-open-devtools-for-tabs」の起動オプションを追加する方法が便利です。

この設定を利用すれば、毎回F12キーを押す必要がなくなり、Web制作や検証作業を効率化できます。通常利用と開発用途を分けたい場合は、専用ショートカットや専用プロファイルを作成するとさらに快適に利用できます。