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

extjs技术交流,欢迎加群(338456177): 程序员俱乐部-ExtJs(3群)

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.查看页面元素,现在我们看一按钮的组成结构。

      如下图所示:

无废话ExtJs 入门教程八[脚本调试Firefox:firebug]_第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)刷新页面后如下图所示:

无废话ExtJs 入门教程八[脚本调试Firefox:firebug]_第2张图片

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

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

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

无废话ExtJs 入门教程八[脚本调试Firefox:firebug]_第3张图片

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

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

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

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

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

 

你可能感兴趣的:(firefox)