无废话ExtJs 入门教程八[脚本调试Firefox：firebug]

无废话ExtJs 入门教程八[脚本调试Firefox：firebug]

extjs技术交流，欢迎加群（201926085)
Firebug是一个Firefox插件,功能：HTML查看和即时编辑、控制台、网络状况等，是开发JavaScript、ExtJs的得力调试工具。

一、Firefox的安装.下载地址:

     http://www.mozilla.org.cn
二、Firebug下载地址：

     https://addons.mozilla.org/zh-CN/firefox/search?q=firebug
　  下载后将 firebug 拖入到 firefox 浏览器中即可自动安装。

三、演示[我们以前面讲过的login.htm为例]：

　　我们在开发的时候，最常用的三个firebug功能分别为：查看元素的构成、脚本调试、client与service交互查看

　　1.查看页面元素，现在我们看一按钮的组成结构。

      如下图所示：



 

(1)找开firebug。

(2)点击左下角的小方块[小虫子旁边的]。

(3)然后把鼠标移动到提交按钮的位置[即：我们要查看结构的对象]。

如图所示[默认]：firebug的左侧部分显示的是这个按钮的构成，右侧部分显示的是样式表。

　　2.js脚本调试

(1)我们故意把login.htm的代码改出错，在上节课中59行的位置多加个“,”，如下代码第8行所示。

1  //密码input
2             var txtpassword = new Ext.form.TextField({
3                 width: 140,
4                 allowBlank: false,
5                 maxLength: 20,
6                 inputType: 'password',
7                 name: 'password',
8                 fieldLabel: '密　码',,
9                 blankText: '请输入密码',
10                 maxLengthText: '密码不能超过20个字符'
11             });

(2)点击firebug控制台。

(3)刷新页面后如下图所示:



控制台直接显示错误信息[文件名，行号，列号等]，点击后会直接打开客户端的js文件，并找到出错位置。

在firebug中还可以设置断点，逐步调试，这个功能大家自行看下，这里就不做讲解了。

3.我们在做开发的时候，大部分是与service端做交互，在这方面firebug也做出了很好的帮助调试功能，如下图所示：



点击“网络”--》"xhr"

我们在开发中常用的有"Post"和“响应”

(1)我在client向service以post形式发送了3个参数，分别为：username,password,checkcode。

(2)点击“响应”后会显示service返回给client的返回值。

这样我们就可以很容易的查看client与service端的交互，并且判定错误是出在service端还是client端。

 

活到老,学到老,练到老...

分类:
无废话ExtJs系列教程

好文要顶
关注我
收藏该文联系我








李林峰的园子
关注 - 37
粉丝 - 1827

+加关注

5
0

(请您对文章做出评价)

«
上一篇：无废话ExtJs 入门教程七[登陆窗体Demo：Login]
»
下一篇：无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]

posted on 2012-06-23 09:36
李林峰的园子 阅读(15415) 评论(4)

编辑
收藏

发表评论

  
#1楼
2012-06-24 16:49 |
牛腩
 

好东西。。学习学习。
支持(0)反对(0) http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u41249.jpg
  
#2楼
2012-07-13 09:49 |
kimifdw
 

学习学习
支持(0)反对(0)

  
#3楼
2014-03-23 14:59 |
zkzkzk45
 

大赞
支持(0)反对(0)

  
#4楼33372322015/12/29
16:30:29 2015-12-29 16:30 |
ouni
 

真的很棒，第一次不看视频，只看文档还看进去了，很喜欢楼主的例子！会继续关注的
支持(0)反对(0)

刷新评论刷新页面返回顶部