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

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

   

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

     代码: a.htm

<html>

<script src="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

posted on   右耳纹金刀  阅读(218)  评论(0编辑  收藏  举报

编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示