To test and debug extensions, use Safari’s built-in Web Inspector. Learn how to use these tools by reading Safari Web Inspector Guide.
This chapter shows you how to apply the developer tools specifically to Safari extensions, but does not go into detail about using the tools.
Debugging Extension Bars
To debug an extension bar, Control-click or right-click on the extension bar. From the context menu presented, select Inspect Element.
This opens Web Inspector with the element in the extension bar selected, as illustrated in Figure 17-1.
Clicking an element highlights it in the extension bar of the browser window, displays its attributes and styles, and allows you to edit them interactively (double-click an attribute or style value to edit it). If you use the Node navigator, you can display event listeners for all nodes, or any given node.
In addition, the
Debugging Injected Scripts
Debugging an injected script or style sheet with the Safari developer tools is very much like debugging a script or style sheet for your own website. The main difference is that you must load a webpage to which your extension has access in order to inject the script for debugging.
Choose Show Web Inspector from the Develop menu, or right-click on the webpage and choose Inspect Element. Then under the Resource navigator, choose your script from the folder labeled Extension Scripts.
Any detected errors in the script are shown in the Issue navigator. Click in the gutter between the line number and script to set a breakpoint. The Firebug-compatible console API is available for logging data.
For more information on debugging scripts, see Safari Web Inspector Guide.
Debugging a Global HTML Page
To bring up Web Inspector for the global page, choose Show Extension Builder from the Develop menu. When your extension has a global HTML page, a button is added to the Extension Builder interface, in the Global Page section, as illustrated in Figure 17-3.
Click Inspect Global Page to open Web Inspector with your global page selected for debugging.