使用 Visual Studio Code 调试 webpack + react 项目

之前在vscode  配置  node express 的调试，心血来潮想在webpack + react 项目上使用 vscode 调试功能，实现浏览器的断点调试，单步调试等。

运行 vscode 并打开项目，点击左侧栏  调试按钮（ shift + ctrl + D）, 切换到debug 模式， 

 1 点击添加配置按钮  

2 点击后会弹出 选择需要DEBUG的项目 提示下拉框 选择 chorme 

ps：如果没有chrome 选择，先在插件扩展处安装

 

3 此时vscode 会自动在 .vscode 夹下新建 launch.json 文件

对 URL 配置换上 你项目对应的 端口

关键在于这个属性  “sourceMapPathOverrides” 之前一直不能断点，提示映射源找不到，我是用 webpack dev server 的，如果用其他 server 这个根据发布路径配置

4 在webpack 的配置文件上 开启 devtool: 'source-map',

这样就可以在vs code 上调试了，不需要打开浏览器的调试工具也能调试。

 PS : 成功开启调试后在上部中间位置会出现 调试工具栏  下部的 控制台也会输出信息 。

断点信息还是非常给力的

 

我的项目需要先跑webpack 命令行运行 webpack dev server , 

我们还可以再配置一个 task  任务让调试一气呵成，连续跑2个任务， 先跑 node 任务（webpack dev server） 再跑 chrom 调试。

在 .vscode 夹下新建 tasks.json 文件 ，并在script 上配置好在package.json 的脚本命令 

 

最后在 launch.json 增加 "preLaunchTask": "debug", 这里的 debug 要对应tasks.json 里的 label 名。tasks 是个数组可以是多个。

ps ：这里有个小技巧，大家可以使用右下角的按钮来添加 属性。

这里是所有 配置文档 go.microsoft.com/fwlink/?lin…

转载于:https://juejin.im/post/5ab3560d6fb9a028dc40ec99