前端调试代码技巧

Oct 23, 2022
#小技巧
  • 待完善

寻求简单有效的debug方法，少走弯路，更高效的修改bug

1、setTimeout

悬浮DOM
悬浮DOM

在我们的代码中，可能会遇到鼠标悬浮出现提示，此时想要调试悬浮的DOM时会很困难，此时可以使用定时器去进行一个debug

setTimeout(function() {
  debugger;
}, 3000);

debugger
debugger

2、console

开发中使用最多的console

3、debugger

  • 直接在代码中需要断点的地方，直接debugger即可，当JS执行到该语句时会自动暂停，页面会出现蒙层卡住，然后会自动跳转到debugger代码处，处于当前执行环境的数据鼠标移上，该数据会显示出来
  • 当点击页面中的前进按钮时，就会跳转到下一个断点处，全部跳转完成后断点就会结束。

4、浏览器断点(source断点)

可以直接在浏览器里断点，在行数的地方可以直接加上断点，F8可以直接跳转到下一个断点，F10可以单步骤调试，F11可以直接进入方法，也就相当于单步调试了。

source断点
source断点

  • 从左到右，各个图标表示的功能分别为：
    • Pause/Resume script execution（F8 或 Ctrl + \）：暂停/恢复脚本执行（程序执行到下一断点停止）；
    • Step over next function call（F10 或 Ctrl + '）：执行到下一步的函数调用（跳到下一行）；
    • Step into next function call（F11 或 Ctrl + ;）：进入当前函数；
    • Step out of current function（shift + F11 或 Ctrl + shift + ;）`：跳出当前执行函
    • Step（F9）：跳到下一条执行语句；
    • Deactive/Active all breakpoints: 关闭/开启所有断点（不会取消）；
    • Pause on exceptions: 异常情况自动断点设置，浏览器会在程序发生异常的那一行设置断点，即当程序会在异常发生处暂停；

5、浏览器控制台调试

浏览器控制台
浏览器控制台

浏览器控制台可以直接调试一些样式问题

Back