最新公告
  • 欢迎您光临马哥源码,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • java源码下载 JavaScript的6种打断点的方式

    本篇文章给大家总结分享6种JavaScript的打断点的方式,值的学习收藏,快来看看你用过几种吧?希望对大家有所帮助!

    Debugger 是前端开发很重要的一个工具,它可以在我们关心的代码处断住,通过单步运行来理清逻辑。而 Debugger 用的好坏与断点打得好坏有直接的关系。

    Chrome Devtools 和 VSCode 都提供了 Debugger,它们支持的打断点的方式有 6 种。

    普通断点

    在想断住的那一行左侧单击一下就可以添加一个断点,运行到该处就会断住。

    这是最基础的断点方式,VSCode 和 Chrome Devtools 都支持这种断点。

    条件断点

    右键单击代码所在的行左侧,会出现一个下拉框,可以添加一个条件断点。

    输入条件表达式,当运行到这一行代码并且表达式的值为真时就会断住,这比普通断点灵活些。

    这种根据条件来断住的断点 VSCode 和 Chrome Devtools 也都支持。

    DOM 断点

    在 Chrome Devtools 的 Elements 面板的对应元素上右键,选择 break on,可以添加一个 dom 断点,也就是当子树有变动、属性有变动、节点移除这三种情况的时候会断住。可以用来调试导致 dom 变化的代码。


    因为是涉及到 DOM 的调试,只有 Chrome Devtools 支持这种断点。

    URL 断点

    在 Chrome Devtools 的 Sources 面板可以添加 XHR 的 url 断点,当 ajax 请求对应 url 时就会断住,可以用来调试请求相关的代码。

    这个功能只有 Chrome Devtools 有。

    Event Listener 断点

    在 Chrome Devtools 的 Sources 面板还可以添加 Event Listener 的断点,指定当发生什么事件时断住,可以用来调试事件相关代码。

    这个功能也是只有 Chrome Devtools 有。

    异常断点

    在 VSCode 的 Debugger 面板勾选 Uncaught Exceptions 和 Caught Exceptions 可以添加异常断点,在抛出异常未被捕获或者被捕获时断柱。用来调试一些发生异常的代码时很有用。

    总结

    Debugger 打断点的方式除了直接在对应代码行单击的普通断点以外,还有很多根据不同的情况来添加断点的方式。

    这些打断点方式大部分都是 Chrome Devtools 支持的(普通、条件、DOM、URL、Event Listener、异常),也有的是 VSCode Debugger 支持的(普通、条件、异常)。

    不同情况下的代码可以用不同的打断点方式,这样调试代码会高效很多。这六种打断点方式,你用过几种呢?

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
    8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
    马哥源码 » java源码下载 JavaScript的6种打断点的方式

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    会员有问题怎么沟通交流!可以使用会员中心的工单或是进QQ群
    用户工单如何提问?登录账户,进入个人中心 下面可以看到我的工单,就可以向站长提问题了
    • 4710会员总数(位)
    • 5027资源总数(个)
    • 74本周发布(个)
    • 0 今日发布(个)
    • 1344稳定运行(天)