9

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

我的文件夹结构是这样的：

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 文件相同的文件夹中。建设时。

感谢您的任何提示。

4

5 回答 5

10

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

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

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

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

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

我觉得我应该提到我正在使用Debugger for Chrome扩展

于 2016-04-28T16:13:45.957 回答
2

所以我已经搞砸了几个小时，终于让它工作了：RVCA18 的回答是正确的：

您需要确保webRoot设置正确，并且正确取决于您从哪里运行 dnx。如果来自您的“项目”文件夹，那么这就是您的实际 webRoot。

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

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

main
  app
  dist

这意味着webRoot就 VSCode 而言，我应该等同于“app”或“main”之上的目录。这也是我运行 webpack 的地方，所以这很有意义。如果我在 VSCode 中打开“主”文件夹，那么我的文件夹${workspaceRoot}也将是“主”，因此要让调试器找到我的文件，我应该将其设置webRoot为${workspaceRoot}.

于 2017-02-16T03:24:06.570 回答
0

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

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

为此，我有一个批处理文件，可以使用此命令打开 chrome。

start /d  "C:\Program Files (x86)\Google\Chrome\Application"  chrome.exe --remote-debugging-port=9222
于 2017-01-10T15:24:39.350 回答
0

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

"webRoot": "${workspaceRoot}/.."
于 2018-07-23T21:40:23.980 回答
0

对我来说，问题出现在 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",

启动.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}"
    },
于 2021-03-14T02:02:29.413 回答