O'Reilly logo

JavaScript Cookbook by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

10.13. Turning on Safari’s Development Tools

Problem

You need to find the development tools available for Safari 4.

Stopping at a breakpoint in Dragonfly

Figure 10-24. Stopping at a breakpoint in Dragonfly

Inspecting local variables using Dragonfly

Figure 10-25. Inspecting local variables using Dragonfly

Solution

In the Preferences menu, select the Advanced option and check the option to “Show Develop menu” in menu bar.

Discussion

Safari 4 and up feature a wide variety of helpful tools for the web developer. Once you turn on the Develop menu, you’ll see options to:

  • Open the page in another browser

  • Change the User Agent signature to others, to test applications

  • Show Web Inspector

  • Show Error Console

  • Show Snippet Editor

  • Start Debugging JavaScript

  • Start Profiling JavaScript

  • Disable Caches

  • Disable Images

  • Disable Styles

  • Disable JavaScript

  • Disable Runaway JavaScript Timer

  • Disable Site-Specific Hacks

All of the options are handy, but I’ll focus on those useful for the JavaScript developer.

The Show Web Inspector option opens the Web Inspector into the lower portion of the browser window.

The Web Inspector is a terrific way of examining the page elements, as well as checking resource use for pages and debugging script, as shown in Figure 10-26. Moving your mouse over any of the elements shades the element in the page, making it easier to spot. The right window shows the current style setting for the element.

The Web Inspector open in a Safari browser

Figure 10-26. The Web Inspector open in a Safari browser

Most of the other options work within the Web Inspector, including the Error Console.

The Show Error Console will open the Web Inspector if it’s not already opened, and then an error message at the bottom. The Error Console reflects all of the JavaScript errors that occur, including the line number where the error occurred, as shown in Figure 10-27.

The Error Console opened in the Web Inspector

Figure 10-27. The Error Console opened in the Web Inspector

The ability to open the page in another browser provides a nice way to quickly open a page for testing in one of the other browsers currently available in the system. The ability to change the User Agent string is a way of testing JavaScript applications and libraries to see if the code or behavior changes based on the user agent.

The Snippet Editor is a cute little bugger. When you click on this option, a small, double-paned window opens. You can type HTML, CSS, or JavaScript in the upper pane, and the result is displayed in the bottom pane. It’s a great way of trying out various pieces of markup or code, without having to create a web page, as shown in Figure 10-28.

The Snippet Editor with a line of HTML and small piece of JavaScript

Figure 10-28. The Snippet Editor with a line of HTML and small piece of JavaScript

The JavaScript profile functionality provides information about where your application is spending its time. It is compatible with the console.profile methods described with Firefox, and provides a nice interface to view the results. Figure 10-29 demonstrates a profile of a small Canvas application.

I’ll cover one last tool before getting into the JavaScript debugging in Safari: the resource window. Though not specific to JavaScript use, this handy window can provide you a good idea of why your pages may be loading slowly; it provides a breakdown of what’s loaded, and how long it’s taking. The resources tracked are JavaScript files, stylesheets, images, and the document, as shown in Figure 10-30.

See Also

The Firefox JavaScript profile functionality is covered in Recipe 10.9. For a detailed overview of the developer tools available with Safari 4, see http://www.apple.com/safari/features.html#developer.

Snapshot of the Safari/WebKit JavaScript Profile window

Figure 10-29. Snapshot of the Safari/WebKit JavaScript Profile window

Web Inspector Resources Panel

Figure 10-30. Web Inspector Resources Panel

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required