使用 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…