`
henry_xiajin
  • 浏览: 5855 次
  • 性别: 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代码变得更简单

    **Firebug控制台详解** Firebug是一款非常强大的Web开发和调试工具,尤其在JavaScript的调试方面,它提供了直观且高效的功能。Firebug是Firefox浏览器的一个扩展插件,它允许开发者实时查看、修改和分析HTML、CSS、...

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

    1. **动态加载jQuery脚本**:在没有预加载jQuery的情况下,我们可以在Firebug控制台中使用`document.createElement('script')`方法创建一个新的script元素,然后设置其`src`属性为jQuery库的URL。例如: ```...

    FireBug 控制台函数

    在FireBug中,控制台(Console)功能为网页提供了一个专门的日志记录环境,开发者可以通过一系列控制台函数来输出和管理日志信息。这些函数不仅可以帮助开发者记录程序运行时的状态,还能根据不同的日志级别进行筛选和...

    Firebug入门与控制台详解

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

    Firebug 1.2 技巧手册

    ### Firebug 1.2 技巧手册 #### 概述 Firebug 是一款功能强大的浏览器插件,专为 Firefox 设计,旨在帮助开发者轻松调试和优化网页性能。这款插件集成了丰富的工具,允许用户实时编辑 CSS、HTML 和 JavaScript,并...

    firebug调试技巧

    本文旨在深入探讨如何使用Firebug进行JavaScript和jQuery的调试,并分享一些实用的技巧。 #### 二、深入解析Firebug的调试功能 ##### 2.1 检查常规错误 当浏览器遇到JavaScript错误时,Firebug会自动在控制台显示...

    Firebug使用详解

    Firebug控制台包含两个主要区域:功能区和信息区。功能区的标签(如HTML、CSS、Script等)决定了信息区显示的内容。Options选项、搜索框的搜索方式也会根据所选标签有所不同。 ### Firebug主菜单功能 - “Disable ...

    2021-2022年收藏的精品资料软件工程师Web开发者可能不知道的12个Firebug技巧.docx

    以下将详细介绍Firebug的一些核心技巧,帮助Web开发者提升工作效率。 1. **快速定位HTML元素**:通过右键点击页面上的元素并选择“查看元素”,Firebug能立即在HTML源代码中定位到该元素,使得在复杂页面结构中查找...

    Firebug各大版本

    本压缩包包含了Firebug的多个版本,让你可以在不同环境中进行测试或回溯到特定版本以解决兼容性问题。 1. **Firebug的历史版本**: Firebug的发展历程见证了Web开发工具的演变。自2006年首次发布以来,Firebug经历...

    firefox_firebug

    7. **命令行**:提供一个交互式的JavaScript控制台,可以运行JavaScript代码并查看结果。 **Firefox + Firebug的结合使用:** 当Firefox与Firebug结合使用时,开发者可以实现以下目标: 1. **问题排查**:在实际...

    firebug及其安装方法

    2. **CSS调试**:通过Firebug,你可以看到每个元素的CSS样式,包括盒模型信息,可以即时修改样式,观察页面变化。 3. **JavaScript调试**:提供了源代码查看、断点设置、变量监控等功能,帮助开发者调试JavaScript...

    firebug.7z

    本压缩包包含从firebug-1.7.3到firebug-1.12.7-fx.xpi的多个版本,覆盖了火狐50以下的版本兼容性。 1. **Firebug功能详解:** - **HTML检查**:Firebug可以让你实时查看和修改页面的HTML结构,直观地看到元素的...

    firebug firebugfirebugfirebugfirebug

    3. **JavaScript控制台**:提供了一个交互式的JavaScript环境,可以运行脚本、查看输出、追踪变量值,以及调试代码。这对于找出JavaScript错误和性能瓶颈至关重要。 4. **网络面板**:显示所有网络请求(如图片、...

    最新版fireBug插件

    3. **控制台输出**:FireBug的控制台面板可以显示JavaScript的运行日志,包括警告、错误信息以及自定义的console.log()输出。这对于跟踪代码执行过程和调试错误非常有帮助。 4. **DOM查看**:通过DOM面板,你可以...

    Firefox_FireBug_调试技巧

    本文将深入探讨Firefox Firebug的调试技巧,帮助你提升Web开发效率。 一、Firebug的安装与开启 1. 安装:访问Mozilla Add-ons网站(https://addons.mozilla.org/zh-CN/firefox/addon/firebug/),搜索"Firebug"并...

    firebug 1.2中文版

    10. **社区支持**:Firebug有着庞大的开发者社区,这意味着你可以在遇到问题时找到丰富的资源和解决方案,与其他开发者交流经验。 Firebug作为早期Web开发的必备工具,为后来的开发者工具如Chrome DevTools奠定了...

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

    这只是一个基本的示例,实际应用中,你可以根据需要选择记录不同级别的日志,输出复杂数据结构,或者进行更深入的性能分析。通过结合FireLoggerPHP库和浏览器的调试工具,开发者可以更加直观地理解和优化PHP应用程序...

    FireBug 使用

    - **功能区域**位于 Firebug 控制台的顶部,包含了多个标签页,每个标签页对应不同的功能: - **HTML:** 查看并编辑网页的 HTML 结构。 - **CSS:** 查看并编辑网页的 CSS 样式。 - **Script:** 调试 JavaScript ...

    firebug源代码

    3. **JavaScript调试**:Firebug内置了JavaScript控制台,可以设置断点、单步执行、查看变量值,以及分析函数调用堆栈,对于JavaScript代码的调试极为便利。 4. **网络监控**:它能够跟踪并分析页面加载时的HTTP...

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

    本文将详细介绍12个高级且实用的Firebug技巧,帮助Web开发者提高工作效率。 #### 二、技巧详解 1. **使用Firebug快速定位页面元素** 在复杂的HTML页面中寻找特定元素是一件令人头疼的事情。Firebug提供了一种...

Global site tag (gtag.js) - Google Analytics