Catching HTML bugs with Safari 5

July 8th, 2010 at 8:45 · Filed Under At Work, Blogging, Call Me a Geek, Computing, Days in My Life, Hacking, Mac OS X, Software Development, Web

A bug in a seemingly harmless HTML code had been bugging me for almost 2 weeks. I was sort of yanking my hair while trying to trace the bug which messed up the HTML page. The debugging task was even harder because I work on a HTML template with an extension .THTML. The template does not only contain standard HTML but also tags which are only recognized by AWS (Ada Web Server) . This template file is parsed by the web application (I am developing), which has AWS library, before it is dispatched as raw HTML code to a browser.

In my design, I break down the HTML template into header, body and footer so that I can reuse the common codes in header and footer. That means, all the body templates are without <html> tag. This missing <html> tag disables the syntax-coloring feature of code editor, leading to a more laborious code reading.

Before this, I had gone through every line of html source code in the template file umpteen times. This “obscure” bug, if not removed, would throw a monkey wrench in my works. I browsed the Internet and read articles in hope that I would get some clues. So, I was reading a few articles about Extensions in Safari 5. Extensions are not really impressive to me as I do not need to add missing functionalities to my browser. Safari itself is more than enough for my daily browsing activities. Somehow, my curiosity had driven me to enable the Develop menu in Safari 5. After activating it, I noticed some debugging tools in the menu. I enabled the web inspector by selecting Show Web Inspector in the Develop menu (Figure 1) then navigated to the web page I wanted to debug. To use these debugging tools, the Develop menu must first be activated. Here is a simple guide to enabling the menu.

Figure 1

Safari 5 immediately detected two error messages as shown in Figure 2. These two errors were easily corrected. After removing these unmatched </div> tags, my web page still did not show up properly with the intended layout.

Figure 2

Then I selected the Elements tab and it showed me the page source in debugging mode as shown in Figure 3. I instantly spotted the <div class=”data-base-layer”> tag which was supposed to be in the <div id=”container”> tag.

Figure 3

I clicked on the little grey triangles in the left pane to expand the <div id=”container”> tag and the <form> tag. There were two <div class=”data-base-layer”> tags (labelled as “1″ in Figure 4) and the one in label “2″ was supposed to be right after them.

Figure 4

I checked the source file again and they seemed to be in the correct place. Further investigation finally reviewed that there were two very tiny typos lurking somewhere within the second <div class=”data-base-layer”> tag as shown in Figure 5.

Figure 5

The web inspector in Safari 5 has helped me to identify errors effortlessly. If only I had such inquisitiveness two weeks ago, I would have saved so much time and efforts in debugging my HTML codes. An proverb says: “Curiosity killed the cat.” It is not always true, at least in this case. I will say: “Curiosity saved the donkey.”