Archive for the 'Uncategorized' Category

Web developer features in Safari

Thursday, May 22nd, 2008

If you’re a Web coder, Safari 3 offers some really nice debugging features – if you know where to look for them. First, you need to turn on Safari’s Develop menu (hidden by default). To do this, choose Safari > Preferences, then in the Advanced tab check the Show Develop menu in menu bar option. You’ll see the new menu appear to the right of the Bookmarks menu in the menu bar.

The first option, Open Page With, lets you open the current page in any other installed browser – handy for cross-browser testing. The second, User Agent, tells Safari to masquerade as another browser when viewing websites. Safari still renders pages as Safari, but sends another user agent string to the Web server. This can be useful if you’re testing browser detection code, for example.

Call in the Inspector

The fun really starts with the next option, Show Web Inspector. The Web Inspector window is reminiscent of the Firebug Firefox add-on, and shows you the syntax-highlighted markup (or, by clicking the button in the toolbar, the DOM tree) of the current page, the contents of any linked style sheets, the images used in the page (with info), the source code of any JavaScript in the page, and info on any other page elements it finds.

Click the Console option at the bottom left of the window, and you can see JavaScript errors and other messages; click on an error to jump straight to the JavaScript line that caused it (nice). You can also type your own JavaScript commands into the single-line box at the bottom of the console window and see the results appear above – great for finding out the current state of variables and so on. (more…)