`
henry_xiajin
  • 浏览: 5755 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

分享:10个帮助你精通Firebug控制台的技巧

 
阅读更多
今天GBin1分享给大家一些jQuery4u撰写的firebug控制台实用技巧,帮助你真正了解并且掌握Firebug控制台。

如果你不知道什么是firebug,那么GBin1建议你查看这篇文章: 主流浏览器中常用的Javascript开发Debug工具,这篇文章我们介绍了什么是Firebug并且如何配置和安装。
技巧1:隐藏烦人的错误

firebug有一些选项可以帮助你隐藏那些烦人的错误信息!(你有可能看到这些错误如果你的代理服务器配置信息过期了,如果你在上班那么和你管理员查验一下是否使用正确的.pac文件)。这些选项也可以帮助你隐藏其它类型的错误!



技巧2:快捷键的使用

使用快捷键而非直接点击”RUN“按钮可以帮助你方便快捷的”运行“,这样效率更高!
技巧3:Firebug控制台表格

创建一个firebug控制台表格 - 简单的拷贝如下代码来看看效果吧!

 
var table1 = new Array(5);
for (var i=0; i<table1.length; i++)
    table1[i] = [i+1, i+2, i+3, i+4, i+5, i+6, i+7];
console.table(table1); 




技巧4: Console.dir()

使用console.dir()而非console.log()的好处在于对于对象,数组及其其它类型,它将直接得显示,这样比较节约时间。你可以简单的输入 dir(对象的名字)  到firebug控制台。 我非常喜欢这个功能。



注意Dir可以没有控制台工作,而log则不行
JQUERY4U = {
    url:'http://www.jquery4u.com',
    mainTopics:'jquery,javascript'
}
dir(JQUERY4U); //works without console.
log(JQUERY4U); //doesn't


技巧5:Console.debug()

使用Console.debug()而非console.log()的好处在于在debug你的js代码时它丢掉了很多让你很烦的垃圾信息。对于经常使用的人来说特别有用。
技巧6:创建书签

你可以使用firebug控制台来快速的创建代码书签。简单的按下:拷贝 > 右键点击书签条 > 点击粘贴。搞定!。现在你随时需要的时候可以点击那个书签来运行代码,甚至为了测试目的。
技巧7:使用Firebug的网络面板

使用网络面板可以帮助大家了解Ajax底层运行的过程和方式,这个是javascript开发中必备的工具



技巧8: Firebug的”add ons"和扩展

这里有很多的firebug扩展和功能项,如果你使用jQuery,不要错过firequery

GBin1分享:Firebug最佳jQuery开发伴侣Firequery

10 Extension Plugins to Extend the Firebug Console
技巧9: Firebug控制台API

如果你不了解什么是Firebug Console API那么你应该查看一下这里:Firebug Console API



技巧10: DOM CSS 样式校验

在Firebug中,你可以很简单的校验任何元素的样式。简单右键单击并且检验元素,然后转到CSS标签页上。在CSS标签页,任何被删除线覆盖的样式意味着已经被另外的样式覆盖了。记住样式有如下的继承顺序: 1)行内(直接写在html代码中)2)页面内 3)样式表。你可以通过双击标签页内样式实时的编辑样式表,用来创建新的样式。非常酷吧!




希望以上的技巧能够帮助大家更好的掌握firebug的使用。
  • 大小: 138.7 KB
  • 大小: 49.4 KB
  • 大小: 62.9 KB
  • 大小: 23.6 KB
  • 大小: 36.5 KB
  • 大小: 93.5 KB
分享到:
评论

相关推荐

    Firebug控制台详解,让调试js代码变得更简单

    NULL 博文链接:https://zzmt2012.iteye.com/blog/2230692

    Firebug控制台动态加载jquery脚本并执行jquery代码

    Firebug控制台动态加载jquery脚本并执行jquery代码

    FireBug 控制台函数

    FireBug 控制台函数说明 FireBug 是一个非常实用的JavaScript以及DOM查看调试工具,是 Firefox 的一个插件。使用 FireBug 调试 AJAX 应用非常方便,终于可以告别 alert 时代了!

    Firebug入门与控制台详解

    fireBug入门及fireBug控制台详解,主要讲解安装Firebug等

    firebug调试技巧

    叫你如何使用firebug调试javascript和jquery,以及如何使用控制台等很多有用技巧

    Firebug 1.2 技巧手册

    Firebug 为你的 Firefox 集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的 CSS、HTML 和 JavaScript 进行实时编辑、调试和监控… Firebug是网站前端开发时最有用,也是最常用的工具之一。掌握...

    firelogger.php:FireLoggerPHP库-集成到Firebug中的记录器控制台

    适用于PHP的FireLogger FireLogger是一个性感PHP记录器控制台,已集成到Firebug(FirePHP的替代方案)中。 前往

    各种Firebug版本和Firefox11.0离线安装包

    Firefox-11.0离线安装包 firebug版本: firebug-1.7.3.xpi firebug-1.8.4.xpi firebug-1.9.1.xpi firebug-1.10.0.xpi 需要的自己下载把!

    firebug1.12-firebug1.11-firebug1.10-firebug1.9-firebug1.8-firebug1.7

    firebug1.12 firebug1.11 firebug1.10 firebug1.9 firebug1.8 firebug1.7

    Firebug中文 web_develope中 火狐2.0.0.14.rar

    到Firebug控制台查看详细,很强大很脑残的说:太方便了(对于扒客一族,扒模版更显神通,我们建议你只拿作技术参考,不要扒得一模一样) 下面我们用web_developer查看一下火狐官网的CSS样式并通过W3C检验下: ...

    [电子书] Firebug 初学者指南 (英文版)

    [Packt Publishing] Firebug 初学者指南 [Packt Publishing] Instant Firebug Starter (E-Book) ☆ 出版信息:☆ [出版机构] Packt Publishing [出版日期] 2013年01月25日 [图书页数] 64页 [图书语言] 英语 [图书...

    FireBug2.0.18

    资源名称:FireBug 2.0.18工具简介:FireBug下载使用说明:Firebug是Firefox的一个插件,Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、...

    firefox插件firebug

    Firebug是firefox的一个插件,Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具。 你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。而且可以在线的时候修改dom非常弹大...

    Firefox_FireBug_调试技巧

    Firefox_FireBug_调试技巧

    WEB开发好助手FireBug

    Firebug是Firefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、...如果你担心它会占用太多的系统资源,也可以方便地启用/关闭这个插件,甚至针对特定的站点开启这个插件。

    firebug-1.12.4b1.xpi

    收集的工具,实际使用无问题,欢迎下载,如不能使用,请及时联系发布者 简介:firebug-1.12.4b1

    软件工程师-Web开发者可能不知道的12个Firebug技巧.docx

    软件工程师-Web开发者可能不知道的12个Firebug技巧

    firebug-2.0.16-是firefox下的一个扩展,能够调试所有网站语言

    Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能...

    FireBug 中文版

    Firebug是Firefox下的一款开发类插件,现属于Firefox的 五星级强力推荐插件firebug.xpi之一。 Firebug 为你的 Firefox 集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的 CSS、HTML 和 Javascript ...

    firefox 及 firebug

    1、Firefox火狐浏览器最新官方版下载 版本:41.0.2.5765 大小:43.1M 更新:2015-10-16 环境:WinXP/Win2003/Vista/Win7/Win8 2、Firebug 2.0.12

Global site tag (gtag.js) - Google Analytics