Chrome调试折腾记之JS断点调试技巧

JS调试技巧技巧

一：格式化压缩代码


技巧二：快速跳转到某个断点的位置

右侧的Breakpoints会汇总你在JS文件所有打过的断点，点击跟checkbox同一行的会暂时取消这个断点，若是点击checkbox下一行的会直接跳转到该断点的位置

技巧三：查看断点内部的作用范围【很实用】

右侧的scope可以看到相当多实用的信息，比如this的指向，是否有值，断点是对象还是其他等。。

技巧4：监听事件断点

右侧的Event Listener Breakpoints可以选择性的监听某类行为事件，比如键盘输入，拖拉等。。勾选前面的checkbox就可以生效，当你触发改行为的时候就会跳转到触发的JS

技巧5：DOM及 XHR监听跳转

DOM Breakpoints : 是你Elements页，感觉要监听某段dom的可能有一些行为，但是又不具体知道确切位置就可以用了

XHR Breakpoints： 向服务器请求的，ajax的核心要点

默认勾选了，所有XHR行为，可选项是判断URL。。。我用的不多

技巧6：单步执行、单步进入、强制进入、单步退出

这个东东是调试中必不可少的，其实用过firebug的小伙伴，对这个就有一个清晰的认识你。基本一样；先上图；

功能名词依次，不懂的可以看看我firebug那个系列的

  • Pause script excution 【单步执行，在断点处暂停，等待调试–不是直译】 ： 暂停后这个按钮会变成 Resume script excution 【继续执行】 ， 快捷键 【F8 或者 Ctrl + \】
  • Step over next function call【单步跳过】 ： 会跳到下一个断点，快捷键 【F10 或者 Ctrl + `】
  • Step into next function call【单步进入】 ： 会进入函数内部调试，快捷键【F11 或者 Ctrl + ;】
  • Step out of current function 【单步跳出】: 会跳出当前这个断点的函数，快捷键【Shift + F11 或者 Ctrl + Shift + ;】

后面的就是chrome的特色功能

  • Deactivate breakpoints : 使所有断点临时失效，快捷键【Ctrl + F8】
  • Don't Pause on exceptions: 不要在表达式处暂停，还有一个可选项【Pause On Caught Exceptions– 若抛出异常则需要暂停在那里】

总结

这篇文章就到此处，更深入的及一些效率的小操作就到下篇文章再介绍，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript调试之DOM断点调试法使用技巧分享

    有的同学会说,可以使用源代码搜索的办法.的确,对于一个相对简单的页面,这个方法时常奏效.但是,对于构成相对复杂的页面(比如页面嵌入很多脚本文件和片段.使用了大段面向对象的实现.隐藏了实现的代码),可能找起来就不那么顺利了. 在Javascript调试中,我们经常会使用到断点调试.其实,在DOM结构的调试中,我们也可以使用断点方法,这就是DOM Breakpoint(DOM断点). 具体的使用方法: 1. 在Chrome浏览器中,打开开发者工具,先选中一个页面元素,然后点击鼠标右键,依次点击菜单中

  • 使用Firebug对js进行断点调试的图文方法

    使用Firebug对js进行断点调试的图文方法

    具体步骤: a. 打开Firebug后,启用"脚本"调试,找到引用的脚本文件(或者行内js): b. 在适当的位置加入断点: c. 如果断点已经执行过,则刷新页面,这时脚本就会在断点处中断.如果断点没有执行过,那可以直接执行页面上的动作(例如点击按钮等),然后代码会在断点处中断: d. 观察函数调用栈,观察local变量,也可以进行单步执行,进行调试. 确实非常简单!用Firebug断点调试的优点总结如下: 能加断点的行用绿色行号,非常直观: call stack用两种方式显示出来,很

  • chrome浏览器如何断点调试异步加载的JS

    chrome浏览器如何断点调试异步加载的JS

    前言 在我们日常开发中,常常利用chrome强大的控制台Sources下面进行代码断点调试,但是通过$.getScript等异步加载JS的方式在Sources里面就是找不到,那如何进行debug断点调试呢?下面来一起看看. 这是我们用Sources断点调试的实例图: 图中我们可以看到,在index.js中我们通过$.getScript引入test.js,看看表现如何: 我们在Network中看到test.js已经成功引入,但是它却属于XHR类请求,这样我们在Sources必然找不到它. 不出所料

  • javascript断点调试心得分享

    javascript断点调试心得分享

    1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!恭喜你的处女断点打上了,哈哈~~ 2.断点怎么打才合适? 打断点操作很简单,核心的

  • Chrome调试折腾记之JS断点调试技巧

    Chrome调试折腾记之JS断点调试技巧

    JS调试技巧技巧 一:格式化压缩代码 技巧二:快速跳转到某个断点的位置 右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置 技巧三:查看断点内部的作用范围[很实用] 右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等.. 技巧4:监听事件断点 右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘

  • js断点调试心得分享(必看篇)

    js断点调试心得分享(必看篇)

    1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行号上单击一下,OK!恭喜你的处女断点打上了,哈哈~~ 2.断点怎么打才合适? 打断点操作很简单,核心的

  • js断点调试经验分享

    js断点调试经验分享

    我们给大家详细分析了一下在JS调试的时候经常用到的断点调试,并把经验和技巧做了总结,以下是全部内容: 1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断点?(我们先看一个断点截图,以chrome浏览器的断点为例) 步骤记住没? 用chrome浏览器打开页面 → 按f12打开开发者工具 → 打开Sources → 打开你要调试的js代码文件 → 在行

  • JavaScrip调试技巧之断点调试

    JavaScrip调试技巧之断点调试

    首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js.除此之外,Firefox还支持一些更为高级的断点调试.变量监视功能. 其他浏览器里,Opera.Chrome和Safari的调试功能也比较好用.Opera的DragonFly速度相对比较快,界面清爽,功能强大,但不如Safari等友好.相比来说,IE8的程序员

  • 详解使用Visual Studio Code对Node.js进行断点调试

    详解使用Visual Studio Code对Node.js进行断点调试

    在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. 作为前端开发工程师,以往我们开发的JavaScript程序都运行在浏览器端,利用Chrome提供的开发者工具就可以方便的进行源码断点调试.其步骤有四,详情不表,粗略概括如下: 打开Chrome开发者工具: 点击进入Sources标签页,在页面的左侧就能看到JS代码的目录: 找到需要设置断点的源文件,在需要中断的哪行代码左侧单击鼠标左键,就可以设置断点,如果你的代码是uglify过的,则需导入相应的source

  • React Native 真机断点调试+跨域资源加载出错问题的解决方法

    React Native 真机断点调试+跨域资源加载出错问题的解决方法

    写在前面 闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug. 遇到类似问题的同学应该不少,这里做下记录,有需要的可以参考下. 如何断点调试 首先,在真机上加载运行RN应用(过程略). 然后,摇动手机,弹出开发菜单,选择"Debug JS Remotely". chrome会自动打开调试界面,地址是 http://localhost:8081/debugger-u

  • 浅析Visual Studio Code断点调试Vue

    很多人习惯在 Chrome 的调试窗口中调试 Vue 代码, 或者直接使用 console.log 来观察变量值, 这是非常痛苦的一件事,需要同时打开至少 3 个窗体.个人还是更加习惯于断点调试.这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码, 并且在VS Code的调试窗口看到Chrome中console相同的值. 设置 Chrome 远程调试端口 首先我们需要在远程调试打开的状态下启动 Chrome, 这样 VS C

随机推荐