Chrome谷歌浏览器断点调试js找bug（简单有步骤）

这次用一个简单的js循环代码，讲解一下浏览器的断点调试，这个技能对找bug很管用，以谷歌浏览器为例，其他浏览器也是一样的，只是可能源代码调试的位置不太一样，例子代码如下：

 <script>
       //目标查看i和sum的变化情况
        var i =1;
        var sum =0;
        while(i<10){
            sum+=i;
            i++
        }
        console.log(sum)
    </script>

第一步：打开F12，点击Sources

第二步：打断点，添加监视的变量 

 第三步：开始调试

1.在需要验证的逻辑处打断点，再次刷新页面，常用以下快捷键调试程序：

F8以断点为步长执行代码（注意，下一步也可能是当前断点处）；

F10以“语句”为步长执行代码；

2.如果在调试过程中想观察某个变量的动态变化，选中该变量并“Add selected text to watches”，即可在右侧watch出监视该变量（也可以点“+”输入变量名添加）。

第四步：退出调试 

 其他的浏览器基本是一样的调试方法只是调试的位置不太一样

edge

火狐

我其实在本文主要想讲的是调试bug的一个思路，但是由于选的例子涉及东西太多。。。怕全部写下来内容太长，大家也没兴趣看，所以我就简单的选了一部分给大家讲解，不知道大家有没有收获。别看我调试三句话写了一堆的东西，如果真的在实际项目中你也像我这样去做，估计你调试一个Bug的时间会比写一个脚本的时间还长很多。。。在实际情况下，我们应该养成拿到问题的第一时间，自行在脑海中排查问题，找到最有可能出现问题的点，如果没办法迅速的排查出最重要的点，那么你可以使用最麻烦但是很靠谱的方法，利用“逐语句执行”按钮将整个和问题相关的js依次去执行一遍，在执行的过程中，自己也跟着理清思路，同时注意下每个变量的值以及选择器选中的元素是否正确，一般来说，这样做一遍下来，bug都解决的差不多了。

所以个人认为，我们调试bug的思路应该是这样的：首先，js是否成功的执行进来；其次，js是否存在逻辑问题，变量问题，参数问题等等；最后，如果上述都没有问题，请仔细查看各种符号。。。

OK~断点就讲到这里~有不明白的同学可以在下面留言~还有如果大家有什么不懂的知识点或者对前端比较困惑的地方，也可以在下面留言，有空的时候我也会继续针对大家的留言写一些文档的哦~