Comparison of Browser Web Development Tools

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:

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

 

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:

Summary

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