ureadit

If you’ve been watching my blog lately, you might have noticed it changing every minute or so as I debug it live. I’d rather not be such a cowboy about it, but to be brutally honest, I’ve been too busy to put up a ghost site to test with, and I can only hope that I don’t disrupt too many readers. I admit it’s not a very smart thing to do, so I promised myself that I’ll have a ghost site running by the end of August ‘09. Until then, however, you might get some amusement out of watching my blog morph before your very eyes.

Which brings me to Google’s Chrome web browser. 

I recently began using this browser because it seemed kind of cool to try something besides Internet Explorer or Firefox. Google did a pretty good job with this browser, and overall, I’m very happy with it. But recently I discovered something else about Chrome that made me even happier; Chrome has included a page inspector tool which is immensely helpful when trying to debug a site.

Some background: I am using Joomla as an underlying structure to this site, and because I’m very selective about the look-and-feel, I’ve decided to design my own Joomla template. Rather than designing my template from scratch, which would involve diving deep into an alphabet soup of programming languages and protocols, I decided to use some software from Artisteer. Artisteer allows you to create your own templates visually. It not only allows you to design the physical layout, but it comes with a coordinated set of colors that really flow well together. It’s like having a technician and artist on board. At about $130, Artisteer is a bit expensive, but I can say that it’s been worth every penny to me.

But Artisteer is not perfect. It has a few gnarly bugs which have kept me awake some nights. I suppose I’d say that Artisteer gets me 95% there, and the last 5% I have to pay for in sweat. For example, it doesn’t provide a “Search” box, so I had to add one in manually. Also, I don’t seem to have detailed control over specific placement of modules, so if I have a disagreement with Artisteer, I pretty much have to live with it. But, hey, it’s far better than getting lost in alphabet soup.

Lately, however, there was a particularly nasty bug that had me tied up for a while. Do you see the advertisement module on the right? Sometimes it would appear all by itself at the bottom of the page. At first, I thought maybe it got squeezed down there due to a lack of room above. So during my online debugging session, I started fiddling with the CSS file and putting the squeeze on other items at the top of the page, hoping that the ad module would see that there is enough room to wedge itself in. Eventually, all my articles were squeezed to about the size of a spaghetti noodle, but still, the ad module stubbornly clung to the bottom of the page.

I thought something must be wrong with the CSS file that Artisteer created automatically, but no matter how many times I looked at it (I even used Dreamweaver to help), it all looked fine. Because I’m slowly going bald, I cannot afford to pull out much hair, so I did the next best thing. I used the inspector tool in Chrome, pointed it to my website, and voila! I saw the problem right away. The CSS file was fine, but the HTML file seemed to be missing a closing DIV tag, which caused the ad module to think it was part of the article section instead of a section unto itself at the right side of the web page.

Why the closing DIV tag was missing, I don’t know. But I immediately saw that the insertion of the “Read More” button on the front page somehow resulted in a missing closing DIV tag. No doubt, it was a bug. It wasn’t a very big bug though, because all I did was put in a few spaces ahead of the “Read More” instruction in the Joomla back end, and the missing closing DIV tag somehow reappeared. Suddenly the web page looked as good as the prototype in Artisteer, and I was happy.

The inspector tool in Chrome can be activated by putting your cursor anywhere on the web page, right-clicking, and selecting “Inspect element.” The inspector even allows you to highlight sections of the document addressed by different CSS elements, which gives visual clues as to how your document is structured. Cool. Very cool.

Best,

Dan

TrackBack URI for this entry

Name

Email

Website

Title

Comment

smaller | bigger

Write the displayed characters

Add Comment