使用Chrome调试JavaScript的断点设置和调试技巧
你是怎么调试JavaScript程序的?最原始的方法是用alert()在页面上打印内容,稍微改进一点的方法是用console.log()在JavaScript控制台上输出内容。嗯~,用这两种土办法确实解决了很多小型JavaScript脚本的调试问题。不过放着Chrome中功能越发强大的开发者工具不用实在太可惜了。本文主要介绍其中的JavaScript断点设置和调试功能,也就是其中的SourcesPanel(以前叫Scripts)。如果你精通Eclipse中的各种Java调试技巧,那么这里的概念都是类似。写作本文时使用的Chrome版本为25.0.1364.172。
基本环境
SourcesPanel的左边是内容源,包括页面中的各种资源。其中,又分Sources和Contentscripts。Sources就是页面本身包含的各种资源,它是按照页面中出现的域来组织的,这是我们要关注的。异步加载的js文件,在加载后也会出现在这里的。Contentscripts是Chrome的一种扩展程序,它是按照扩展的ID来组织的,这类扩展实际也是嵌入在页面中的资源,它们也可以读写DOM。编写、调试这类扩展的开发者才要关心它们,如果你的浏览器没安装任何扩展,那么Contentscripts就看不到任何东西。
SourcesPanel的中间主区域用于展示左边资源文件的内容。
SourcesPanel的右边是调试功能区,最上面的一排按钮分别是暂停/继续、单步执行、单步跳入、单步跳出、禁用/启用所有断点。下面是各种具体的功能区。稍后介绍。
注意,左右两边的区域默认可能收缩在两侧没有显示出来,点击两侧的伸缩按钮
最下面还有一些功能按钮很有用。
在源代码上设置断点
通过左边的内容源,打开对应的JavaScript文件,鼠标点击文件的行号就可以设置和删除断点。添加的每个断点都会出现在右侧调试区的Breakpoints列表中,点击列表中断点就会定位到内容区的断点上。如果你有多个文件、多个断点的话,利用Breakpoints列表中的断点快速定位非常方便。
对于每个已添加的断点都有两种状态:激活和禁用。刚添加的断点都是激活状态,禁用状态就是保留断点但临时取消该断点功能。在Breakpoints列表中每个断点前面都有一个复选框,取消选中就将禁用该断点。断点位置的右键菜单中也可以禁用断点。也可以在右侧功能区上面
条件断点:在断点位置的右键菜单中选择“EditBreakpoint...”可以设置触发断点的条件,就是写一个表达式,表达式为true时才触发断点。查看断点的环境调用栈(CallStack):在断点停下来时,右侧调试区的CallStack会显示当前断点所处的方法调用栈,比如有一个函数g()其中又调用了函数f(),而我在f()中设置了一个断点,那么我在console中执行函数g()的时候会触发断点,其调用栈显示如下:
最上面是f(),然后是g()。调用栈中的每一层叫做一个frame,点击每个frame可以跳到该frame的调用点上。
此外,还可以在frame上用右键菜单重新开始执行当前frame,也就是从该frame的开始处执行。比如在函数f()的frame上RestartFrame,断点就会跳到f()的开头重新执行,context中的变量值也会还原。这样结合变量修改和编辑代码等功能,就可以在当前frame中反复进行调试,而不用刷新页面重新触发断点了。查看变量
CallStack列表的下方是ScopeVariables列表,在这里可以查看此时局部变量和全局变量的值。执行选择的代码
在断点调试时,可以用鼠标选择想要查看的变量或表达式,然后右键菜单执行“EvaluateinConsole”,就可以看到该表达式的当前的值了。中断下次要执行的JavaScript语句右侧调试区的上面的“中断/继续”按钮还有一个功能,在没有触发断点时,点一下这个按钮就会进入“准备”中断的状态,页面下一次执行JavaScript语句时会自动中断,比如触发了一个点击动作时会执行的代码。临时修改JavaScript代码通常我们在调试代码时习惯:修改代码→刷新页面→重新检查,这么一个循环。但其实Chrome中可以临时修改JS文件中的内容,保存(Ctrl+S)就可以立即生效,结合Console等功能就可以立即重新调试了。但注意这个修改是临时的,刷新页面修改就没了。
异常时断点
在界面下方能看到
主要解释一下状态2和状态3的区别
try{
throw"aexception";
}catch(e){
console.log(e);
}
上面try里面的代码会遇到异常,但是后面的catch代码能够捕获该异常。如果是所有异常都中断,那么代码执行到会产生异常的throw语句时就会自动中断;而如果是仅遇到未捕获异常才中断,那么这里就不会中断。一般我们会更关心遇到未捕获异常的情况。
在DOM元素上设置断点
有时候我们需要监听某个DOM被修改情况,而不关心是哪行代码做的修改(也可能有多处都会对其做修改)。那么我们可以直接在DOM上设置断点。
如图所见,在元素审查的ElementsPanel中在某个元素上右键菜单里可以设置三种不同情况的断点:子节点修改自身属性修改自身节点被删除选中之后,SourcesPanel中右侧的DOMBreakpoints列表中就会出现该DOM断点。一旦执行到要对该DOM做相应修改时,代码就会在那里停下来,如下图所示。
XHR断点
右侧调试区有一个XHRBreakpoints,点击+并输入URL包含的字符串即可监听该URL的Ajax请求,输入内容就相当于URL的过滤器。如果什么都不填,那么就监听所有XHR请求。一旦XHR调用触发时就会在request.send()的地方中断。
按事件类型触发断点
右侧调试区的EventListener列表,这里列出了各种可能的事件类型。勾选对应的事件类型,当触发了该类型的事件的JavaScript代码时就会自动中断。
调试快捷键
varcoffee=CoffeeScript.compile(code.value)+"//@sourceURL="+(evalName.value||"Coffeeeeeeee!");
eval(coffee);
实际上,//@sourceURL不仅仅可以用在eval的代码中,任何js文件、甚至是JavascriptConsole输入的代码都可以用,效果一样!格式化代码(PrettyPrint)
相关文章
- javascript 高级教程 视频_精通JavaScript
- JavaScript数组filter方法
- javascript_JavaScript走向成熟
- 【愚公系列】2022年11月 .NET CORE工具案例-.NET Core执行JavaScript
- 【说站】javascript new如何调用构造函数
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
- 使用 Chrome 开发者工具分析 SAP UI5 应用的 JavaScript 代码执行性能瓶颈
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- Javascript 判断浏览器版本和名称详解编程语言
- 用JavaScript实现全局替换,解决$等特殊符号的难题[
- javascript入门·图片对象(无刷新变换图片)滚动图像
- JavaScript在线压缩和格式化收藏
- JavaScript设计模式富有表现力的Javascript(一)
- Javascript闭包演示代码小结
- 深入理解JavaScript系列(6)强大的原型和原型链
- Javascript异步加载详解(浏览器在javascript的加载方式)
- javascript学习笔记(九)js对象设计模式
- 解决javascript:window.close()在chrome,Firefox下失效的问题
- 基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
- javascript闭包的高级使用方法实例
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
- JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
- JavaScript基础知识学习笔记
- Javascript基础教程之if条件语句
- javascript使用正则获取url上的某个参数