作者：神说要有光作为前端开发，基本每天都要调试Vue/React代码，不知道大家都是怎么调试的，但我猜大概有这么几种：
不调试，直接看代码找问题
console.log打印日志
用ChromeDevtools的debugger来调试
用VSCode的debugger来调试
不同的调试方式效率和体验是不一样的，我现在基本都是用VSCodedebugger来调试，效率又高、体验又爽。
可能很多同学还不知道怎么用VSCode调试网页，这篇文章我就来介绍下。
我们分别看下React和Vue的：
用VSCode调试React代码
我用create-react-app创建了一个demo项目，有这样一个组件：
跑起来开发服务器：
浏览器显示的界面是这样的：
如何用VSCode调试它呢?
我们在根目录下添加一个.vscode/launch.json的配置文件：
创建了一个调试配置，类型是chrome，并指定调试的url是开发服务器的地址。
在react代码里打两个断点：
然后点击运行：
看，XDM，它断住了!调用栈、当前环境的变量等都有。
释放断点，继续往下走。
点击的时候也能拿到对应的事件对象：
是不是超方便!
而且当你写业务累了，想摸鱼看会react源码，那直接点击调用栈里的某一帧看就行：
比如渲染的时候会调用renderWithHooks方法，里面的workInProgress对象就是当前fiber节点，它的memorizedState属性就是hooks存放值的地方：
用VSCode来调试React代码之后，调试业务代码或者看源码的体验都很爽，有木有。
再来看下Vue的：
用VSCode调试Vue代码
Vue的调试会麻烦一些，要在上面的基础上额外对路径做一些映射。
因为React我们是直接写jsx、tsx，它和编译之后的js文件一一对应，而Vue不是，Vue我们写的是SFC(singlefile