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