Visual Studio CodeのJavascriptデバッグがブレークポイントで止まらない時の確認箇所

2021年12月12日

Javascirpt開発をVisual Studio Code（以下VSCode）と連携してデバッグする際にハマりやすいポイントが、ブレークポイントで処理が止まらないという現象だと思います。

Javascriptの処理がVSCodeで設定したブレークポイントで止まらなかった時の主な確認ポイントを挙げていこうと思います。

1. 確認箇所

確認箇所

Chromeのデバッグポート

VSCodeとChromeを連携してデバッグするには、Chromeの起動オプションに–remote-debugging-port=9222とデバッグポートを指定して起動する必要があると思いますが、意外と気づかないのが以下となります。

Chromeのアップデートによる再起動後に自動起動するChromeをそのまま使用してデバッグしようとしている。
普段はデバッグポートオプション付きのショートカットから起動しているが、たまたまメーラー等のリンクをクリックして起動したChromeを使用してデバッグしようとしている。

上記のような場合、デバッグポートの指定がされていない状態でChromeが起動していますので、VSCode側からChromeへデバッグ接続ができず、結果としてブレークポイントで止まりません。

Chromeにデバッグ接続できていればVSCodeのデバッグ画面のコールスタックに表示ページのタイトルが表示されているはずです。（※次の対象URLが正しく設定されている場合）

デバッグの対象URL設定

VSCodeのデバッグ設定で対象ページのurlを設定すると思いますが、意外と気づきにくいのがワイルドカード設定が必要な場合です。

例えばVSCodeのurl設定が“url": “https://www.your-debug-domain.co.jp/",の時、ブラウザでhttps://www.your-debug-domain.co.jp/にアクセスするとブレークポイントで止まりますが、https://www.your-debug-domain.co.jp/index.htmlにアクセスすると止まりません。

単一ページのデバッグであれば完全マッチするurl設定で問題ないと思いますが、あるURL以下のパスでデバッグが必要な場合は最後にワイルドカードを指定しましょう。

先ほどの例でいえば、次のように指定すればindex.htmlでもブレークポイントが効くようになります。

{
  "url": "https://www.your-debug-domain.co.jp/*"
}

※↑url以外の設定は省略しています。

VSCodeとChromeが正しく連携できていれば、デバッグ対象URLにアクセスするとVSCodeのデバッグ画面のコールスタックに表示ページのタイトルが表示されるはずです。

※デバッグ対象URLにアクセス後、対象外のURLに移動するとデバッグ接続が切れるようなので注意。

※VSCodeでデバッグを起動後、デバッグ対象URLにアクセスするまではデバッグ接続を切らずにいてくれる様子。

オリジン以外の外部スクリプト

オリジン（URLのスキーム（プロトコル）、ホスト（ドメイン）、ポートが同一）以外のURLから読み込む外部スクリプトは通常の設定ではブレークポイントで止まりません。

例えば以下のようなindex.htmlがあったとします。

<html>
  <head>
    <script async src="https://www.external-script.co.jp/lib/external_hoge.js"></script>
  </head>
  <body>
    <div>
      Your debug site.
    </div>
  </body>
</html>

その中で読み込んでいるexternal_hoge.jsをブレークポイントで止めたい場合は、以下のようにパスマッピング設定が必要になります。

{
  "name": "Attach to Chrome",
  "url": "https://www.your-debug-domain.co.jp/*",
  "port": 9222,
  "request": "attach",
  "type": "pwa-chrome",
  "webRoot": "${workspaceFolder}/your-debug-domain",
  "pathMapping": {
    "https://www.external-script.co.jp/lib":"${workspaceFolder}/external-script/lib"
  }
}

上記設定の場合、以下のようにローカルにファイルを配置していると仮定していますので、自分の環境に合わせて適宜読み替えて下さい。

${workspaceFolder}/your-debug-domain/index.html
${workspaceFolder}/external-script/lib/external_hoge.js

※別ドメインのjavascriptファイルがローカルの特定場所に置いてあるものと仮定しています。

Chrome,Javascript,Visual Studio Code,デバッグ,ブレークポイント,プログラミング,設定

Posted by ac-as.net