在VSCode的Chrome调试器中，对于sourceMapPathOverrides设置的记录备忘

2 年 ago

文, 翔

1 minute

我对标题有些困惑。希望有跟我一样陷入其中并得到解答的人能够帮助我。

请注意

在Angular项目中运行良好，但是在相同的思路下，尝试使用React + Docker的结构时却失败了。

或许条件之一是像Angular2那样默认安装Webpack且能显示源映射，（我尝试的React项目在Webpack中并未显示源映射）。如果你阅读了官方的“Sourcemaps”章节并思考了“如果Webpack没有源映射会怎样”的问题，可能也会有这种理解。

如果您是在React或Vue + Docker的环境下找到了这篇文章，那么在Remote Development扩展中使用Debugger for Chrome的文章可以让您了解更多，因此我会附上它。
这是关于使用Visual Studio Code Remote的Container来构建Vue.js开发环境的讨论。

我迷上了这个内容

因为听说VSCode有一个名为Debugger for Chrome的方便扩展功能，所以我尝试在VSCode上调试Angular的代码。

然而在断点处处理并没有停止下来。

环境

我参照了以下的文章来搭建Docker环境。
轻松搭建Docker × Angular环境。

产生的原因。

Chrome调试器的launch.json（配置文件）的描述不正确。

解决方案（仅结果）

最终的launch.json（配置文件）如下。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "for angular",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/server/angular-app/*"
                }
        }
    ]
}

如果您尝试复制粘贴上述内容，并且成功了，那可能是运气非常好的(^^;

如果您已经理解了下面的文章，那么您可能不需要继续阅读了。
在Docker容器中使用VSCode调试启动的Angular
“可以在现代JavaScript开发中使用的远程调试和日志记录技巧（2018年版-下篇）”
Visual Studio Code无法正常工作的调试。

解释

只要你理解了sourceMapPathOverrides要做什么，就可以正确地进行设置。

试图使用sourceMapPathOverrides进行的操作。

将浏览器的源代码映射和本地的源代码映射（在VScode中实现）进行关联。

这里还有一件重要的事情，那就是webRoot是什么。

            "webRoot": "${workspaceFolder}",

${workspaceFolder}是默认的表达方式，它指的是VScode中工作空间的根目录。

如何引导解决方案

※ 这个源码自身是Angular的教程。

关于浏览器源代码的布置

首先，关于浏览器源代码的位置。如果您在Docker容器中使用Angular启动，并在VSCode中进行调试，按照您所写的，可以在Chrome开发工具中打开“来源”选项，并查看适当的源文件所在的路径，就能明白它是什么样的路径了。

比如说，上述的hero.service.ts被放置在浏览器的源代码位置webpack:///./src/app/hero.service.ts中。

由于我想要对src文件夹中的所有源代码进行调试，因此我想将浏览器的源代码布置绑定为webpack:///./*。

关于本地源配置

这次的层级

angular-traial ←※ webRoot=`${workspaceFolder}`の位置
├── .vscode
│   └── launch.js
├── docker
│   └── node
│       └── Dockerfile
├── docker-compose.yml
└── server
    └── angular-app
        ├── README.md
        ├── angular.json
        ├── e2e
        ├── karma.conf.js
        ├── node_modules
        ├── package-lock.json
        ├── package.json
        ├── src
        │   ├── app
        │   │   ├── app-routing.module.ts
        │   │   ├── app.component.html
        │   │   ├── app.component.sass
        │   │   ├── app.component.spec.ts
        │   │   ├── app.component.ts
        │   │   ├── app.component_bk.html
        │   │   ├── app.module.ts
        │   │   ├── dashboard
        │   │   ├── hero-detail
        │   │   ├── hero-search
        │   │   ├── hero.service.spec.ts
        │   │   ├── hero.service.ts
        ~以下省略~

在这里，webRoot = $ {workspaceFolder}指的是什么位置呢？
直白地说，它指的是VScode工作区的根位置，这次是在angular-trial文件夹的位置（尽管在层次结构中也进行了描述）。

在这里，根据每个人是如何打开个人工作区的，若要创建launch.js，应该是${workspaceFolder}/.vscode.

调整浏览器和本地源文件的配置。

如果考虑将浏览器的源代码位置配置为包括src文件夹在内的webpack:///./*，那么

如果将本地源代码放置在src文件夹中（以及更高级的层次）/angular-traial/server/angular-app/*的话，
=${workspaceFolder}/server/angular-app/*
=${webRoot}/server/angular-app/*
将是正确的设置。

            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/server/angular-app/*"
                }

闲谈

如果理解到这一点，那么将”只将调试目标限制在src文件夹内”也变得很容易了。

            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/server/angular-app/src/*"
                }

当然，增加了两种不同的/src/部分，但具体参考的标准可能因网站或参考资料的不同而有所差异。

如果你明白sourceMapPathOverrides的作用，应该就能够应对了。

结束

使用Chrome调试器后，不需要每次在开发者工具中查找源代码，这样很方便。（虽然有点困难，但是对学习Angular会有很大进展）

就是这样！