How to – Enable Safari’s Developer Menu to Debug Your Web Applications Using Web Inspector

This will really be a brief post. I just felt the need to write this down for everybody. This post explains how to access the debugging tools in Safari not how to use them. I assume you are already familiar with using browsers' debugging tools.

Apple's safari browser is one of those browsers that will give you headaches when it comes to cross-browser compatibility. I recently wrote a javascript-heavy web application (as I love playing with javascript). This application works great on Chrome, Firefox and Internet Explorer but when I try to open my application on my ipad it fails. Which in many cases also mean that it will fail on PC version of safari too, and you can debug it easily, right?

Don't be so sure. You first need to find the “Developer” menu. Okay, it is very easy to enable this menu but why is it hidden by default?? It does not make any sense.

Ok, ok… I will stop mumbling here 🙂

Just go to “Edit” -> “Preferences” -> “Advanced” and check the checkbox that says “Show Develop menu in menu bar”.
Now go to “Develop” -> “Show Web Inspector” to start debugging your web application.

Hope this helps someone.

Good luck,
Serdar.

Leave a Reply

Your email address will not be published. Required fields are marked *