[英]Visual Studio Code debugging chrome, Breakpoints wont hit
I have a Angular2/typescript app I am developing in VSCode.我有一个在 VSCode 中开发的 Angular2/typescript 应用程序。 I use Gulp to build the typescript files and gulp-sourcemap to create map files.
我使用 Gulp 来构建打字稿文件和 gulp-sourcemap 来创建地图文件。 Attaching/launching chrome works well after some tinkering with the chrome debug extension for VSCode, but I cannot get the breakpoints to hit.
在对 VSCode 的 chrome 调试扩展进行一些修补后,附加/启动 chrome 效果很好,但我无法找到断点。 I run the website with "dnx web", but I don't think that should matter.
我使用“dnx web”运行网站,但我认为这无关紧要。
My folder structure is like this:我的文件夹结构是这样的:
project/wwwroot/index.html
project/wwwroot/app/myfile.js
project/wwwroot/app/myfile.js.map
project/scripts/myfile.ts
My launch.json
looks like this:我的
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
}
]
}
and my gulp build task looks like this:我的 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'));
})
I have verified that maps files are generated and stored in the same folder as the js files.我已验证地图文件已生成并存储在与 js 文件相同的文件夹中。 when building.
建造时。
Thanks for any hints.感谢您的任何提示。
Setting the workspace location to the location of my typescript files, and not my build files, worked for me.将工作区位置设置为我的打字稿文件的位置,而不是我的构建文件的位置,这对我有用。
Unverified Breakpoint (my compiled file location)未验证断点(我编译的文件位置)
"webRoot": "${workspaceRoot}/build/client"
Working Breakpoint (my ts file location)工作断点(我的 ts 文件位置)
"webRoot": "${workspaceRoot}/client"
I feel I should mention that I am using the Debugger for Chrome extension我觉得我应该提到我正在使用Debugger for Chrome扩展
So I've been messing with this for hours and finally got it working: RVCA18 was right on with his answer:所以我已经搞了几个小时,终于让它工作了:RVCA18 的回答是正确的:
You need to make sure that webRoot
is set correctly, and correctly will depend on where you are running dnx from.您需要确保正确设置了
webRoot
,正确设置取决于您运行 dnx 的位置。 If from your 'project' folder, then that's your actual webRoot.如果来自您的“项目”文件夹,那么这就是您的实际 webRoot。
You can also use your sourcemap file.您还可以使用源映射文件。 If you open the file, it has a structure something like this:
{"version":3,"sources":[],"names":[],"sourcesContent":[]}
如果你打开这个文件,它的结构是这样的:
{"version":3,"sources":[],"names":[],"sourcesContent":[]}
Find the sources
prop which is an array of all of your source files.找到包含所有源文件的数组的
sources
属性。 For example, if I search for one of my class names, I find the source to be something like: "webpack:///./app/components/TargetCard.js"
.例如,如果我搜索我的一个类名,我会发现源类似于:
"webpack:///./app/components/TargetCard.js"
。 I am using webpack and have a dir structure like below (simplified):我正在使用 webpack 并具有如下所示的目录结构(简化):
main
app
dist
which means that my webRoot
as far as VSCode is concerned should equate to the dir one level above 'app', or 'main'.这意味着就 VSCode 而言,我的
webRoot
应该等同于比“app”或“main”高一级的目录。 This is also where I run webpack from, so it makes sense.这也是我运行 webpack 的地方,所以这是有道理的。 If I open the 'main' folder in VSCode, then my
${workspaceRoot}
will also be 'main', so to have the debugger find my files I should set webRoot
to simply be ${workspaceRoot}
.如果我在 VSCode 中打开 'main' 文件夹,那么我的
${workspaceRoot}
也将是 'main',所以为了让调试器找到我的文件,我应该将webRoot
设置为${workspaceRoot}
。
If you are using the debugger for chrome extension I would check that you are running chrome with remote debugging?如果您将调试器用于 chrome 扩展,我会检查您是否正在使用远程调试运行 chrome? I was able to get mine working after I started running chrome with remote debugging.
在我开始通过远程调试运行 chrome 后,我能够让我的工作正常进行。 from https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code
来自https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code
For now, Chrome needs to be started with remote debugging enabled, and only supports one concurrent connection.
目前Chrome需要开启远程调试,并且只支持一个并发连接。 This means if you open up DevTools inside Chrome, the connection to VS Code will get terminated by Chrome.
这意味着如果你在 Chrome 中打开 DevTools,与 VS Code 的连接将被 Chrome 终止。 This is slightly annoying, and we hope this issue will be fixed sometime soon.
这有点烦人,我们希望这个问题能很快得到解决。
To do this i have a batch file that opens chrome with this command.为此,我有一个批处理文件,可使用此命令打开 chrome。
start /d "C:\Program Files (x86)\Google\Chrome\Application" chrome.exe --remote-debugging-port=9222
I totally agree with RVCA18.我完全同意 RVCA18。 It's about the webRoot Setting that was wrong.
这是关于错误的webRoot设置。 I had VS-Code ${workspaceRoot} pointing to a subfolder (just because I opened the project like that and had no script in the top-level folder).
我让 VS-Code ${workspaceRoot} 指向一个子文件夹(只是因为我像这样打开了项目并且在顶级文件夹中没有脚本)。 Since the index.html that is launched is in the top level folder I had to set the following Option in launch.json
由于启动的 index.html 位于顶级文件夹中,因此我必须在launch.json 中设置以下选项
"webRoot": "${workspaceRoot}/.."
For me, the problem occured in Visual Studio Code, using addons "Debugger for Chrome" with "Live Server".对我来说,问题发生在 Visual Studio Code 中,使用插件“Debugger for Chrome”和“Live Server”。
I got it to work with the following settings:我让它可以使用以下设置:
Live Server's settings.json: Live Server 的 settings.json:
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --user-data-dir=C:/tmp --remote-debugging-port=9222",
launch.json:启动.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}"
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.