- 浏览: 204628 次
- 性别:
- 来自: 合肥
文章分类
- 全部博客 (156)
- 职场人生 (6)
- 开发时遇见的问题 (14)
- 技术学习 (13)
- Hibernate开发与实战学习 (10)
- Junit (9)
- 设计模式 (4)
- Lucene (1)
- Log4J (1)
- JBPM (0)
- OA (0)
- Spring (0)
- Struts2 (1)
- Android (2)
- Python (1)
- 生活点点滴滴 (8)
- Java (11)
- JavaScript&Jquery (22)
- Hadoop (1)
- JSP&Servlet (8)
- dom4j (2)
- mysql (2)
- Oracle (7)
- PHP (0)
- Jmeter (1)
- 测试方面的东东 (1)
- 励志文章 (3)
- CSS (4)
- XHTML&HTML (1)
- Linux相关 (7)
- C&C++ (2)
- Unix C (3)
- 开发软件配置及软件应用 (2)
- English Study And Movie Scripts (3)
- My English World (1)
最新评论
-
yingzhixing:
不错不错~~
利用org.springframework.web.util中的HtmlUtils工具类 -
yonguo:
博主能把完整的pom配置贴一下共享吗?
在maven中使用YUI-Compressor -
yan578351314:
我的为什么会出现语法错误呢?一大推错误信息...
在maven中使用YUI-Compressor -
jstenjoy:
什么是JBPM -
疯狂的草儿:
cat_rat 写道我是2010年9月份进入公司的--2010 ...
辞职了,离开了我工作的第一家公司
相信很多从事Web开发工作的开发者都听说和使用过Firebug,但可能大部分人还不知道,其实它是一个在网页设计方面功能相当强大的编辑器,它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是Firefox浏览器的一个插件,所以建议各位Web开发者,要充分利用FireFox浏览器和Firebug插件进行日常的调试工作。本文选取了12个Web开发者应该掌握的Firebug的初级使用技巧,介绍给大家。
1、使用Firebug可以找到页面中的任何内容
不知道各位有无遇到过这样的情况,在一个复杂的HTML页面中,当你想找某个页面元素的实际对应的HTML时,你不得不在一大堆HTML代码中去查找,十分麻烦。有了Firebug,现在你只需要在页面中,用鼠标右键选中某个元素,然后在弹出的菜单中,选择“查看元素”,马上就会在HTML页面代码中找到该元素对应的代码了,十分方便,如下图所示:
同样,也提供了更快速的方法:只需要点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中移动时,在Firebug控制台中就马上显示移动时经过的HTML元素的代码:
2、可以使用Firebug修改HTML和CSS
通过Firebug,可以直接修改HTML,增加HTML的属性,删除元素,增加CSS样式及实现更多功能,如下图:
在上图的菜单中可以清楚看到,你可以对HTML元素进行各样的修改操作,方法是先点击HTML部分的代码,然后鼠标右键即可在弹出的菜单中进行操作。
3、可以通过Firebug查看DOM元素和对XML进行操作
当打开一个HTML页通过Firebug查看HTML代码时,你可以同时点在控制面板中的DOM树,就会以DOM的树型结构方式看到整个HTML的结构。而如果你是打开了一个XML文件,那么鼠标右键点XML文件中的任何一个元素,在弹出的菜单中同样可以选择对XML进行相关操作,如下图:
4、使用Firebug调试Javascript代码
在Firebug控制台中,如果要执行调试Javascript代码,只需要首先将Script控制面版启动,然后在点击Console按钮,在下拉菜单中选择显示Javascipt及HTML错误(还可以让用户选择显示更多的错误),接着在底部会发现出现>>>的箭头,在这里,你可以输入Javascipt代码,输入后,马上按回车键,就可以执行了,十分方便,如下图:
一个小技巧是,在输入Javascipt的时候,还支持使用tab键的自动完成提醒功能,比如对于一个很长的Javascipt函数,在没输入完的时候只要按tab键firebug就会帮助你自动补充完整。
5、多次加载页面后Firebug会记得加载前的位置
无论你重复加载多少次页面,Firebug在每次加载页面后总会自己记得加载前页面所在的位置(比如你已经在浏览页面的底部,此时再加载页面,则新的页面加载后,依然把你带到页面底部)。
6、使用$标记去方便访问变量
在上面的第4点中,我们提到了在>>>这个命令行下可以进行Javascript的调试,而另外一个技巧是可以使用如$1去访问曾经访问过的变量中的最后一个,如此类推,可以使用$2访问曾经访问过的变量中的倒数第二个。如下图:
7、Firebug会高亮度显示修改过的内容
在Firebug中,只要你修改过页面中的内容,就会以黄色高亮度显示曾经修改过的内容,如下图:
8、监视Javascript的运行性能
在Firebug中,你可以点控制台中的“profile(概况)”选项,这将开启Firebug的性能监视功能,之后你可以进行页面的一系列操作,当再次点profile按钮后,将停止对性能的监测活动,接着Firebug会显示一个列表,其中会清楚列明操作过程中所涉及的函数,调用次数,占用时间、平均时间,最小时间,最大时间等,如下图所示:
▲(点击图片查看大图)
9、Firebug强大的网络数据监视功能 Firebug还提供了十分功能强大的网络数据监功能。开发者在开发web应用时,经常要观察各类HTTP请求和回应,在这方面Firebug的功能十分强大。首先,只需要开启控制面板中的网络功能,然后在每次运行页面时,都可以清楚看到每个HTTP的请求和HTTP回应的具体细节。如下图: 在上图中,只要点每一个请求旁边的+号,就可以看到该请求的具体细节,如下图: 可以看到,能看到HTTP的头部的各种信息。同样,如果要看当前页面中的比如图片,FLASH等元素的信息等,也可以通过上图去点不同的选项卡去筛选查看,十分方便。 10、使用Firebug的Log功能 在设计页面时,经常要记录下页面的一些信息,这个时候,可以使用Firebug中的log日志功能,把一些信息输出到firebug的控制台中,这样就方便调试了。Firebug提供了一个console对象,在插件加载的时候就注册到Javascript的运行环境中去了,可以在程序中直接使用。console对象提供了一个log方法,举例说明如下: 在Firefox中执行如下代码,会看到Firebug的控制台中出现如下信息: 可以看到,各个级别的日志输出,都带有一个彩色的图标,能给用户很醒目的提醒。同时,console.log 还支持格式化字符串的输出,你可以用类似C语言中printf的语法来调用这个函数:console.log(“%s is %d years old.”, “Bob”, 42)。 11、可以在Firebug中调试程序 在Firebug控制台的的Javascript控制面板中,可以对页面中的Javascript进行调试,方法很简单,只需要在要调试的行的左边单击,就会出现断点了,之后请记住下面常件的快捷键: (1) F10 进入下一行; 12、在Firebug中可以设置带条件的断点 在Firebug中,还可以设置带条件判断的断点,如下图: 总结 Firefox搭配Firebug在web程序设计中,可谓是“双剑合壁”,功能强大,本文只是选取了其中的一些技巧予以介绍,更多的请参考Firebug官方网站的介绍。 转自PHP100
▲(点击查看大图)
console.log('This is log message');
console.debug('This is debug message');
console.error('This is error message');
console.info('This is info message');
console.warn('This is warning message');
</script>
(2) F8继续调试;
(3) F11进入Javascript中的函数体调试;
(4) Shift+F11跳出函数体。
发表评论
-
锋利的jQuery 第三章 jQuery中的DOM操作
2011-02-05 02:04 860第三章 jQuery中的DOM操作 -
锋利的jQuery第二章 选择器
2011-01-31 23:46 987锋利的jQuery第二章 选择器 <!DOC ... -
锋利的Jquery第一章 认识jQuery
2011-01-29 13:34 1105锋利的Jquery第一章jQuery 1.3.1 配置 ... -
fckeditor
2010-12-17 16:24 760下载地址:http://ckeditor.com/downl ... -
JSValidation用户手册
2010-12-17 13:16 11241 . JSValidation是什么? ... -
测试Gadget时,IE7下出现的问题
2010-11-13 08:24 708一个比较弱智的错误: function initSPI ... -
JS中substr和substring的用法和区别
2010-09-10 17:24 765substr 和 substring都是JS ... -
jQuery.extend 函数详解
2010-07-20 16:23 1309JQuery的extend扩展方法: Jqu ... -
判断浏览器的名称和版本的一段javascript
2010-07-07 14:40 949navigator是一个独立的 ... -
FireBug Console API
2010-07-06 14:38 827console.log(object[, object, .. ... -
APtana
2010-07-01 13:29 762http://www.aptana.com/downloads ... -
JS的正则表达式(五)
2010-02-26 15:57 1092exec方法详解 exec方法的返回值 exec方法返回的 ... -
JS的正则表达式(四)
2010-02-26 14:36 1447括号(2) 前面我们曾经讨论过一次括号的问题,见下面这个例子 ... -
JS的正则表达式(三)
2010-02-26 13:28 1162边界与非边界\b表示的边界的意思,也就是说,只有字符串的开头和 ... -
JS的正则表达式(二)
2010-02-26 10:17 1205二选一,正则表达式中的或,“|“ b|c表示,匹配b或者c。 ... -
JS的正则表达式(一)
2010-02-25 16:05 1367创建一个正则表达式有两种方法 //第一种 var reg ... -
JavaScript函数对象
2010-02-24 10:10 810在JavaScript中,函数也是对象,我们使用下面的语句 ... -
JavaScript常用内置对象(三)
2010-02-24 10:03 1049<script language=" ... -
JavaScript常用内置对象(二)
2010-02-24 09:42 926<script language=" ... -
JavaScript常用对象(一)
2010-02-24 09:13 763<Script language="ja ...
相关推荐
### Firebug调试技巧详解 #### 一、引言 在软件开发过程中,错误与调试是不可避免的话题。不论是简单的拼写错误还是复杂的逻辑问题,都可能影响到系统的稳定性和性能。有效的调试工具和技术对于提高开发效率至关...
### Firebug调试详解 #### 一、概述 随着Web应用特别是AJAX技术的快速发展,JavaScript的调试成为确保Web应用程序质量的重要环节。众多调试工具中,**Firebug**因其强大且直观的功能深受开发者喜爱。Firebug是由...
相信很多从事Web开发工作的开发者都听说和使用过Firebug,但可能大部分人还不知道,其实它是一个在网页设计方面功能相当强大的编辑器,它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是Firefox...
它集成了多个功能模块,包括HTML检查器、CSS样式编辑器、网络请求分析器、脚本调试器等,帮助开发者轻松定位并解决网页开发中的问题。 #### 二、Firebug的基本使用 ##### 2.1 调试工具的使用 - **打开Firebug**:...
1. 调试器(Debugger):内置的JavaScript调试器支持断点、步进、变量查看等,功能与Firebug类似。 2. 检查器(Inspector):与Firebug的HTML和CSS面板功能相仿,可实时查看和修改页面元素。 3. 网络工具(Network...
在Web开发领域,Firefox火狐浏览器中的FireBug工具是每一个前端开发者必备的利器。它提供了强大的HTML、CSS、JavaScript调试和性能分析功能,帮助程序员快速定位并修复问题,同时也支持对网络请求的监控。下面我们将...
3. **JavaScript调试**:Firebug的JavaScript调试器是其核心功能之一。它包含断点设置、步进执行、查看变量值、调用堆栈跟踪等功能,使得调试JavaScript代码变得直观且高效。这对于解决复杂的JavaScript逻辑问题非常...
【Firebug】是一款针对Firefox浏览器的强大开发工具,尤其在Web程序设计中扮演着不可或缺的角色。以下将详细介绍Firebug的一些核心技巧,帮助Web开发者提升工作效率。 1. **快速定位HTML元素**:通过右键点击页面上...
Firebug的源码是开源的,因此我们可以深入研究其内部机制,学习到许多实用的开发技巧和编程思路。 1. **HTML检查与编辑**:Firebug提供了实时查看和编辑HTML元素的功能。通过源码,我们可以看到如何实现对DOM树的...
- **增强的JavaScript调试器**:1.9.0版本改进了源代码查看和断点管理,支持单步执行,查看变量值,以及追踪函数调用。 - **DOM查看器**:可以直观地查看和编辑HTML元素,包括其样式和属性,帮助开发者快速定位和...
- **西西软件站.txt**:这可能是一个文本文件,提供了关于在哪里下载或如何使用Firebug的额外信息,或者包含了一些使用技巧或注意事项。 总的来说,Firebug 1.6.2中文版是前端开发者不可或缺的工具,它的各种功能...
在IT领域,特别是软件开发与网页设计中,调试器(Debugger)是不可或缺的工具,它帮助开发者定位并解决代码中的错误或性能问题。本文将基于标题“下载调试器时注意事项”以及描述“为了让你的调试器更好用,请仔细...
火狐浏览器提供了丰富的扩展插件,其中Firebug是开发者们非常喜爱的一款工具,它允许用户在浏览器中直接进行网页调试、元素检查、性能分析等操作,极大地提高了前端开发和优化的效率。 1. **Firefox安装**:Firefox...
Firebug是一款著名的...总的来说,Firebug源码不仅是一个强大的工具,更是一个学习Web开发和调试技术的宝库。深入研究这些源代码,可以提高对Web标准的理解,增强解决问题的能力,并为未来的开发工作打下坚实的基础。
6. **源码理解**:深入研究Firebug的源码,可以学习到许多前端调试技巧,例如DOM遍历、CSS选择器、网络请求监控、性能分析等。同时,还可以了解到如何与Firefox的API进行交互,实现浏览器插件的开发。 7. **自定义...