in Firebug

Firebug Tutorial : Section 4 – Net, CSS and DOM tabs

This is the last post of Firebug tutorial series. I’m going to explain about Net panel, CSS panel and DOM panel in this tutorial. As there are not so much things to say about that, I’m gonna write up about all three panels in one post.

#1. Net Panel

Net Panel - Firebug

The Net Panel can be used for measuring the performance of your webpage. It shows very useful informations about how long your webpage takes to load, the size and loading time of each and every files (i.e: image files, css, js file and so on.) of your webpage. if you are looking for the way to improve the performance of your webpage, you just need to check the NET panel after loading your page and see which files took so long to load.

1.1. What is Net panel showing?

Let’s take a lot what kinda information NET panel shows for you. There are four columns in NET panel.

  1. Name of files : The first column at the left-side shows the name of each and every files that are included in your webpage.
  2. Base URL : The second column shows the base URL of each file. If you are using some files from other sites (eg: linking image from other site, putting ads in your blog ) then the different URL(s) will be shown in this column.
  3. Size : The third column shows the size of each file.
  4. Loading Time : The last column shows the loading time of each file and whether those files are loaded from cache or not. It also show the status of each file in different colors as below. ( Thanks to Jack Sleight for the explanation of color and its description )
    1. Green : Loading the file from server.
    2. Dark Grey : Request sent to server, file loaded from server
    3. Light Grey: Request sent to server, “Not Modified” received, file loaded from the cache.
    4. No bar for the file: No request sent to server, file loaded from cache

You should also note that the list of files showing in the Net panel are sorted based on the order of how Firefox loaded those files.

1.2. HTTP Headers

The Net panel shows the HTTP headers of every request/response messages so you can easily find out the interesting information like the parameters that are passed to server, the type of webserver, cookies and etc.

HTTP Header

1.3. Filter the requests by type

If there are a lot of requests shown in Net panel, you can filter all of those requests based on the type of requests. For example, If you like to check the requests for image only then you can click the button called “Images” on toolbar to filter the requests for images.

1.4. Full path of files and Image Preview

If you move your cursor on the name of file (at the first column of Net panel), it will show you the full path of the file as a clickable link. If it is an image file then the actual image will be shown as a preview in Net panel. (Please check-out the pic below.)

Summary about Net panel

  • It shows the headers for request/response messages for all kind of requests
  • It can be used for XMLHttpRequest monitoring ( The Console panel does this too. You may check “Tracing XmlHttpRequest object” in this tutorial. )
  • It sorts the files based on how Firefox loaded those files.
  • It shows the loading time, the size of each and every files.
  • It shows a particular file is loaded from server or cache.
  • Net panel is a packet sniffer. ( not like YSlow which is a DOM crawler.)

Well. that’s all about Net panel. What do you think? Please leave a comment if you have any suggestion or comment.

#2. CSS Panel

The CSS panel allows you to view/edit the stylesheet of your page. It is just very simple panel and doesn’t have so much feature in it.

2.1. List of CSS files

To see all CSS files of your page, just click the button (“michaelsync.net” for my case) beside “Edit” button. Then, the content menu will be shown and all CSS files will be listed on that menu. So, you can simply click any CSS file that you wanna view.

2.2 Normal Mode Vs Editable Mode of CSS Panel

Like HTML tab, it has normal mode and editable mode. If you click “Edit” button on the toolbar of CSS panel, it will become the editable mode.

Normal Mode

  • Advantages
    • It shows the highlighted CSS syntax so looks nice.
    • It allows you to edit the attribute of CSS class.
    • It autocompletes as you type against the list of possible values for the property you are editing
    • It allows you to disable a particular style on the fly.
  • Disadvantages
    • You can’t create new CSS class in this view.
    • It is difficult to remove one or more CSS class(es) from the file

Editable Mode

  • Advantages
    • You got the full control of your CSS file so that you can edit/remove the CSS class as many as you want. You will feel like writing in notepad.
  • Disadvantages
    • You will lost all syntaxhighlighting or autocomplete feature of CSS panel.

