首页 > 代码库 > 巧用条件断点实现更好的调试

巧用条件断点实现更好的调试

2024-08-15 07:31:32   221人阅读

    条件断点，顾名思义就是在断点上加个条件语句，当语句为真时才触发断点。那我们可以在这个语句中加入一些逻辑来达到一些调试目的，并通过设置返回值永远为false来让断点不会被触发从而影响调试过程。

   

   【不修改源码，来给代码加上console.log】

     代码： a.htm

<html>

<script src="http://www.mamicode.com/a.js"></script>

<body>

asdf

<div id="aa"></div>

</body>

</html>

 

       

          a.js

setTimeout(function () {

    for(var i=0;i<1000;i++){

        document.getElementById("aa").innerHTML += i + "<br>";

    }

},1000);

 

     那我想在a.js的循环体中加上console.log(i)。我们可以修改源码保存，浏览器Ctrl+F5，即可生效。

     但是：

       1）有时不止是保存刷新即可，比如部署至测试环境后，需要svn签入，服务器同步等时间

       2）调试结束后，源码中的调试代码可能会忘记删掉

 

     现在介绍另一种做法：

     1）浏览器（这里用chrome）开发者工具中，在循环体内打个断点

     2）断点上右键，点击Edit Breakpoint。在弹出的的输入框中写上console.log(i) 

     3） F5刷新，日志就出来了

 

     这么做的好处是：

     1）不污染源码

     2）快速

     3）不停的f5啥的也不会丢失这个条件断点

     这么做的不足是：

     1）源码中在断点位置之上添加行或删除行，浏览器中断点的位置仍保留在原来设置的行号上，就会错位

     2）源码中的console.log会在面板中显示来源位置，而通过条件断点加上的就没有（会显示来自VM），不过这个问题不大，可以从开发者工具的breakpoint栏中进行基本管理

 

     【在特定情况下打断点】

     在上面的例子中，我们希望i是100整数倍时打印出来，可以在条件断点中写：i%100==0 && console.log(i)

 

     【进行一些代码逻辑修改】

     在上面的例子中，我们希望i的步长变成2，可以在条件断点中写：!++i

巧用条件断点实现更好的调试


联系
我们