JavaScript调试技巧之:断点调试(1)
如果您还没有阅读《JavaScript调试技巧之:快速定位》,建议先看看那篇。说不定,用快速定位就能解决问题了,呵呵。这次我会总结记录一下断点调试的笔记,希望也对大家有用,欢迎补充交流!
首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外,Firefox还支持一些更为高级的断点调试、变量监视功能。
其他浏览器里,Opera、Chrome和Safari的调试功能也比较好用。Opera的DragonFly速度相对比较快,界面清爽,功能强大,但不如Safari等友好。相比来说,IE8的程序员工具简直没法用。
这次时间有限,先来总结一下Firefox下的调试技巧。
1. 使用Firebug进行断点调试
使用Firebug调试JavaScript非常方便。具体步骤:
a. 打开Firebug后,启用“脚本”调试,找到引用的脚本文件(或者行内js);
用Firebug找到要调试的脚本(点击放大)
b. 在适当的位置加入断点;
c. 如果断点已经执行过,则刷新页面,这时脚本就会在断点处中断。如果断点没有执行过,那可以直接执行页面上的动作(例如点击按钮等),然后代码会在断点处中断;
用Firebug进行断点调试(点击放大)
d. 观察函数调用栈,观察local变量,也可以进行单步执行,进行调试。
确实非常简单!用Firebug断点调试的优点总结如下:
能加断点的行用绿色行号,非常直观;
call stack用两种方式显示出来,很方便;
本地变量的显示非常清晰明了。
2. 使用JavaScript Debugger进行断点调试
这是老牌的调试工具,之前叫做Venkman,可以以扩展形式安装在Firefox上,我们在这里就称他为Venkman吧。它不仅能够调试页面脚本,还能调试Firefox扩展(extension)里的js。我们在做Firefox扩展开发时,Venkman是必不可少的工具,老田强力推荐!当然,Firefox本身的逻辑实现,也是用JavaScript来做到的。我们现在可以用Venkman来调试一下Firefox本身。Firefox的核心js是browser.js,在这个路径下:
chrome://browser/content/browser.js
我们打开Venkman之后,在Loaded Scripts里填入browser.js,这个js文件就会被过滤出来(如果没有看到browser.js,那么你可能需要查一下是否选上了Debug->Exclude browser files)。
Venkman:选择要调试的js文件(点击放大)
我们找到让浏览器后退的代码,然后点击Firefox的后退按钮,这时Venkman
相关文档:
引言
再来看看function与object的超然结合吧。
在面向对象的编程世界里,数据与代码的有机结合就构成了对象的概念。自从有了对象,编程世界就被划分成两部分,一个是对象内的世界,一个是对象外的世界。对象天生具有自私的一面,外面的世界未经允许是不可访问对象内部的。对象也有大 ......
<input type=button value=刷新 onclick="window.location.reload()">
<input type=button value=前进 onclick="window.history.go(1)">
<input type=button value=后退 onclick="window.history.go(-1)"> ......
在javascript中获取中英文字符长度的问题
var i="中国a";
一般情况下,我们用i.length会得到结果3
但有时候我们需要5,下面的小代码可以解决问题
Java代码
1. <script>
2. alert (fucCheckLength("中国aaaa"));
& ......
js的Function对象在调用过程中具有一个arguoments属性,它是由脚本解释器创建的,这也是创建arguments对象唯一途径。arguments对象可以看做是一个Array对象,它具有length属性,可以通过序号访问每一个参数。而且,通过arguments 的callee属性可以获取对只在执行的Function对象的引用,如下 ......
JavaScript 事件方法
http://www.webdeveloping.cn/blog/?action=show&id=207
事件源对象
event.srcElement.tagName
event.srcElement.type
捕获释放
event.srcElement.setCapture();
event.srcElement.releaseCapture();
事件按键
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
事件返回值
......