VS Code をブラウザ起動でうまく動作させるのは、特にデバッグ中やエディタ内からウェブアプリのライブ実行を確認しようとしているときには、なかなか大変です。「実行」や「デバッグ」を何度クリックしても、ブラウザウィンドウが開かないこともあります。原因は必ずしも明らかではありません。launch.json の設定ミス、拡張機能の競合、あるいは権限に関する奇妙なバグなどが考えられます。そこで、少しでもお困りの事態を未然に防ぐための実用的なテクニックをいくつかご紹介します。目標は、F5 キーを押すかデバッグボタンをもう一度クリックした際にブラウザが開くようにすることです。
これらの修正により、ローカルサーバーやWebビルドでブラウザを自動的に起動するようになるはずです。これは、テストを高速化する際に非常に役立ちます。これらの修正は必ずしも効果があるわけではありませんが、いくつかの環境では、特にVS Codeが適切なブラウザをなかなか開かない場合や、全く起動しない場合に、問題が解消されることがあります。もしお困りの場合は、これらの修正を試してみてください。ちょっとした設定変更だけで解決できることもあります。
VS Code でブラウザの起動の問題を修正する方法
修正1 – 管理者権限なしでVS Codeを実行する
これはかなり多くの問題を引き起こします。VS Code が管理者権限で実行されている場合、特にブラウザが標準ユーザーモードまたはサンドボックス化されている場合、ブラウザを開いたりアタッチしたりする際に問題が発生する可能性があります。そのため、管理者権限ではなく通常モードで実行すると、同期が改善される可能性があります。Windows は、アプリケーションが両方のモードで動作することを必ずしも許容しないからです。
- スタートメニューでVisual Studio Codeを検索します。右クリックして「ファイルの場所を開く」を選択します。
- 次に、 VS Code ショートカットを右クリックし、もう一度[ファイルの場所を開く]を選択して、実際のインストール ディレクトリに移動します。
- Code.exeを右クリックし、「プロパティ」をクリックします。
- 「互換性」タブに移動し、「管理者としてこのプログラムを実行する」のチェックを外してください 。当然ながら、Windowsは必要以上に難しい設定をしています。
- 「OK」をクリックしてVS Codeを完全に再起動してください。ビルドをもう一度実行してみてください。設定によっては、これが大きな違いを生む場合があります。
修正2 – 適切なブラウザ設定のためにlaunch.jsonを確認して調整する
これで多くの悩みが解消されます。launch.json ファイルは、VS Code にブラウザの起動方法と渡すパラメータを指定します。設定が間違っていると、VS Code は何も開かなかったり、全く開かなかったりする可能性があります。まず、対象ブラウザに適した「type」を使用していることを確認してください。Edge の場合は「msedge」、Chrome の場合は「pwa-chrome」または PWA バージョンをターゲットとする場合は「pwa-msedge」を使用します。
- VS Code でプロジェクト フォルダーを開きます。
- サイドバーのデバッグアイコンをクリックし、次に⚙️アイコンをクリックしてlaunch.jsonを開きます。存在しない場合は、ルートまたは.vscodeフォルダ内に作成してください。
- 起動構成が次のようになっていることを確認し、必要に応じて「タイプ」を調整します。
{ "version": "0.2.0", "configurations": [ { "type": "msedge", // or "pwa-chrome" for Chrome "request": "launch", "name": "Launch my app", "url": "http://localhost:3000" } ] } // For Chrome "type": "pwa-chrome" // For Edge "type": "pwa-msedge" { "type": "msedge", // or "pwa-chrome" "request": "launch", "name": "Launch Edge", "url": "http://localhost:8080", "runtimeExecutable": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe" } 修正3 – VS Codeが最新であることを確認する
従来のアップデートチェックはセキュリティバグだけをチェックするものではありません。VSCode のアップデートでは、デバッグやブラウザの起動に関連するバグも修正されます。VSCode が数バージョン古い場合は、アップデートすることをお勧めします。
- VS Code を起動し、[ヘルプ] > [更新プログラムの確認] をクリックします。
- 最新バージョンをダウンロードした後、再起動を求められます。再起動してプロジェクトを再読み込みし、もう一度試してみてください。アップデートするだけで、奇妙な問題が解決することもあります。
修正4 – ウイルス対策ソフト/ファイアウォールを一時的に無効にする
念のためお知らせしますが、セキュリティソフトウェアによっては、VS Code によるブラウザの起動やデバッグインターフェースのアタッチがブロックされることがあります。一時的に無効にしても問題ない場合は、試してみてください。
- Windows セキュリティを開き、ウイルスと脅威の防止に進みます。
- [設定の管理]をクリックします。
- リアルタイム保護とクラウド配信保護などの関連機能をオフにします。
- VS Code から Web アプリの起動を再試行します。ブラウザー ウィンドウが起動する可能性があります。
もちろん、テスト後はセキュリティ関連の機能を再度有効にしてください。永久にオフのままにしないでください。
修正5 – VS Codeの組み込みデバッガーを使用し、外部ツールを検討する
VS Codeの優れた点は、独自のデバッガーを備えていることです。外部ブラウザプラグインを必要とせずに、JS、Node.js、その他のデバッグ対象を処理できます。ブラウザの設定に問題があると思われる場合は、Chromeデバッガー（いずれにしても非推奨です）などの外部デバッガーではなく、VS Codeの組み込みデバッガーでデバッグしてみてください。
Chrome でデバッグしたい場合は、ブラウザから直接 Chrome DevTools を起動したり、すでに実行中の Chrome インスタンスに VS Code のデバッガーをアタッチしたりすることもできますが、これはまた別の話です。
修正6 – VS Codeを再インストールする
上記のいずれも機能しない場合は、クリーンな再インストールを行うと、セットアップで発生しているランダムな不具合が解消されることがあります。
- 検索ボックスに「VS Code」と入力し、右クリックして「アンインストール」を選択します。
- 公式サイトから最新のインストーラーをダウンロードしてください。
- 再インストールしてプロジェクトを再読み込みし、ブラウザがポップアップ表示されるか確認してください。私の環境では数台のマシンで動作しました。皆さんのマシンでも動作することを願っています。