Debugging JavaScript on Safari
Jun
22
Have recently faced the mammoth task of debugging JavaScript on Safari I thought I would share a few of my experiences and offer a few tips that I discovered along the way.
Well I guess I’ll start by saying that using the default Apple settings, debugging is a long and drawn out process involving alerting out potential problem areas to track down any bugs. This is not ideal and as Firebug has proved, there is a great deal of room for improvement.
So lets have a look at the options:
Safari Enhancer
Having read Pete Freitags blog one simple answer is to enable Safari’s Debugging Menu which is hidden by default. This will provide developers with access to the DOM Tree, JavaScript Console and even allow user agent spoofing.
To find out more see Pete Freitags article on JavaScript Debugging with Safari.
The debug menu can be manually enabled by simply typing the following in to the terminal window:
defaults write com.apple.Safari IncludeDebugMenu 1
For more information see the Apple Help site.
View Generated Source
Another method that I often use to debug JavaScript is to view the generated source created dynamically by JavaScript. This can offer invaluable insights into potential bugs.
Ditchnet have a very good article providing information on the process required to develop an AppleScript which when run will display the generated source of a page in BBEdit.
To find out more see Ditchnet article on how to View Generated Source in BBEdit for Safari.
Note: If you do not have BBEdit installed don’t despair you can always use TextEdit. Simply replace BBEdit in the code for TextEdit.
Firebug Lite
There is no getting away from the bug. Quite simply it rules. Firebug Lite although very cut down from the Firefox plugin does have some great features allowing developers to more accurately test and debug their code. Firebug Lite gives users the ability to write to an in page console which can be displayed on demand using predefined short cut keys.
To find out more see Firebug Lite.
just sharing something i ran into the other day: i was working on some js, and when i went to test in safari, it kept crashing the browser, buy I could see from looking at my db that the ajax calls were firing.
It turns out that Safari’s Javascript Console catchs the console.log calls you’d use in firebug.
Which is nice. However, in firebug, i will pass in anything to console.log to inspect it.
Safari on the other hand was choking on passing in an event, or an object to the console.log, and that was causing the crashes.
So first tip to debugging a problem in safari: comment out all calls to console.log, or keep them very simple. Not sure what happens with firebug lite installsed if safari’s console will keep catching it as well.