前端debug的技巧

Devtools

breakpoint
当代码执行到该行代码时暂停
conditional breakpoint条件断点，当表达式为 true 时才会暂停，值得注意的是，如果你的表达式报错，那这个断点就会不生效，需要甄别到底是报错引起的断点没进入还是真的没进入
logpoint
日志断点，当代码执行到这里时，会在控制台输出你的表达式，不会暂停代码执行

Performance

setTimeout

setTimeout如果我们在想要打断点的时候依赖鼠标或者键盘操作，如果你去 source 面板去点击暂定，那我的现场就没有了，那下面的代码会帮你解决问题。setTimeout(() => {debugger;}, 4000);
还有这样一种 case，比如我期望在我鼠标移动时看看某个变量值是多少，此时不要再傻傻的在代码里面添加 console.log，直接运行下面的代码，可以实时看到你想要的变量。这个方法比较像 logpoint，不过不需要找源码去打断点，各有各的应用场景。setTimeout(() => {console.log(yourInstance.getSomeValue());}, 100);

SSR

SSR当你想要 debug 某个页面上 SSR 渲染的样式时，可以禁用掉 js 的执行，具体操作是打开 devtools 的 source 面板，然后 cmd+p，输入「>disable javascript」，按回车，然后刷新页面，你的页面就是纯 SSR 状态了。