web-dev-qa-db-ja.com

Chromeデバッガー拡張機能を使用したVisual Studio Codeの「未検証のブレークポイント」

Chromeデバッガー拡張機能を使用して、Visual Studio CodeでTypeScriptコードをデバッグしようとしていますが、ブレークポイントで「Unverified breakpoint」メッセージが表示され、ブレークポイントで実行が停止しません。

これが私のlaunch.jsonファイルです。

{
    linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

アプリのバージョン：

  • Visual Studioコード：1.25.1
  • クローム：67.0.3396.99

この問題を解決する方法に関する他の提案はありますか？

typescriptdebuggingvisual-studio-codevscode-settings
66
monstertjie_za

私はついに間違ったことを見つけました：

「$ {workspaceFolder}」の定義を読むと、次のように表示されます。

vS Codeで開かれたフォルダーのパス

私の間違い：

Windowsでの私のプロジェクトへの道は次のとおりでした：C:\Users\myusername\Documents\VSCode\Source\ProjectName

Visual Studio Codeを使用して、Sourceフォルダーを開いており、Integrated Terminalで 'ProjectName'にディレクトリ（cd ProjectName）コマンドを変更する必要が常にありました。これにより、Sourceフォルダーではなく、ProjectNameフォルダーに.vscode folder and launch.json fileフォルダーが作成されます。

上記の間違いは、${workspaceFolder}がSourceフォルダーを指しているのではなく、AngularコンポーネントがなかったProjectNameフォルダーを指していたという事実につながります。

修正：

Visual Studio Codeで、フォルダーC:\Users\myusername\Documents\VSCode\Source\ProjectNameを開き、そのディレクトリにlaunch.jsonをセットアップします。

46
monstertjie_za

「未確認のブレークポイント」問題に対する私のソリューション。

環境

  • Angular CLI 8.1.1
  • Visual Studioコード1.36.1
  • Chrome拡張機能4.11.6のデバッガー

「構成の追加」オプションを使用してVSCで作成されたデフォルトの.vscode/launch.jsonは、これに似ています（ポートを8080から4200に変更しました）。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
  }]
}

以下の項目を追加すると、「未確認のブレークポイント」に関する問題が解決します。

"sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

完全で機能する.vscode/launch.json：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

追加できる追加アイテムがいくつかあります。

 "breakOnLoad": true,
 "sourceMaps": true,

ただし、私の場合、問題を解決するためにこれらは必要ありませんでした。

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}
25
Robin Webb

上記の答えはおそらく多くの問題を解決するでしょうが、それは私のものを解決しませんでした。私のものはもっと単純で厄介な問題でした...

Launch.jsonファイルの構成設定では、大文字と小文字が区別されます。

「webRoot」エントリのスペルは正しいのですが、単語の1つに小文字のbではなく大文字のBがありました。

例：

「webRoot」：「$ {workspaceFolder}/My .F older」

次の名前のワークスペース内のフォルダーと一致しません。

My .f older

私はこれがそこに誰かを助けることを願っています。

11
Michael Walsh

私の場合、次のようにsourceMapPathOverrides値を定義する必要がありました。

