web-dev-qa-db-ja.com

VSコードの未検証のブレークポイント

VS Code（v。1.24.0）でNode/Express TypeScriptアプリをデバッグしようとしていますが、デバッグ中にすべてのブレークポイントがグレー表示されます。

エラーは「未検証のブレークポイント、ブレークポイントは設定されているがまだバインドされていない」です。検索しましたが、設定の何が問題なのかわかりません。コンソールにエラーはありません。プロセスを選択するとデバッガーは正常にアタッチしますが、ブレークポイントは機能しません。

これをデバッグするにはどうすればよいですか？

基本的なフォルダー構造：

/.vscode
/src/server.ts
/dist/server.js
launch.json
tsconfig.json

launch.json

{
            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}",
            "protocol": "inspector",
            "address": "localhost",
            "port": 8080,
            "restart": true,
            "preLaunchTask": "npm: build",
            "sourceMaps": true,
            "outFiles" : [ "${workspaceFolder}/dist/**/*.js" ]
        },

tsconfig.json

{
  "compilerOptions": {
    "alwaysStrict": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es6",
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true,
    "typeRoots": [ "node_modules/@types" ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

tasks.json

"version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "build",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        } ]
node.jstypescriptexpressdebuggingvisual-studio-code
16
beachCode

このエラーに遭遇した人のために、私は解決策を見つけることができました。問題は、ソースマップのマッピングではなくNodeプロセスの起動方法でした（別のエラーが生成されます）。

プロセスにアタッチするには、VS Codeターミナルから次のように起動しました。

node --inspect dist/server.js

launch.json：

{
            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}",
            "protocol": "inspector",
            "address": "localhost",
            "port": 8080,
            "restart": true,
            "preLaunchTask": "npm: build",
            "sourceMaps": true,
            "outFiles" : [ "${workspaceRoot}/dist/**/*.js" ]
        },
8
beachCode

1つのファイルに設定しようとしたすべてのブレークポイントがこの問題になりましたが、それ以外は見つかりませんでした。

私は小文字でファイルdispatcher.jsに名前を付けていましたが、次のようにノードにそれを引き込みました：

const { Dispatcher } = require('./Dispatcher')

内容は次のようにエクスポートされるjavascriptクラスでした：

module.exports = { Dispatcher }
0
Dr.YSG

今日、この問題が発生したので、デバッガを再構築して再実行してみました。すべてのVS Codeインスタンスをシャットダウンして再起動しました。

0
MattG

Vscode 1.25を使用してこの問題が発生しました

デバッグセッションの実行中にブレークポイントを含むソース（.ts）が変更されると、トリガーされたように見えます。ブレークポイントは、ソースを再保存するか、ブレークポイントを再度トグルすることで再度有効にできます。

ただし、ソースが変更された場合、ソースと同期するためにデバッグを再開する必要があります。

この問題は編集モードにも波及しているようで、デバッグモードを終了してもブレークポイントは「未検証」のままになります。この場合も、ソースを再保存すると、ブレークポイントが再び有効になります。

0
omnivorosaur

私は同じ問題に直面していました。エラーが存在する場合、デバッガーはエラーを報告しますが、エラーがない場合はブレークポイントで停止しません。私にとって解決した変更は、単にローカルホストではなく、提供される正確なファイル名を指定することでした。たとえば、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

将来の読者向け：デバッグを試みる前にアプリのprodビルドを実行したため、この問題に遭遇しました。 prodビルドは、VS Codeが正常にデバッグするために必要なソースマップを削除するので、アプリのdevビルドを実行してからデバッグし、すべてが期待どおりに機能しました。

0
Fillip Peyton