Cheap Shared Hosting

Friday, May 16, 2008

Using Firebug to test when updating large sites

Yikes, over a week since my last post. Busy, busy - thank google for coffee!

Anyways, though this tip might be useful to someone. I was tasked with performing some minor changes to a site. The site was large and very high traffic, and because of how it was structured it was not feasible to create a test page or use a staging server - the changes had to be made to a live page. Normally this wouldn't be a big deal, except that the site was still using a heavy table-based layout.

So many tables! Haven't seen so many in a long time... And worse, the indentation of the code was a mess, making it harder to figure out which tables needed to be moved, etc. Obviously, the goal was to find the "master table" for a section that needed to be moved, because to cut and paste that code to a new location w/out getting the closing table tag, or picking the wrong table would make for a screwed up page, which given the traffic would likely affect visitors...

Here's where firebug comes in. Of course you can use it to view the table structure, which is helpful - but it can still be difficult to figure out which table in firebug corresponds to which table in the messy code.

To get around this, add a css ID to one of the tables. Make sure it's something that there's no styles associated with. Then reload firebug and the ID for that table will be shown. Or you can add a "safe" inline style to the table in the code, such as display: block then look for that inline style in firebug. You can even then change that to display: none in Firebug to make sure things will still look right when the table has been removed.

This way you can figure out what needs to be done in the code with as little impact on visitors to the site as possible.

No comments: