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

猫性男孩

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

October 15, 2007

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

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.

• Name of files : The first column at the left-side shows the name of each and every files that are included in your webpage.
• 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.
• Size : The third column shows the size of each file.
• 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 Sleightfor the explanation of color and its description )
  • Green : Loading the file from server.
  • Dark Grey : Request sent to server, file loaded from server
  • Light Grey: Request sent to server, “Not Modified” received, file loaded from the cache.
  • 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.

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.