前端debug的技巧

最新推荐文章于 2024-04-27 09:26:26 发布

是乐渝啊

最新推荐文章于 2024-04-27 09:26:26 发布

阅读量1.4k

点赞数

分类专栏：前端debug 文章标签： debug

本文链接：https://blog.csdn.net/Summer_Qzz/article/details/119992067

版权

前端debug 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了前端开发中的调试方法，包括使用Devtools设置断点（普通断点、条件断点、日志断点）来跟踪代码执行，以及如何利用setTimeout进行特定场景的调试。此外，还讲解了如何在SSR（服务器端渲染）环境下禁用JavaScript以方便样式调试。通过这些技巧，开发者能更高效地定位和解决问题。

摘要由CSDN通过智能技术生成

Devtools

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

Performance

setTimeout

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