Select Page

As a web page developer, I rely on web browser-based development tools like Firebug. Over the years each browser as improved their built-in tools, so I thought I would write a series of posts looking at features I find useful and comparing that feature in each of the browsers’ development tools. I will compare Chrome, Firefox, Firebug for Firefox, Safari and IE.

The first feature I want to look at is CSS editing in the web development tool.

Often I find myself using the development environment to tweak the CSS code for an HTML element. This might be something simple like increasing margin or padding, or adding a new CSS property to an existing rule. Then I copy the changed CSS back to my code base. I often will sit with the graphic designer and make tweaks interactively with them, increasing margins on an element until the designer yells “Stop.” Being able to do that in the development tools and easily save the changes to the source code is nice.

The first task is to select the element that you want to change. All tools provide an inspector, but they display the information as you are selecting differently.

Firefox (without Firebug)

You can launch the inspector with Cntl-Shift-C. The Inspector window looks like:

You can inspect elements by moving through the code in the code view or by using the inspect icon to “Pick an element from the page.” As you select elements they are highlighted on the page showing the current width and margins and paddings.


There are also tabs for the computed CSS, Fonts, and Box model. The elements CSS is shown in the right panel with the source and line number shown. In all of these tools, the “box model” or “layout” tabs are useful. Note in the image below not only is each individual width (top, right, bottom, left) shown, but also the total width and height is shown.


One irritating behavior is that if the inspector window is over the HTML page, when you click on the element on the HTML page the inspector is not brought to the front.

Firefox with Firebug

Pressing F12 opens Firebug’s console:


It does not have a Font tab, but has a layout (box model) and computed tab. As you select elements the margin and padding are shown on the HTML page.


Firebug does not display the element’s total width and height on the HTML page; you have to look at the “layout” tab to see the individual measurements and do the math yourself. Also, as you mouse over each part of the box model, a ruler is shown on the HTML page. This might be useful, but it doesn’t help with telling you the total width of the element.


Firebug brings the inspector to the front when selecting an HTML element.

IE 11

Pressing F12 opens the IE development tools:


Like the other tools, as you move over the element, the padding and margins are shown:


But the total width is not shown. However, a very nice feature in IE is that pseudo states can be shown by clicking on the a: in the styles view.


Safari (on Windows)

To launch Safari’s inspector you type Cntl-Alt-I


The inspector icon (the magnifying glass) is at the bottom of the inspector window. In the other browser tools, their icons are at or near the top.


Inspecting elements is similar to the other browsers and highlights the margin and padding. However, in my test case, the margin is highlighted incorrectly. Using the box model view in Safari (Safarai doesn’t use tabs, they use a vertical accordion), the metrics accordion shows this:


Note that the right margin is clearly 20 px, but the highlight on the HTML view is much more.

I also noticed that at one point I could see the :hover state CSS rules but it wasn’t clear what I did to show that.

Editing the CSS

So all have similar inspectors. I suspect there isn’t one that has a killer feature that you can’t live without, although I really like IE-11 showing the pseudo states.

The next question is to find out how easy it is to edit the CSS settings and then save the results back to your file. All of the web development tools let you edit the CSS, in much the same manners. You can double-click on the property value in the CSS Rules view, and if it is a unit of measure, like pixels, you can type in a new value or use the keyboard arrow keys to increment/decrement the value. You can also do the same in the box-model views. I find this very useful for fine-tuning the layout.

Also, in each if you click on the source link of the rule, they will show you the CSS file that has the rule. However, in IE, Safari, Chrome, and Firefox you can’t edit in that view. But in Firebug you can. This is the one feature that I really appreciate. To understand why, consider the following steps:

1. Update the width of an element in the style view (double-click on the width and change it).

2. View the CSS source. Chrome, Firefox, and IE do not show the new value. They show the original value. Both Safari and Firebug display the new value in the CSS source view. But you can’t edit that value in CSS source view in Safari, while you can in Firebug.  In Safari and Firebug, you can easily select the CSS in the source view and copy it to update your files, keeping the formatting style you use.

But, and this is important, when viewing the rules in the inspector style view, or the source view, the tool may or may not display the other browser-specific rules.  For example, if you have the following properties defined:

Some of the development tools will only show the properties that they recognizes. So you have to be careful.  Safari, Chrome, and IE show all of the rules in the style display. Firefox and Firebug do not. However, Firebug will show all of the properties when viewing the CSS source view and allow you to edit them in that view.

You can also copy an individual rule from the style view, but doing so changes the formatting style when you paste it into your code.  For example, here is the original rule in the CSS formatting style I use:

But copying and pasting from the style view changes the format.

You can’t copy from the style view in Safari and Chrome because the view adds check boxes.


h1 {
  1. padding: 20px;
  2. margin: 20px;
  3. width: 220px;

IE-11 and Firebug give you a right-click menu option to copy the rule (or an individual property) but changes the formatting:

Firefox lets you select and copy the rule or property but changes the formatting:


Wow, too much information!

These development tools are all powerful and necessary for coding web pages today. All currently have similar features and which one you use is often simply a personal preference. I use Firebug as my default tool and will occasionally use the others for specific needs. The one feature of Firebug that I really appreciate is that I can see the actual CSS code from the source, edit it, and copy and paste my edits back to my source files.

Below are two tables showing the features I have highlighted. For those items marked “no,” there may be a way to do the feature, but it wasn’t obvious. If there are ways please feel free to let me know via the comments.

Browser Style view editing Code help Style rule copying display pseudo-classes Source editing
Chrome yes yes no no no
Safari  yes buggy no  no no
IE yes yes yes  yes no
Firefox  yes yes yes yes  yes
Firebug yes yes yes no  yes


Browser Source reflects style edits Edit in box model view Edit browser prefixed rules
Chrome no yes yes
Safari yes yes yes
IE no yes yes
Firefox  no yes Yes in source view
Firebug yes yes Yes in “Source Edit” tab