常用的几种浏览器调试技巧总结

Sources断点

首先看下面这段代码

;(function(){
    function sun(a,b){
        var rnd = Math.random()*200
        rnd = parseInt(rnd)
        a+=rnd
        b+=2*rnd
        return a+b
    }
    console.log(sun(10,20))
})()

假设现在想就验证一下：函数传入的两个数、被加的随机数，以及最终的总和，该怎么做呢？
最简单直接的方法自然是console，接下来介绍一下别的方法。
给一段代码添加断点的流程是“F12（Ctrl + Shift + I）打开“开发工具”——“点击Sources菜单”——“左侧树中找到相应文件”——“点击行号列”即完成在当前行添加/删除断点操作。当断点添加完毕后，刷新页面JS执行到断点位置停住，在Sources界面会看到当前作用域中所有变量和值，只需对每个值进行验证即可完成我们题设验证要求。
断点调试功能简介

• Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。
• Step over next function call：执行到下一步的函数调用（跳到下一行）。
• Step into next function call：进入当前函数。
• Step out of current function：跳出当前执行函数。
• Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。
• Pause on exceptions：异常情况自动断点设置。

Debugger断点

具体的说就是通过在代码中添加”debugger;”语句，当代码执行到该语句的时候就会自动断点。接下去的操作就跟在Sources面板添加断点调试几乎一模一样，唯一的区别在于调试完后需要删除该语句。
既然除了设置断点的方式不一样，功能和Sources面板添加断点效果一样，那么为什么还会存在这种方式呢？我们在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码）的情况，而这部分JS代码在Sources树种无法找到，因此无法直接在开发工具中直接添加断点，那么如果想给异步加载的脚本添加断点，此时“debugger;”就发挥作用了

DOM断点调试

DOM断点，顾名思义就是在DOM元素上添加断点，进而达到调试的目的。而在实际使用中断点的效果最终还是落地到JS逻辑之内。在前端开发越来越复杂的今天，前端JS代码越来越多，逻辑越来越复杂，一个看似简单的Web页面，通常伴随着大段大段的JS代码，涉及诸多DOM节点增、删、改的操作。难免遇到直接通过JS代码很难定位代码段的情况，而我们却可以通过开发者工具的Elements面板，快速定位到相关DOM节点，这时候通过DOM断点定位脚本就显得尤其重要了。
几种常用的DOM断点方式

• 当节点内部子节点变化时断点（Break on subtree modifications）
• 当节点属性发生变化时断点（Break on attributes modifications）
• 当节点被移除时断点（Break on node removal）
  调试，是在项目开发中非常重要的环节，不仅可以帮助我们快速定位问题，还能节省我们的开发时间。调式手段有很多，找到一个适合项目应用场景的，最为重要。