Taming CSS: Web Developer Toolbar

Debugging CSS can be really frustrating. The Web Developer Toolbar lets you inspect and edit (in real-time) the HTML and CSS of your page, so you can see what’s happening when things don’t line up. It can do a heck of a lot more, but here’s what I use it for:

Ctrl + Shift + F: Display element information. This puts a red box under your mouse. Move the mouse over an element and its attributes appear in a pop-up: the name, class, pixel sizes, fonts, everything. Here’s what you can do:

Figure out what classes are creating the styles you see

Easily get the div’s id for use with Firebug (below)

Figure out how big an image is (pixel height and width)

Ctrl + Shift + E: Edit CSS. This pops open a sidebar tab with the current stylesheets. You can edit any attributes and see the effect in real-time (like giving Google a black background):

My favorite CSS style is border: 1px solid red;

I’ve done the following hundreds of times during the course of web development:

Find a div with your mouse (ctrl + shift + f)

Get its id

Edit CSS (ctrl + shift + e)

Put a border on the div: #mydiv{border: 1px solid red;}

Play with widths, heights, margins and paddings until it lines up nicely

Remove the border

But rather than deleting the border, put an “x” in front: “xborder: 1px solid red”. The CSS won’t be valid so the border is ignored, but keeps the style around in case you want to enable it later.

Select all the text in your edited CSS file and paste it into the real CSS file. Bam, your changes are now live. It’s almost the reverse of creating a file in DreamWeaver and viewing it in Firefox. You are viewing the live file in Firefox, making changes, and copying those back into your text editor. I’ve found this very effective for editing CSS, you avoid the constant back-and-forth switching because Firefox now has a CSS editor.

Bonus: ColorZilla Picks Colors

ColorZilla gives you a dropper that can find the hex RGB value (#123456) of anything on the page. This is great when designing, and you want to match a font color to a color in your page. This is way faster than taking a screenshot and opening it up in Photoshop.

Keeping Javascript In Line: Firebug

Firebug can debug javascript, examine the DOM, and do much more (you can and should read all about it). Here’s how I use it:

F12: Open Firebug. You may have to enable it for the page.

Console Tab: Write quick javascript commands — it even has autocomplete on variable names and properties. Play around with your functions, change CSS attributes, add elements to the page — whatever it takes to test.

Script Tab (Debugging): Best. Feature. Ever. Click on a line number to set a breakpoint (red dot) in your javascript. Reload the page and it will break (pause) when it encounters the line.

At this point, you can switch over to the console to examine and change variables, and figure out what the heck is going on when your code won’t work. You can then hit the blue “play” button and continue running your app, until the next breakpoint.

Profile Button (on Console Tab): Find the run-time performance of your page. Click “profile” to begin capturing information, do some commands, and then click stop. You’ll get a report of where your code spends its time. If you must optimize, optimize the common-case first.

As you visit a page, you’ll see HTTP headers fly by as your browser requests elements. If items are cached, the browser may not request them at all (awesome!) or may request the element and get a 304 “Not Modified” response (slightly less awesome, you still had to check with the server). I’ve written more on cache behavior, and Live HTTP Headers is a great way to learn about HTTP caches (something every webdev should be interested in for performance reasons).

Even better, you can “replay” any header, editing the data that is sent. This is useful when testing or debugging cache or gzip encoding behavior.

Debugging IE: The lost chapter

Argh, unfortunately IE lacks these wonderful tools. There is a script debugger, but it doesn’t hold a candle to Firebug. In fact, I often just resort to alert statements, which make you shudder after being spoiled by Firebug.

It’s nothing fancy, just a simple logging function that appends text to a div. Yes, it’s brutal, but it’s better than alert() statements, especially if you have a loop (unless you like repetitive stress injuries or want to condition yourself to fear dialog boxes). If anyone knows a good way to debug javascript in IE I’d love to know. The tools I’ve tried have been very clumsy and disjoint, taking you out of the browser.

I try to do 95% of my development in Firefox, and debug IE-specific issues (like erratic substr behavior) using this method.

Keep Getting Better

Web Developer Toolbar and Firebug can do way more than I’ve described here. Like the 80/20 rule, these are commands I use most frequently that give me the best bang for my buck. Take a few minutes to learn these tools and you’ll save hours down the line. And here’s a few more tools for web development.

These tools might not save you from getting a nervous twitch in one eye from building web apps, and that’s ok. They’ll save you from getting that twitch in both.

Leave a Reply

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

[…] BetterExplained has a good quick quide to Debugging Web Applications with Firefox listing the extensions that can be used and how-to tips on using Mozilla Firefox to debug web pages. Add to Del.icio.us Add to Digg […]

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

The same things you do in Web Developer toolbar can be done in Firebug with even more convenience. So why not use one great tool for the job instead of such separation?

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

I find Firebug is great for debugging javascript, but Web Developer toolbar is better for designing your site. It has awesome tools for showing/hiding images, measuring pixel distances onscreen, validating CSS/HTML, resizing your browser, viewing the HTML source of iframes and more.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

I can also vouch for Fiddler. I use it since I use IE and find it invaluable.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

[…] Of course, the actual headers and protocols are much more formal (monitor them with Live HTTP Headers if you’re so inclined). […]

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Thanks Funky, glad you liked it.

Vote Up0Vote Down Reply

9 years 11 months ago

Tim

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Hi Tim, thanks for the tip.

Vote Up0Vote Down Reply

9 years 10 months ago

Jay

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

IMHO, Microsoft Script Editor is at least as good as firebug for IE script debugging. For those who have ms office installed, you may find it as mse7.exe under you ms office folder, so it’s almost free.
Visual studio is also pretty handy as a js debugger for IE.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

[…] In Browser: Use FireBug or Live HTTP Headers to see the HTTP response (304 Not Modified, Cache-Control, etc.). In particular, I’ll load a page and use Live HTTP Headers to make sure no packets are being sent to load images, logos, and other cached files. If you press ctrl+refresh the browser will force a reload of all files. […]

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

I was debugging javascript using alerts and div log (similar to yours) until now. Thanks for sharing!

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

[…] Debugging compressed Javascript can be really difficult because the variables are renamed. I suggest creating a “debug” version of your page that references the original files. Once you test it and get the page working, pack it, test the packed version, and then deploy. […]

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

[…] What’s programming without bugs? Use firefox to debug your javascript and CSS. Instead of clicking a bookmarklet each time, just make a page that runs the javascript file directly: <script src=”…”>. This is what the bookmarklet does. […]

Vote Up0Vote Down Reply

9 years 4 months ago

Tyler Style

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

I’d disagree with Jay – I use both Firebug and Microsoft Script Editor, and MSE is not nearly as useful in my experience. MSE frequently barfs on dynamically loaded js scripts or on anonymous functions.

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

+1 for the IE Developer Toolbar, it’s actually more like Firebug (it even looks similar).

Vote Up0Vote Down Reply

9 years 2 months ago

Winooski

Click to flag and open «Comment Reporting» form. You can choose reporting category and send message to website administrator. Admins may or may not choose to remove the comment or block the author. And please don't worry, your report will be anonymous.

Cheers for this excellent reference. For example, I’ve had Firebug and Web Dev Toolbar installed for ages, but didn’t know about those keyboard shortcuts.