React 项目归根到底也是 JS,调试网页的 JS,除了 Chrome DevTools 外,还有一种更好用的调试方式——VSCode Debugger。 创建调试文件 创建调试文件分为自动创建和手动创建。 用VSCode 打开项目目录,在项目的根目录创建.vscode/launch.json文件: 自动创建: 打开Debug 窗口,然后点击 create a launch.josn,如下图: 点击...
可以在源码里随便加个 debugger,在浏览器里看下现在映射的路径是啥: 这里的 webpack://test-vue-debug/src/App.vue?11c4 就是要映射的路径,那映射到哪里呢? 很明显是映射到本地的路径,也就是这样: workspaceRoot 是 vscode 提供的环境变量,就是项目的跟路径,这样一映射之后,地址不就变成本地的文件了么?
配置的调试开始文件位于项目路径下: xxx/.vscode/launch.json {// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"name":...
这里的 webpack://test-vue-debug/src/App.vue?11c4 就是要映射的路径,那映射到哪里呢? 很明显是映射到本地的路径,也就是这样: workspaceRoot 是 vscode 提供的环境变量,就是项目的跟路径,这样一映射之后,地址不就变成本地的文件了么?那么在本地文件中打断点就能生效了: 看这里的路径,明显映射到项目下的...
VScode debug React config 1. 安装 VScode 插件 Debugger for Chrome 2. 配置 webpack webpack.config.js 添加 source map + devtool: 'eval-cheap-module-source-map', // 或者 'eval-source-map' 3. 配置 .vscode/launch.json 按F5 选择 chrome,会生成 .vscode/launch.json 修改如下...
在根目录下建一个 .vscode/launch.json 的文件,添加一个 chrome 类型的调试配置,输入调试的 url。 然后点击 debug 启动: 这时候就可以在 VSCode 里直接打断点调试了: 用VSCode 调试肯定会比 Chrome Devtools 方便一些。但这不是我们最主要的目的,现在调试的依然是 react-dom.development.js: ...
然后将下面的块添加到您的launch.json文件中,并将其放在.vscode应用程序根目录下的文件夹中。 {"version":"0.2.0","configurations":[{"name":"Chrome","type":"chrome","request":"launch","url":"http://localhost:3000","webRoot":"${workspaceFolder}/src","sourceMapPathOverrides":{"webpack:///...
vscode 调试 react 项目 主要分为以下三个步骤 安装debug for chrome 配置launch.json 文件 配置内容如下 {"version":"0.2.0","configurations":[{"type":"chrome","request":"launch","name":"Launch Chrome","url":"http://localhost:3000",// 改为目标 url"sourceMaps":true,"webRoot":"${...
这里的 webpack://test-vue-debug/src/App.vue?11c4 就是要映射的路径,那映射到哪里呢? 很明显是映射到本地的路径,也就是这样: workspaceRoot 是 vscode 提供的环境变量,就是项目的跟路径,这样一映射之后,地址不就变成本地的文件了么?那么在本地文件中打断点就能生效了: ...