Free web development tools for Mac using Safari 3.

Safari and TextWrangler

I found TextWrangler to be the best code editor I have ever used. Yet I still needed a good debugger. I searched for over a week, but found nothing. At this time I had the Safari 3 beta, I’ve used the debug menu in Safari 2, but there wasn’t much in there besides a console. Well one day I was going through macdailynews.com, and like I always do, I opened up all the articles I wanted to read first by tabbing them. I do this by command (the key on an Apple keyboard) clicking on the links. Well I accidentally control clicked one, which I do sometimes. This of course opened the contextual menu. I noticed at the bottom there was a new menu item called Inspect Element. I clicked on this with curiosity. Suddenly the Web page went semitransparent black, except where the link under the mouse was. Also a new window popped up showing the structure of the link and even the CSS code going with it. I had found my debugger. Using the inspector, you can see every document that the Web page is using at the time. The inspector can also show all the errors visually and give you the reason for it. Another great feature is the speed inspector. This allows you to see visually how fast every file was downloaded and rendered.

Pretty impressive. You'll need a bit of Terminal tweaking to make the debugger active. Even if you don't use it for web development the Safari Inspect Element function is cool.