注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

汇总所有javascrip的调试方法  

2012-11-21 17:01:08|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在我们对前端使用js进行开发时,都会遇到的问题就是js出错的调试问题。在这里我们介绍几种调试方法与大家一起分析,看看大家有没有更好的调试方法可以提升开发效率。

1.使用火狐的firebug插件进行js调试。
2.使用IE自带的开发人员调试工具。
3.使用Microsoft word 2000 宏进行调试。
4.Drosera 开源的WebKit  javascript 调试工具。
5.Dragonfly调试工具。
6.Debugba调试工具。
7.Venkman的Mozilla调试工具。


1.使用火狐的firebug插件进行js调试

    Firebug是Firefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。这是一款让人爱不释手的插件,如果你以前没有接触过它,也许在阅读本文之后,会有一试的欲望。目前最新版本为Firebug1.4。

1、FireFox3.5下载地址(迅雷下载):

thunder://QUFodHRwOi8vZnRwLnBjb25saW5lLmNvbS5jbi9wdWIvZG93bmxvYWQvMjAwOTA4L0ZpcmVmb3hfU2V0dXBfMy41LjJfY2hzLmV4ZVpa

2、FireBug1.4:

http://releases.mozilla.org/pub/mozilla.org/addons/1843/firebug-1.4.2-fx.xpi

3、安装

(1) 首先安装FireFox3.5

(2) 然后双击firebug-1.4.2-fx.xpi,选择打开方式为FireFox3.5(或者直接拖动到FireFox3.5也可)

(3) 重启FireFox3.5,在查看菜单中选择firebug即可查看,具体展开图如下图所示:

汇总所有javascrip的调试方法 - 天涯草 - 天涯草
 

Firebug1.4的应用

如上图所示,我们可以查看到firebug的Tab按钮,具体包括:Console,HTML,CSS,Script,DOM,Net

1、Console控制台

控制台能够显示当前页面中的javascript错误以及警告,并提示出错的文件和行号,方便调试,这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用,你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL,http头以及回馈的内容,原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。


2.使用IE自带的开发人员调试工具。

1.IE选项——>高级——〉“禁用脚本调试(Internet Explorer)”和“禁用脚本调试(其他)”复选框去掉
2.关闭IE,重新打开要调试javaScript的页面,“浏览”菜单——〉“脚本调试程序”打开
3.在弹出的对话框中选择一个调试器
4.在调试器中设置断点
5.回到页面运行javaScript(如点击按钮等以调用要调试的javaScript)


3.使用Microsoft word 2000 宏进行调试。

首先电脑上必须安装了 Microsoft word 2000 以上(我的是WORD2003)。

打开一个word ,在菜单栏目中 选上  工具  --- “宏(M)” ----- Microsoft 脚本编译器(w)”如下图

汇总所有javascrip的调试方法 - 天涯草 - 天涯草
 

根据提示安装编译器。安装完成后会出现一个将WORD转变成代码的界面。<o:p> </o:p>

其次是,将IE浏览器的设置减少,<o:p></o:p>

IE的菜单中 “工具” – Internet 选项 .. ---》“高级”中 <o:p></o:p>

 禁止脚本调试这2个选项‘勾’去掉,如果机器是选上的情况。<o:p></o:p>

如下图

汇总所有javascrip的调试方法 - 天涯草 - 天涯草
 

去掉选择之后,重新打开一个IE,你会发现在IE的菜单“查看“ 栏目中多了<o:p></o:p>

“脚本调试程序“,细心的人就能发现,没装之前是没有这个选项的。<o:p></o:p>

<o:p> </o:p>

如下图<o:p></o:p>

汇总所有javascrip的调试方法 - 天涯草 - 天涯草
 

最后就来调试我们的JS程序了,将页面运行到JS有问题的那一页,

然后点击IE的菜单“查看” --- “脚本调试程序” –》“打开”

(打开的时候可能会有2个提示,选择“确定”就可以)。<o:p></o:p>

在调试之前先做下设置:<o:p></o:p>

在下图的菜单中,“调试”|| “窗口” 中将 “本地变量” “监视” “即时”<o:p></o:p>

给弄出来,他们的作用分别是:<o:p></o:p>

本地变量:所有的Var的值是什么,都会在这里<o:p></o:p>

监视: 当知道变量名字,不知道值的时候,可以在这里输入变量名字,

然后回车就出来值了。<o:p></o:p>

即时:想要改变某个变量的值就在这里操作,输入变量的名字和对应着改变后的值 回车

汇总所有javascrip的调试方法 - 天涯草 - 天涯草
 

F10 是跳过 F11是跟进 (详细的查看调试菜单)<o:p></o:p>

<o:p> </o:p>

出现类似下图的一个界面,在有问题的地方,设下“断点”,刷新页面调试。<o:p></o:p>

汇总所有javascrip的调试方法 - 天涯草 - 天涯草
 

你还在为JS的问题烦恼吗?希望看了这篇文章之后能给你JS生涯有些帮助。

4.Drosera 开源的WebKit  javascript 调试工具。

 
介绍新的除了开源的WebKit  javascript 调试工具。Drosera 是以一个最大类的吃植物的虫子命名的,让你附加和调试任何WebKit 应用而不仅仅是基于Safari。

5.Dragonfly调试工具。
汇总所有javascrip的调试方法 - 天涯草 - 天涯草
6.Debugba调试工具。
汇总所有javascrip的调试方法 - 天涯草 - 天涯草
 

7.Venkman的Mozilla调试工具。
汇总所有javascrip的调试方法 - 天涯草 - 天涯草
 
Venkman是Mozilla的javascript degugger 的代码名称。 它的目的是为火狐提供一个有力的JavaScript调试环境基于浏览器也就是Firefox,Netscape 7.x/9.x 和SeaMonkey.

(天涯草/文)

本文如需转载,并注明出自天涯草网易博客

  评论这张
 
阅读(553)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016