Firebug Tutorial – Overview of Firebug

Stella981
• 阅读 605

Firebug Tutorial – Overview of Firebug

September 8, 2007

Firebug Tutorial – Overview of Firebug
A few words from me

It has been over 1 year that I’m using Firebug in web development. I found it very useful. I’m really thank to SangSing who introduces me about Firebug. I used to encourage a lot of my techie friends to use Firebug but they said that they don’t know how to use it. They told me that they wanna get something that include all features of firebug and examples. I googled a lit bit but I didn’t find nice resources that covers everything about firebug. So, I decided to write this tutorial. I will try to cover all features of firebug as much as I can. I will show each features with sample sourcecode and screenshot if it required. Don’t hesitate to contact me if you have any suggestion or comment.

There are 5 sections in this tutorial.

  • Section 1: Overview of Firebug : An introduction of Firebug and feature lists, how to install it and a few notes

  • Section 2: Logging, Tracing and CommandLine : Everything related to Console tab. An introduction of CommandLine windows which is the same as Immediate windows or Watch window from Visual Studio.

  • Section 3: HTML DOM Inspector and HTML CRUD operation : This section will tell you about what HTML inspecting is, how to inspect the HTML element, why it is useful and etc. I will also show you how to create/update/delete the HTML DOM dynamically in HTML tab.

  • Section 4: Javascript debugging with Firebug : This section will cover everything about javascript debugging which is the most famous feature of Firebug. It will also show you how to use Console tab while debugging the Javascript.

  • Section 5: CSS, DOM and Net Tab : (I haven’t decided whether I should write about them in one section or not. )

As I said above, I will try to cover as much as possible. If I miss out something in this tutorial, please let me know. I appreciated it.

Getting Started : Overview of Firebug

Note: I will cover some basic understanding about firebug and its features, installation and a few screenshots in this section. So, if you already have some ideas about Firebug, you may probably skip this section.

Firebug Tutorial – Overview of Firebug

What is Firebug?

Firebug is one of the most popular Mozilla Firefox’s extensions (a.k.a addon). It is also a tool that make the web developers’ life easier. It includes a lot of cool features such as debugging, HTML inspecting, profiling and etc which are very useful for web development.

Features

  • Javascript debugging
  • **Javascript CommandLine
    **
  • Monitor the Javascrit Performance and XmlHttpRequest
  • **Logging
    **
  • Tracing
  • **Inspect HTML and Edit HTML
    **
  • Edit CSS

Where to get Firebug Addon?

  • Go to the official firebug website http://getfirebug.com .
  • There is the image as below at the right-side of the firebug website. Click this image to install.

Firebug Tutorial – Overview of Firebug

  • The following dialog will be shown after clicking the image above. Click to “Install Now” button.

Firebug Tutorial – Overview of Firebug

  • After the installation is completed, you need to restart the browser.

Screenshots

Main Menu (under “Tools” Menu)

“Firebug” and “Error Console” menu will be shown under “Tools” menu of Firefox.

Firebug Tutorial – Overview of Firebug

  • Firebug : It is just a placeholder for Firebug’s submenus.
  • Error Console : If you click this menu, one console window will be launched with the list of errors, warnings and message. Actually, this error console is the same as the console tab from Firebug console.

Firebug Menu

If you click “Firebug” menu under “Tools”, the following submenus will be shown.

Firebug Tutorial – Overview of Firebug

  • Open Firebug : Open the firebug console within the browser. If you don’t wanna click this menu, you can simply press “F12′ to open the firebug console.
  • Open Firebug in New Window : Open the firebug console in separated window.
  • Disable Firebug : It is for disabling firebug. This option is very important. You should disable the firebug if you don’t need it because If you don’t disable the firebug, it might be a lit bit slow to surf the Ajax-enabled websites like GMail.
  • Disable Firebug for **** : You can disable the specific website instead of disabling the whole firebug.
  • Allowed Sites : You can add the list of website that you want to surf with Firebug enabled option.
  • Inspect the Element : This menu is for inspecting the HTML element. Please read more about this in section 3.
  • Profile Javascript : This option is available in Firebug enabled mode only. It is used for monitoring the execution of javascript code. This option is really useful when you have performance issue with your code. Please read more about this in Section 4.
  • Clear Console : Clear the console tab of Firebug console.
  • CommandLine : Open the console tab
  • Search : Set the focus to the Search textbox of current tab.

Content Menu

There is only one menu called “Inspect Element” in content menu. This menu is very useful. Please read more about this in Section 3.

Firebug Tutorial – Overview of Firebug

Firebug Console

The picture below is Firebug console.

Firebug Tutorial – Overview of Firebug

It contains six tabs such as Console tab, HTML tab, CSS tab, Script tab, DOM tab and Net tab.

  • Console tab : It is for logging, profiling, tracing and commandline.
  • HTML tab : It is for inspecting HTML element, editing HTML and changing the stylesheet at runtime. CSS, Layout and DOM console are already included as the subtabs.
  • CSS tab : You can check how many css file included in the webpage easily. You can simply select the CSS file that you like and you can made the changes to that file on the fly. (I don’t use that tab that much since the same one is already included in HTML tab. )
  • Script tab : It is for debugging Javascript code. Watch and Breakpoints consoles are the subtab of Script tab.
  • DOM tab : It is for exploring DOM. (I don’t use that tab that much. Instead, I used to use DOM tab from HTML console and Script tab.)
  • Net tab : It is for monitoring network activities. It helps you to know why your page (or a particular webpage) is taking so long to load in the browser.

Status Bar

You will see the green cycle if there is no error on your page.

Firebug Tutorial – Overview of Firebug

You will see the red cycle and the count of errors if there is some errors in your page.

Firebug Tutorial – Overview of Firebug

Keyboard and Mouse Shortcuts

F12. I used to use only F12 to open/close the Firebug console.

If you wanna read the completed list of shortcuts, you can check-out here.

Problem?

Please check-out this FAQ page.

If you still have problems, you drop a comment in my blog. I will reply as soon as possible. Or you can probably contact with Firebug User Group.

Conclusion

That’s all. :) I think you now have some ideas about what firebug is, how it looks like and how to install. If you are already familiar with firebug, this section will be too plain for you since I didn’t put anything new in this section. I will tell you more details about each tab in next section. So, come back tomorrow!!

Feel free to let me know if you have any idea or comment about this tutorials. Your comment will make this tutorials better. I appreciate it.

Firebug Tutorial – Overview of Firebug

Firebug Tutorial – Overview of Firebug

posted in Firebug, Firefox by Michael Sync

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
28篇论文、6大主题带你一览CVPR2020研究趋势
  !(http://dingyue.ws.126.net/2020/0625/c176bdbej00qchkrg001ld200p000ang00it0080.jpg)  编译|陈大鑫  编辑|丛末  首度于线上召开的CVPR2020会议已经落下帷幕。今年,大会共有1467篇论文被接收,共举办了29个Tutorial、64
Wesley13 Wesley13
3年前
P2P技术揭秘.P2P网络技术原理与典型系统开发
Modular.Java(2009.06)\.Craig.Walls.文字版.pdf:http://www.t00y.com/file/59501950(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.t00y.com%2Ffile%2F59501950)\More.E
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这