《Ext JS权威指南》——3.1节使用Firebug进行调试

简介: 本节书摘来自华章社区《Ext JS权威指南》一书中的第3章,第3.1节使用Firebug进行调试,作者:黄灯桥,更多章节内容可以访问云栖社区“华章社区”公众号查看

第3章 调试工具及技巧
子曰:“工欲善其事,必先利其器。”作为开发人员,好的调试工具是必不可少的。幸运的是,现在JavaScript的调试工具越来越多,也越来越方便。本章将介绍Firebug、Debugbar、IE 9等调试工具,根据你们的喜好选择一款吧,这是必需的。

3.1 使用Firebug进行调试
1.Firebug概述
Firebug是由Joe Hewitt开发的、基于Firefox的一个扩展,是目前最好的Web开发调试工具。它可以在客户端实时编辑、调试和检测任何页面的CSS、HTML和JavaScript。
虽然也可以在其他浏览器中使用Firebug lite,但是功能都不如在Firefox中强大,因而本书没有特别声明时说的Firebug都是基于Firefox环境的。
2011年是Mozilla“疯狂”的一年,Firefox的版本一下子从3.6升级到9,版本更新的速度越来越快,读者可以根据自己的喜好选择一个适合自己的版本。本节的安装过程是在4.0版进行的,与最新的版本可能会有差异,但基本上还是一致的。

  1. Firebug的安装
    打开Firefox后,如图3-1所示,打开Firefox菜单,并选择图中红色圈住部分的“附加组件”。


acc5f7272c94aa8b357f1f5d42b9c0192b300fc0

在如图3-2所示的附加组件管理器标签页的搜索框中输入Firebug并按下回车键。
在如图3-3所示的搜索结果出来后,单击Firebug 1.7.0 条目中的“安装”按钮。
安装完成后将显示如图3-4所示的结果,单击“立即重启”重新启动Firefox,即可完成Firebug的安装。
Firefox重启后会如图3-5所示,在底部多了一个附加组件栏,栏中最右边多了一个臭虫图标,这是Firebug附加的工具按钮。单击可打开如图3-6所示的Firebug工作区域。


6bf4332217fd72f65853a2f9d51ebff0d4d6941d


231d68d0e82b93cfb99400587e5fc053f8fa41a0

如果需要最新版本的Firebug或旧版本的Firebug,可访问http://getfirebug.com/downloads。网站提供的是以xpi为扩展名的Firefox扩展文件,单击后Firefox会如图3-7所示提示你是否允许安装该扩展。单击允许并等待下载完成后将看到如图3-8所示的软件安装窗口,单击“立即安装”后可看到如图3-9所示的立即重启信息。单击“立即重启”即可完成安装。

  1. Firebug的界面
    通过Firefox附加组件栏的Firebug图标或用快捷键F12可打开或关闭Firebug窗口。从图3-6中可看到Firebug主要由工具栏和面板区两部分组成。工具栏按钮的详细说明如表3-1所示。


fb1e6f7318a3948b7e998704a4d19e7995b0434c


f791d4fa833faf6b70fcdb4d260abb6ce0e36ba8

Firebug有控制台、HTML、CSS、脚本、DOM和网络5个基本面板,切换到不同的面板时,面板区的显示会不同。有些基于Firebug的插件会在Firebug内增加自己的面板。
默认状态下只有HTML、CSS和DOM面板是处于活动状态的,而控制台、脚本和网络面板需要启动才能使用。这主要是因为开启这3个面板很占资源,而且容易造成Firefox崩溃,这需要大家做好心里准备。
4.控制台面板
控制台面板的主要作用是显示各种的错误信息(可在面板按钮的下拉菜单中定义),输出脚本调试信息,使用命令行调试脚本,以及检测JavaScript执行时间的概况。
将面板切换到控制台将看到如图3-10所示的面板区。这时面板还没开启,如果要开启所有面板,可在附加组件栏的Firebug图标上单击鼠标右键,在菜单中启用所有面板。如果只开启当前面板,则单击面板中的“启用”,或在工具栏的面板按钮下拉菜单中选择“启用”。启动后的控制台面板将如图3-11所示,它包含工具栏、信息区和命令行3个区域。


1f277e05c0ca1534934d1598ee9f2b5e4fb5887a


015cf9833f9e8555a4d9417d4a20b2865969fe70
相关文章
|
1天前
|
JavaScript 前端开发 开发者
介绍如何在WebStorm中调试JavaScript文件
介绍如何在WebStorm中调试JavaScript文件
6 1
|
1月前
|
JavaScript 前端开发 开发者
JavaScript基础入门之浏览器控制台调试输出
本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.
|
1月前
|
前端开发 JavaScript 开发者
【JavaScript技术专栏】JavaScript错误处理与调试技巧
【4月更文挑战第30天】JavaScript开发中的错误处理和调试至关重要。语言提供三种错误类型:语法错误、引用错误和类型错误。为处理错误,可以使用`try...catch`捕获异常,`throw`语句显式抛出错误,以及`Error`对象创建自定义错误。调试技巧包括使用`console.log`、设置断点、利用源映射和性能分析。这些方法能帮助开发者高效定位和解决问题,提高代码质量。
|
1月前
|
前端开发 JavaScript 安全
JavaScript 权威指南第七版(GPT 重译)(七)(4)
JavaScript 权威指南第七版(GPT 重译)(七)
34 0
|
1月前
|
前端开发 JavaScript 算法
JavaScript 权威指南第七版(GPT 重译)(七)(3)
JavaScript 权威指南第七版(GPT 重译)(七)
45 0
|
1月前
|
前端开发 JavaScript Unix
JavaScript 权威指南第七版(GPT 重译)(七)(2)
JavaScript 权威指南第七版(GPT 重译)(七)
47 0
|
1月前
|
前端开发 JavaScript 算法
JavaScript 权威指南第七版(GPT 重译)(七)(1)
JavaScript 权威指南第七版(GPT 重译)(七)
75 0
|
1月前
|
存储 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(六)(4)
JavaScript 权威指南第七版(GPT 重译)(六)
153 3
JavaScript 权威指南第七版(GPT 重译)(六)(4)
|
1月前
|
前端开发 JavaScript API
JavaScript 权威指南第七版(GPT 重译)(六)(3)
JavaScript 权威指南第七版(GPT 重译)(六)
76 4
|
1月前
|
XML 前端开发 JavaScript
JavaScript 权威指南第七版(GPT 重译)(六)(2)
JavaScript 权威指南第七版(GPT 重译)(六)
73 4
JavaScript 权威指南第七版(GPT 重译)(六)(2)