ファイルlaunch.json（.vscodeフォルダーに含まれる）：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/project/app/*"
      }
    }
  ]
}

私のソースは${workspaceFolder}/project/appにあります。

9
CodeChimp

正しい答えがたくさんあります。私の場合、これらすべての答えの組み合わせが役立ち、それを理解するのに長い時間がかかりました。これで頭痛の時間を節約できるといいので、

それを要約してみましょうstep by step私を助けた上記の答えを参照してください：

  1. 適切なフォルダーからVSコードを開始することが重要です（ CodeChimp および monstertjie_za からの回答を参照）。
    コンソールウィンドウを開き、cdプロジェクトフォルダーに移動します。
    例：
    cd myProject
    code .
  2. 正しい.vscodeフォルダー内のファイルを構成していることを確認してください。
    右側の.vscodeフォルダーは、プロジェクトフォルダーのサブディレクトリです。
    注：サブフォルダーレベルのVSコードを既に誤って開いている場合。 srcフォルダーには、デバッグに役に立たない構成ファイルを含む.vscodeフォルダーがあります（私の場合と同様）。

  3. .vscode\launch.jsonファイルでデバッグ構成をセットアップします。
    アプリケーションに適切なポートを指定していることを確認してください。私の場合はport 4200で問題ありませんでした。
    また、"webRoot"パラメーターが正しく構成されていることを確認してください（ Stig Perez からの回答を参照）。私の場合、サブフォルダーを追加する必要がありました。変数$(workspaceFolder)で指定されたパスが何であるかを調べるには、StackOverflowで尋ねた質問を確認してください VSコード変数値の表示方法について
    注：そのような構成がまだない場合は、以下を実行して追加します。デバッガのドロップダウンで、「構成の追加...」を選択し、青い「構成の追加」ボタンを押します。追加する構成として「Chromeを起動」を選択します。
    設定例（launch.json）：

    "configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]

    projectsubfolderをプロジェクト内にあるサブフォルダーに置き換えます。これは大文字と小文字が区別されることに注意してください（ Michael Walsh からの回答を参照）。

  4. 次に、アプリケーションにブレークポイントを設定します。

  5. デバッガーでアプリケーションを起動するには、VSコード内でターミナルウィンドウを開き、次のように入力します。
    cd projectsubfolder
    npm install & ng serve
    これにより、アプリケーションがコンパイルされる前に依存パッケージが解決およびダウンロードされます。コンパイルが完了するまで待ちます。
    次に、デバッガーが接続されたChromeウィンドウを起動するVSデバッガーの緑色の三角形をクリックします。
    注：パッケージ/依存関係が変更された場合に、毎回npm installを実行する必要はありません。ほとんどの場合、ng serveを実行してコードを再コンパイルおよび実行するだけで十分です。

8
Matt

以下に示すようなフォルダー構造があり、VS Codeでzeroプロジェクトを開きました。

ゼロ/

enter image description here

次にlaunch.json

  "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}/angular"
        }
    ]
4
Sampath

プロジェクトフォルダーの名前を変更した後も問題が発生し、「webRoot」プロパティが「$ {workspaceFolder}」ではなく「$ {workspaceFolder}/src」を指していることが判明しました。 「Debugger for Chrome」拡張機能のアップデートの一部としてぴったりだったのかもしれませんが、アップデートを受け取っていないので、これを確認できません。

「webRoot」を更新し、ng serveセッションを再起動し、新しいデバッグセッションを開始することでうまくいきました。これが似たようなシーンを持つ人を助けることを願っています。

3
Stig Perez
Unverified breakpoint


この問題の原因は2つ見つかりました。

  1. 正しいワークスペースフォルダーを設定する が必要でした。

  2. デバッグする前にnpm startでWebアプリを起動する必要がありました。

2
Super Jade

私の場合、電子アプリとして実行するためのプロジェクトルートにmain.jsファイルがありました。このmain.jsファイルが削除された場合、問題は解決しました。

1
Anders Jalming

.vscodeフォルダーを削除して再生成する必要がありました。また、フォルダが間違ったパスを指していたので、現在のプロジェクトフォルダパスに戻す必要がありました。ありがとうございました

1
Divakar Luffy

Webpackを介してコード分割を使用している場合、Chromeがそのモジュールをロードするまで（つまり、通常、アプリケーションのその部分に移動するとき）、ブレークポイントは「検証」されません。

1
Jason Dufair

私の場合、ブレークポイントはオフになりました。

enter image description here

1
RayLoveless

私の人生で貴重な3時間を費やし、上記の回答の多くを調べた後、私の問題はphp.iniに次の行がないことと同じくらい簡単でした。

xdebug.remote_autostart = 1

この前に、XAMPPで既にXDebugを構成していましたが、ブレークポイントがヒットしませんでした。デバッグサーバーが自動的に起動するように構成されていないというだけでした。

これが誰かの一日を救うことを願っています。

1
dotNET

私はVSコードで開いていましたmy-app folder where client folder and server folder was launch.jsonをこれから変更する必要がありました

"webRoot": "${workspaceFolder}"

これに

"webRoot": "${workspaceFolder}\\client"
0
JanBrus

私が発見した別の答えは、遅延ロードされたモジュールに関連しています。

遅延ロードされたモジュールの一部であるコードにブレークポイントを設定したいが、ブラウザーにそのモジュールをロードしていない場合、VSコードはブレークポイントを検証するためのソースマップにアクセスできません！

したがって、デバッグする遅延ロードモジュールをロードしたときにのみブレークポイントを設定してください。

0
Tom

解決策は簡単です。

  1. 「ファイル」->「フォルダを開く」->（urプロジェクトのフォルダを選択-package.jsonを含むフォルダ）
  2. デバッグを開く->再生ボタンを押して新しいChrome設定を作成します。
  3. 新しいブレークポイントを設定してください！
  4. お楽しみください！
0
nucknine

デバッグ構成に"sourceMaps": trueがなかったため、このエラーが発生していました。

0
WDuffy

私にとっての解決策は、launch.jsonファイルに次の行を追加することでした： "requireExactSource"：false。この後、VSCを再起動し、動作するか試してください。

0
LeoSaravia

npm iは私の部分のためにそれを修正しました。新しいフォルダー/ファイルを作成するときに、未確認のブレークポイントを取得することがありますが、通常はそれを行います。

0
Andreas Valen

すべてが正しく設定されているように見えても、ブレークポイントがまだヒットしていない場合、必要な変更は、提供される正確なファイル名を指定することでした。たとえば、NodeJSでは、Expressはlocalhost:3000を指定するだけではブレークポイントで停止しませんが、localhost:3000/index.htmlを指定すると期待どおりに機能しました

完全な構成：

VSCodeで開いている私のフォルダー：learningPixi完全なフォルダーの場所（Ubuntu Linux）：/home/leigh/node/pixi-tut/learningPixi

私のフォルダ構造は次のとおりです。

/home/leigh/node/pixi-tut/learningPixi/.vscode/launch.json /home/leigh/node/pixi-tut/learningPixi/public/index.html /home/leigh/node/pixi-tut/learningPixi/server.js

Launch.jsonファイルの内容：

{  
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000/index.html",
      "webRoot": ${workspaceFolder}/public",
      "skipFiles": ["pixi.min.js"]
    }
  ]
}

「skipFiles」も非常に有用でした。

静的ファイルでJavaScriptをデバッグするための私の（非常に基本的な）エクスプレスサーバー設定は次のとおりです。

const express = require('express');
const path = require('path');

const app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.listen(3000, () => console.log('App started on port 3000'));

また、上記のフォルダー構造に従って、index.htmlが/ publicフォルダーにあることを確認してください

HTMLファイル内からJavaScriptをデバッグする場合、VSCode内の設定に移動して、次を有効にする必要がある場合があります。

0
Leigh Mathieson

私の場合、問題は、関数が宣言されている行にブレークポイントが設定されたことでした

openDetails(data: Asset) {         <-- The break point was here
    this.datailsOpen = true;
    this.currentAsset = data;
}

解決策：関数の本体内に移動します

openDetails(data: Asset) {         
    this.datailsOpen = true;        <-- Move the break point here
    this.currentAsset = data;
}
0
Mauricio Gracia Gutierrez

私の問題は、ソースマッピングが適切に構成されていないことでした。実際のTSソースがChromeデバッグ拡張機能の[ソース]タブに表示されていることを確認し、最初にブレークポイントを配置してみてください。たぶんそれは誰かを助けるでしょう。

0
Liam Kernighan