`

Firefox调试经验与技巧

阅读更多

如果不了解可以先“点这里 ”看 看什么是Firebug。简单来说,Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DOM和JavaScript的扩展 工具。
我们先到Firebug的主页http://getfirebug.com/ 上下载最新的版本装上,下面开始调试:
1、查看、编辑HTML元素及其CSS
安装好Firebug之后,你可以通过点击浏览器右下方的小虫子打开Firebug,如图:



或者直接按F12,如果要以窗口形式打开的话,就按下CTRL+F12
打开Firebug之后,点击“查看”,然后选择页面上任何需要编辑的地方,Firebug会将其选中,并且在HTML结构中将其高亮,如图:



之后你可以对该元素的HTML结构、属性进行任意的编辑,修改后的效果都会实时的展现在页面当中。
同时在Firebug的右侧是该元素对应的CSS样式,如下图:



图中的样式,显示了该元素被重新定义的样式继承关系,比如“继承自body.CurHome”的“text-align”属性被“继承自 div.shell”的“text-align”覆盖,原先的属性就会以中横线的形式表示出来。如果要查看所有的属性,请勾选图中标“1”的选项。
单击“2”可以禁用/打开某条CSS属性;单击任意一个属性或者属性值可以进行CSS的编辑,如“3”;双击“4”则可以新建一条CSS属性。现在我们点 击下“5”来看看CSS布局面板:



上面这幅图展现的是一个HTML结构的标准盒模型,通过点击相应的数值可以修改该值,同时在浏览器窗口中显示出对应的效果来。
2、查看动态生成的HTML代码的方法
通过“查看源代码”的方法,无法看到由JS动态生成的HTML结构,这里我们可以通过Firebug来查看,如下图,选中“body”节点,按下 “编辑”,即可输出页面上源文件的代码以及动态生成的代码。



还有另外一种简单的方法,选中你要查看的页面元素,然后在右键菜单中选择“查看选中部分源代码”
3、查看/测试页面的函数执行效率
查看页面上所有函数执行效率可以很容易的找到运行最慢的函数,从而帮助WD有针对性的进行页面的JS优化。如图,为需要调试的页面“启用控制台”:



点击“概况”开始收集,再次点击即可停止,然后进行查看。
在firebug控制台的最底下是一排命令行,在这里你可以输入任意JS语句,按下回车键即可执行:



使用console,还可以测试一段代码或者函数的执行时间,点击命令行最右侧的红色按钮切换到命令行多行模式:



4、使用Firebug查看XMLHttpRequest
使用Firebug查看XMLHttpRequest,对于调试AJAX是很有帮助的。如图:




为需要调试的站点开启“网络”监控功能,其实该功能可以查看页面上所有类型的post和get请求,并且还会显示出请求消耗的时间。对于 XMLHttpRequest会有详细的参数与返回值。
5、查看页面上所有的CSS与JS
在页面调试中我们发现,对于外部引用的CSS与JS很难进行调试,使用基于Firebug的Yslow扩展即可解决该问题。首先在Yslow的主页 上下载一个最新的版本装上:http://developer.yahoo.com/yslow/



在Firebug小虫子的右边就是Yslow,后面的数值是当前页面完全加载所消耗的时间,点击Yslow即可打开(或者通过Firebug的 Yslow面板,运行“Performance”进行页面分析)。



如上图,选择“All JS”后,当前页面的所有内部JS和外部JS都会被显示在一个新开的页面中,这样查看页面上所有的JS源代码就变得方便多了。
6、查看页面上所有的资源列表
其实前面第四点介绍到的“网络”功能就可以查看所有资源列表,而且可以通过查看状态来进行对应的优化(例如排查404元素)。这里可以通过 Yslow的components功能看到到包括类型与详细路径的资源列表:



鼠标hover可以看到对应的缩略图,点击则可在新窗口中打开。更多Yslow功能请查看其主页http://developer.yahoo.com/yslow/
7、使用Firecookie调试页面cookie
Firecookie是基于Firebug的cookie调试工具,先到作者的主页上了解下详细信息,再下载一个安装上。
http://www.softwareishard.com/blog/firecookie/
安装好之后,Firebug中会多出一个“cookie”面板,你可以为需要调试的页面添加、删除、修改cookie信息。



From : I forgot

 

分享到:
评论

相关推荐

    Firefox调试工具

    描述中提到的"1.0适合Firefox2.0,1.2适合Firefox3.0",这指的是早期Firebug的版本与Firefox浏览器版本的适配性。随着Firefox的升级,开发者工具也不断更新,以支持新的Web技术并提高用户体验。 9. **使用技巧** ...

    火狐浏览器调试技巧.rar

    火狐浏览器,全名Mozilla Firefox,是一款开源且广受欢迎的网络浏览器,以其强大的功能和对开发者友好的特性而闻名。调试技巧是开发过程中不可或缺的一部分,它可以帮助开发者快速定位和解决问题,提升网页应用的...

    FireFox如何调试ajax

    首先,我们需要在Firefox上安装一个名为"Firefox Developer Tools"的内置调试套件,这个工具集在Firefox 2.0.0.20及更高版本中是默认提供的。在较早的版本中,它可能需要手动启用或升级。开发者工具提供了多种功能,...

    JavaScript调试(Firefox) 手册

    通过以上步骤和技巧,你可以有效地使用Firefox的Venkman调试JavaScript代码,解决网页交互中的各种问题。记住,熟练掌握调试工具是每个优秀Web开发者必备的技能,它能让你更高效地定位和修复代码中的bug,提升开发...

    javascript 调试工具/教程,支持浏览器IE firefox

    JavaScript是一种广泛应用于网页和网络应用的编程语言,它在客户端运行,为用户...通过阅读压缩包中的"JavaScript调试(Firefox).rar"和"JavaScript调试(IE).rar"文档,你可以更深入地学习这两个浏览器的具体调试技巧。

    firefox调试工具

    Firefox调试工具是Web开发者在构建和优化网页及应用程序时不可或缺的利器。这款强大的工具集提供了丰富的功能,包括元素检查、网络监控、JavaScript调试、性能分析等,帮助开发者深入理解页面的工作原理并解决潜在...

    可工作在任何地方的Firefox调试器

    总的来说,这篇文章可能涵盖的内容广泛,从基本的JavaScript调试技巧,到高级的远程调试和性能优化,以及Firefox调试器的最新更新。学习和掌握这些内容,对于提升Web开发者的技能和工作效率大有裨益。

    Firefox火狐浏览器官方10.0.2-win32版本exe安装包

    本文将针对“Firefox火狐浏览器官方10.0.2-win32版本exe安装包”进行详细介绍,包括其特性、安装过程、配置方法以及实用技巧,旨在帮助用户更好地理解和使用这一强大的浏览工具。 1. 版本特点:Firefox 10.0.2是...

    firefox插件开发,firefox plugin 开发 firefox 扩展 开发

    火狐浏览器(Firefox)插件开发涉及一系列技术与步骤,主要目标是创建增强或定制浏览器功能的软件组件。以下是对标题和描述中提及知识点的详细解释: 1. **开发环境搭建**: - 使用`-no-remote -P develop`参数...

    9种使用Chrome Firefox 自带调试工具调试javascript技巧.docx

    ### 使用Chrome与Firefox自带调试工具调试JavaScript的九种技巧 #### 一、使用`debugger`语句 在JavaScript开发过程中,`debugger`语句是一个非常强大的工具,它可以让你在代码执行到这一行时自动暂停,从而进行...

    Firefox火狐浏览器官方Setup 59.0.1-win64版本exe安装包

    《Firefox火狐浏览器59.0.1-win64版本:深入解析与使用指南》 Firefox火狐浏览器,由Mozilla基金会开发,是一款全球知名的开源网络浏览器。本文将围绕"Firefox火狐浏览器官方Setup 59.0.1-win64版本exe安装包"展开...

    Firefox-full-latest

    10. **社区支持**:Firefox拥有活跃的用户社区,用户可以在论坛、邮件列表和社交媒体上交流问题、分享技巧,获得及时的帮助。 综上所述,“Firefox-full-latest”代表的不仅是最新版的Firefox浏览器,还体现了其在...

    Firefox火狐浏览器官方Setup 68.1.0esr-win64版本exe安装包

    《Firefox火狐浏览器68.1.0esr-win64版本详解》 Firefox火狐浏览器,由Mozilla基金会开发,是一款开源、免费的网络浏览器,以其强大的安全性、隐私保护和高度可定制性著称。本篇文章将深入探讨Firefox 68.1.0esr-...

    Firefox火狐浏览器官方55.0-win32版本exe安装包

    《Firefox火狐浏览器55.0-win32版本:深入解析与使用指南》 Firefox火狐浏览器,由Mozilla基金会开发,是一款全球广受欢迎的开源网络浏览器。55.0-win32版本是针对Windows 32位操作系统设计的,以其强大的功能、...

    Firefox火狐浏览器官方50.0-mac版本dmg安装包

    **Firefox火狐浏览器** Firefox,又称为火狐浏览器,是由Mozilla基金会开发的一款开源网络浏览器,以其安全性、可定制性和开放源代码的特点深受用户喜爱。Firefox 50.0是该浏览器的一个具体版本,针对macOS操作系统...

    9种使用Chrome Firefox 自带调试工具调试javascript技巧

    8. **直接在Firefox中调试Ajax请求**:与Postman相比,Firefox的网络面板允许直接编辑和重新发送Ajax请求,无需离开浏览器。这对于快速调整请求头和参数非常方便。 9. **中断节点变更**:Chrome允许在DOM元素变更时...

Global site tag (gtag.js) - Google Analytics