Safari Enhancer

If you happen to use a Mac and want to debug your JavaScript applications, the Safari Enhancer is a great tool. The Safari Enhancer does exactly what the name implies: It is a great addition to the browser and helps debug JavaScript issues where as no other tool, that I have come across, does.

Installing Safari Enhancer

If we are using a new Mac, Safari comes pre-installed on the system. Therefore, to install the Safari Enhancer we must simply visit http://www.celestialfrontiers.com/safari_enhancer.php and click on the latest releases download link. Once the installer is downloaded we can install by simply double-clicking the installer and following the prompts. When the installation has completed we can open the Safari Enhancer and set a preference in order to debug our applications. The preference which you will want to check is the Activate Debugging Menu option as seen in Figure 8.5. This figure also shows the Deactivate Cache option as being checked. It is up to you if you would like to set this option, I prefer to know that I am dealing with fresh data when I develop.

Figure 8.5. Activating the Debugging menu in Safari.

This will add a new menu item to Safari called Debug. Under this menu will be a list of debugging options, such as Show DOM Tree, Show Render Tree, Show View Tree, and many more. My favorite happens to be the JavaScript console and it happens to be the most relevant to our situation.

The JavaScript Console

The JavaScript console works much like other consoles that are available in other browsers. The difference with this console is that it obviously is attached to Safari and therefore provides us with issues specific to this browser that other browsers consoles may not pick up. Since all browsers handle code differently it is essential to test in them all if you want to have a universally compatible application. Figure 8.6 shows the JavaScript console as it appears with logged errors.

Figure 8.6. Logged errors in the JavaScript console.