#3. DOM panel

It shows all default DOM properties, functions, constants, the user-defined properties and user-defined function.This panel is not very helpful (at least for me) except one thing. If you wanna find out how many function or properties included your scripts, you may probably want to use this panel to find out about that.

Let’s write one short script as below in plain HTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function Car(){
this.Gear = 5;
this.Start = function(){
console.log("Please put my car a lit bit!");
return false;
}
}
</script>
</head>
<body>
</body>
</html>

And then, save it as htm file. Open it in Firefox and then check the DOM tab. You will see the result as the picture below. “Car()” is a function that you just wrote in JS, isn’t it?

Okay. That’s all about DOM tab. This is the feature what DOM tab has so far….

My tutorials for Firebug is ended here. I hope that you all do enjoy reading all of my tutorials. Actually, I’m not teaching you about Firebug. I’m just sharing the way I understand about Firebug and I believe that you found it useful. Any feedback are welcome as usual. Feel free to let me know if you have any suggestion or comment.

One more thing is that Yahoo is releasing the Firefox addon called YSlow integreated with Firebug. This tool is also a performance measuring tool like Net panel. YSlow used to determine the performance of webpage based on 13 rules. I’m currently learning about those rules and doing some experiments. I will post about this in details very soon.. Please keep on watching my blog….

Thanks for reading. Have a nice day!!
Michael Sync
 Hey! don’t forget to give the feedback about my tutorials.. Here is the index.. Thanks..

Firebug Tutorials

Leave a Reply

  1. Have been using Firebug for quite sometime…but after going thro this, it looks like I am not using it to the full potential.. :)

    thanks

  2. I loved your firebug tutorial.
    I tried to discover which function is called when I click on a tab in the site http://www.rememberthemilk.com but all html I got was:

    <a href=" " rel="nofollow">Cx.Entrada</a> <a href=" " rel="nofollow">Pessoal</a>
    <a href=" " rel="nofollow">Trabalho</a> <a href=" " rel="nofollow">Enviadas</a>

    You see! All the href elements have an empty URL.
    How can I discover which JavaScript function is being called?
    Kind Regards,
    Daniel Burd (Sao Paulo, Brazil)

  3. i was wondering if anyone could help me out. I’m looking to edit a blog, and fire-bug so far is extremely helpfull, but i’m having trouble with the whole “order” of elements as they cascade. That is, when I need to edit an element in a td class, thats in a div class, and then its a link that has its own unique ID, but that ID hasn’t been applied to a CSS yet. So my problem is this, how do I know how to write up the CSS for that item with its own unique ID, because simply adding the ID as a CSS item does not change it….it needs to be in order, for eg.:
    .node .picture {
    margin: .5em 0 .5em 0;
    }

    am I on the right track? any help?

    i’m not really a beginner with CSS, i’m just not experienced with this complex of a taxonomy…

  4. Hi Daniel Burd,

    All the href elements have an empty URL.

    I checked the site that you give me. All href elements have some urls (e.g. “/sign up/”)..

    How can I discover which JavaScript function is being called?

    You can use “Profile” function from Console tab. You can read about this in Firebug – Console tutorial.

    Hello Jason McMillan,

    I’m not very clear with your explanation. If you want to apply CSS to unique id, you can use #uniqueid in CSS.. But I think you might already know since you are not CSS begineer.

    Which blog are you trying to edit? What result do you expect? You can give me the url of your blog.. I will take a look and will suggest you how you might accomplish..

  5. In the tutorial about the net panel there is a GET request shown. POST requests are not described.
    Can Firebug show POST requests?

  6. Hello Andre,

    Can Firebug show POST requests?

    No with this version. If you like to include this feature, you may probably request as new feature in fbug of Google Code.

  7. Is there any way to import the report of Net panel in firebug

    No as of now. but you can request it as a new request in newsgroup or fbug Google Code.

  8. Is there any way to log all the requests and response details to a file? Firebug has been clearing all its data in some environments.