查看文章
firefox Venkman调试javascript
2008-03-24 09:35
调试javascript一直是令我头疼的问题,反复添加alert,刷新网页去找问题。
用mozilla的Venkman就方便多了,但是装了以后不会用,网上关于Venkman的中文文档几乎没有,只能去啃这个e文的http://www.svendtofte.com/code/learning_venkman/index.php。
下载安装Venkman: http://www.hacksrus.com/~ginda/venkman/
使用 Firefox 的用户需要另外安装一下:
安装后重起firefox,从工具菜单打开javascript debugger:
弹出下面的窗口:
基本调试:
打开http://www.svendtofte.com/code/learning_venkman/venkman_example_1.html这个网页,打开Venkman,左边有这样的信息:
Loaded scripts panel
双击文件名,页面的源代码就出现在右边的代码窗口了。
Source code displayed by Venkman(需要注意的是:Venkman是javascript调试器,不是编辑器,你不能再Venkman中编辑代码。)
点击文件名前面的+号,会展开代码中的元素,比如上面的test()函数。点击test,右边的代码窗口test()函数会出现被选中的变化:
Source code displayed by Venkman
VenkMan的相关图形颜色含义:
J JavaScript (.js)
H Hypertext Markup Language (.html, .htm)
Z eXtensible Userinterface Language (.xul)
X eXtensible Markup Language (.xml)
Z All other files
Z JavaScript function
调试窗口下面的命令行可以输入javascript语句,结果显示在信息窗口:
输入1+1:
Interactive session
输入String.fromCharCode(b) + "B"
Interactive session
设置调试环境:
Setting an element as the evaluation object
现在就可以在这个网页的基础上进行调试了,输入document.title试一下:
Interactive Session
输入test(),自然就是运行代码中的test()函数了。
现在点击venkman_example_1.html 中的"move to ne"跳转到:
http://www.svendtofte.com/code/learning_venkman/venkman_example_2.html
设置调试环境为venkman_example_2.html,你可能已经注意到Venkman上面的工具条中间的按钮都不能用,现在你点击stop,变成下面这个样子:
Venkman toolbar
stop的意思是不管js是否在运行,都停止,进入"waiting-for-something-to-happen"模式。
现在转回到firefox的窗口,刷新一下venkman_example_2.html这个页面,你会看到Venkman跳出来了:
Venkman paused
javascript的运行截止在黄色代码那行,现在上面的按钮就可以用了,点击一下Continue,代码继续运行,网页上会显示运行结果。
本的调试大概就是这样子,http://www.svendtofte.com/code/learning_venkman/index.php上面还有更多的调试技巧,上面这些做简单调试够用了,剩下的以后翻译。
firefox Venkman调试javascript
2008-03-24 09:35
调试javascript一直是令我头疼的问题,反复添加alert,刷新网页去找问题。
用mozilla的Venkman就方便多了,但是装了以后不会用,网上关于Venkman的中文文档几乎没有,只能去啃这个e文的http://www.svendtofte.com/code/learning_venkman/index.php。
下载安装Venkman: http://www.hacksrus.com/~ginda/venkman/
使用 Firefox 的用户需要另外安装一下:
安装后重起firefox,从工具菜单打开javascript debugger:
弹出下面的窗口:
基本调试:
打开http://www.svendtofte.com/code/learning_venkman/venkman_example_1.html这个网页,打开Venkman,左边有这样的信息:
Loaded scripts panel
双击文件名,页面的源代码就出现在右边的代码窗口了。
Source code displayed by Venkman(需要注意的是:Venkman是javascript调试器,不是编辑器,你不能再Venkman中编辑代码。)
点击文件名前面的+号,会展开代码中的元素,比如上面的test()函数。点击test,右边的代码窗口test()函数会出现被选中的变化:
Source code displayed by Venkman
VenkMan的相关图形颜色含义:
J JavaScript (.js)
H Hypertext Markup Language (.html, .htm)
Z eXtensible Userinterface Language (.xul)
X eXtensible Markup Language (.xml)
Z All other files
Z JavaScript function
调试窗口下面的命令行可以输入javascript语句,结果显示在信息窗口:
输入1+1:
Interactive session
输入String.fromCharCode(b) + "B"
Interactive session
设置调试环境:
Setting an element as the evaluation object
现在就可以在这个网页的基础上进行调试了,输入document.title试一下:
Interactive Session
输入test(),自然就是运行代码中的test()函数了。
现在点击venkman_example_1.html 中的"move to ne"跳转到:
http://www.svendtofte.com/code/learning_venkman/venkman_example_2.html
设置调试环境为venkman_example_2.html,你可能已经注意到Venkman上面的工具条中间的按钮都不能用,现在你点击stop,变成下面这个样子:
Venkman toolbar
stop的意思是不管js是否在运行,都停止,进入"waiting-for-something-to-happen"模式。
现在转回到firefox的窗口,刷新一下venkman_example_2.html这个页面,你会看到Venkman跳出来了:
Venkman paused
javascript的运行截止在黄色代码那行,现在上面的按钮就可以用了,点击一下Continue,代码继续运行,网页上会显示运行结果。
本的调试大概就是这样子,http://www.svendtofte.com/code/learning_venkman/index.php上面还有更多的调试技巧,上面这些做简单调试够用了,剩下的以后翻译。