Question

我有一个我在VSCode中开发的Angular2 /打字稿应用程序。我使用Gulp构建typescript文件和gulp-sourcemap来创建地图文件。在对VSCode的chrome调试扩展进行一些修补之后，附加/启动chrome很有效，但我无法获得断点。我使用＆＃34; dnx web＆＃34;运行网站，但我认为这不重要。

我的文件夹结构如下：

project/wwwroot/index.html
project/wwwroot/app/myfile.js
project/wwwroot/app/myfile.js.map
project/scripts/myfile.ts

我的launch.json看起来像这样：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8001/portfolios",
      "runtimeArgs": [
          "--new-window", //Open in new window
          "--user-data-dir=C:/temp/", 
          "--remote-debugging-port=9222" 
      ],
      "webRoot": "${workspaceRoot}/wwwroot", 
      "sourceMaps": true
    }
  ]
}

我的gulp构建任务看起来像这样：

gulp.task('ts', function (done) {
  var files = gulp.src(tsToMove)
    .pipe(sourcemaps.init())
    .pipe(ts(tsConfig), undefined, ts.reporter.fullReporter());
    return files.js.pipe(sourcemaps.write(".",{sourceRoot: '../scripts'}))
    .pipe(gulp.dest('scripts'));
})

我已经确认生成了地图文件并将其存储在与js文件相同的文件夹中。在建设时。

感谢任何提示。

Answer 1

将工作区位置设置为我的打字稿文件的位置，而不是我的构建文件，对我有用。

未验证的断点（我编译的文件位置）

"webRoot": "${workspaceRoot}/build/client"

工作断点（我的ts文件位置）

"webRoot": "${workspaceRoot}/client"

我觉得我应该提一下，我正在使用调试器for Chrome 扩展程序

Answer 2

所以我已经搞砸了几个小时并最终搞定了它：RVCA18正确地回答了他的问题：

您需要确保webRoot设置正确，并且正确地取决于您运行dnx的位置。如果来自您的项目＆＃39;文件夹，然后你的实际webRoot。

您也可以使用源图文件。如果打开文件，它的结构如下： {"version":3,"sources":[],"names":[],"sourcesContent":[]}

找到sources道具，它是所有源文件的数组。例如，如果我搜索我的一个类名，我会发现源代码如下："webpack:///./app/components/TargetCard.js"。我正在使用webpack并具有如下（简化）的目录结构：

main
  app
  dist

这意味着，就VSCode而言，我的webRoot应该等同于以上某个级别的应用程序，或者主要的＆＃39;。这也是我运行webpack的地方，所以它是有道理的。如果我打开主要的＆＃39; VSCode中的文件夹，然后我的${workspaceRoot}也将是＆＃39; main为了让调试器找到我的文件，我应该将webRoot设置为${workspaceRoot}。

Answer 3

如果您使用调试器进行chrome扩展，我会检查您是否正在使用远程调试运行chrome？在我开始使用远程调试运行chrome之后，我能够开始工作了。来自https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code

目前，Chrome需要启用远程调试启动，并且只支持一个并发连接。这意味着如果您在Chrome中打开DevTools，则Chrome将终止与VS Code的连接。这有点令人讨厌，我们希望这个问题很快就能解决。

要做到这一点，我有一个批处理文件，用这个命令打开chrome。

start /d  "C:\Program Files (x86)\Google\Chrome\Application"  chrome.exe --remote-debugging-port=9222

Answer 4

我完全同意RVCA18。与 webRoot 设置有关的错误。我有VS-Code $ {workspaceRoot}指向子文件夹（只是因为我这样打开了项目，并且在顶层文件夹中没有脚本）。由于启动的index.html位于顶级文件夹中，因此我必须在 launch.json

中设置以下选项

"webRoot": "${workspaceRoot}/.."

Answer 5

对我来说，问题发生在 Visual Studio Code 中，使用插件“Debugger for Chrome”和“Live Server”。

我让它在以下设置下工作：

Live Server 的 settings.json：

"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --user-data-dir=C:/tmp --remote-debugging-port=9222",

launch.json：

"configurations": [
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "pwa-chrome",
        "url": "http://127.0.0.1:5500/${relativeFile}",
        "sourceMaps": true,
        "webRoot": "${workspaceFolder}"
    },

Visual Studio Code调试chrome，Breakpoints不会命中

5 个答案: