• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > Firebug 调试器Web开发者应掌握12个初级使用技巧

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含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在每次加载页面后总会自己记得加载前页面所在的位置(比如你已经在浏览页面的底部,此时再加载页面,则新的页面加载后,依然把你带到页面底部)。

您可能想查找下面的文章:

  • Firebug 调试器Web开发者应掌握12个初级使用技巧
  • firebug使用方法 在IE上使用firebug的技巧图文介绍

相关文章

  • 2017-08-06CSS制作图形变形弹出效果的示例分享
  • 2017-08-06移动端Web页面的CSS3 flex布局快速上手指南
  • 2017-08-06CSS使用float属性设置浮动元素的实例教程
  • 2017-08-06简单的二级菜单导航实现css代码
  • 2017-08-06line-height 和 vertical-align 行高与行对齐精解 (图文)
  • 2017-08-06css过渡+3D效果的简单实现
  • 2017-08-06浅析rem和em和px vh vw和% 移动端长度单位
  • 2017-08-06两个table实现固定表头拖动时仅限表体移动
  • 2017-08-06一款利用css3的鼠标经过动画显示详情特效的实例教程
  • 2017-08-06纯css样式实现3角型

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS布局 -- 圣杯布局 & 双飞翼布局
    • CSS3支持IE6, 7, and 8的边框border属性
    • css margin:0 auto居中
    • CSS3 text shadow字体阴影效果
    • CSS 选择器浅谈
    • div css图文混排列表设计中的基础问题总结
    • float元素浮动后高度不一致导致错位的解决办方法
    • Web移动端Fixed布局的解决方案
    • css 省略号 css3让多余的字符串消失并附加省略号的实现代码
    • 纯CSS3实现鼠标悬停提示气泡效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有