源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] Firebug 调试器Web开发者应掌握12个初级使用技巧

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2012-12-26 11:45:53 | 显示全部楼层 |阅读模式
相信很多从事Web开发工作的开发者都听说和使用过Firebug;它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试;本文选取了12个Web开发者应该掌握的Firebug的初级使用技巧,感兴趣的朋友可以参考下

相信很多从事Web开发工作的开发者都听说和使用过Firebug,但可能大部分人还不知道,其实它是一个在网页设计方面功能相当强大的编辑器,它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是Firefox浏览器的一个插件,所以建议各位Web开发者,要充分利用FireFox浏览器和Firebug插件进行日常的调试工作。本文选取了12个Web开发者应该掌握的Firebug的初级使用技巧,介绍给大家。

1、使用Firebug可以找到页面中的任何内容

不知道各位有无遇到过这样的情况,在一个复杂的HTML页面中,当你想找某个页面元素的实际对应的HTML时,你不得不在一大堆HTML代码中去查找,十分麻烦。有了Firebug,现在你只需要在页面中,用鼠标右键选中某个元素,然后在弹出的菜单中,选择“查看元素”,马上就会在HTML页面代码中找到该元素对应的代码了,十分方便,如下图所示:

12个Web开发者应该掌握的Firebug技巧

 同样,也提供了更快速的方法:只需要点Firebug插件左上方的箭头,如下图所示,则每当鼠标在页面中移动时,在Firebug控制台中就马上显示移动时经过的HTML元素的代码:

12个Web开发者应该掌握的Firebug技巧

2、可以使用Firebug修改HTML和CSS

通过Firebug,可以直接修改HTML,增加HTML的属性,删除元素,增加CSS样式及实现更多功能,如下图:

12个Web开发者应该掌握的Firebug技巧

在上图的菜单中可以清楚看到,你可以对HTML元素进行各样的修改操作,方法是先点击HTML部分的代码,然后鼠标右键即可在弹出的菜单中进行操作。

3、可以通过Firebug查看DOM元素和对XML进行操作

当打开一个HTML页通过Firebug查看HTML代码时,你可以同时点在控制面板中的DOM树,就会以DOM的树型结构方式看到整个HTML的结构。而如果你是打开了一个XML文件,那么鼠标右键点XML文件中的任何一个元素,在弹出的菜单中同样可以选择对XML进行相关操作,如下图:

12个Web开发者应该掌握的Firebug技巧

4、使用Firebug调试Javascript代码

在Firebug控制台中,如果要执行调试Javascript代码,只需要首先将Script控制面版启动,然后在点击Console按钮,在下拉菜单中选择显示Javascipt及HTML错误(还可以让用户选择显示更多的错误),接着在底部会发现出现>>>的箭头,在这里,你可以输入Javascipt代码,输入后,马上按回车键,就可以执行了,十分方便,如下图:

12个Web开发者应该掌握的Firebug技巧

一个小技巧是,在输入Javascipt的时候,还支持使用tab键的自动完成提醒功能,比如对于一个很长的Javascipt函数,在没输入完的时候只要按tab键firebug就会帮助你自动补充完整。

5、多次加载页面后Firebug会记得加载前的位置

无论你重复加载多少次页面,Firebug在每次加载页面后总会自己记得加载前页面所在的位置(比如你已经在浏览页面的底部,此时再加载页面,则新的页面加载后,依然把你带到页面底部)。

回复

使用道具 举报

7

主题

2万

回帖

398

积分

中级会员

Rank: 3Rank: 3

积分
398
发表于 2022-8-9 21:22:36 | 显示全部楼层
还有什么好东西没
回复 支持 反对

使用道具 举报

11

主题

2万

回帖

300

积分

中级会员

Rank: 3Rank: 3

积分
300
发表于 2022-12-10 05:31:17 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-5-14 18:08:04 | 显示全部楼层
刷屏刷屏刷屏
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

186

积分

注册会员

Rank: 2

积分
186
发表于 2023-6-12 02:29:03 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

16

主题

2万

回帖

376

积分

中级会员

Rank: 3Rank: 3

积分
376
发表于 2023-7-3 08:50:55 | 显示全部楼层
论坛有你更精彩!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-24 21:21:11 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

347

积分

中级会员

Rank: 3Rank: 3

积分
347
发表于 2023-11-26 09:12:28 | 显示全部楼层
非常vbcbvcvbvcb
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-5-8 21:20:39 | 显示全部楼层
还不错啊
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

221

积分

中级会员

Rank: 3Rank: 3

积分
221
发表于 2024-5-26 14:57:30 | 显示全部楼层
好东西可以可以可以可以
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-24 07:59 , Processed in 0.066377 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表