Tutorial: Debugging

Contents

1. h2Name
   1. h3Name
API reference
1. Properties
   1. propertyName
2. Methods
   1. methodName
3. Events
   1. eventName
4. Types
   1. id

[PENDING: intro goes here. This tutorial starts where Getting Started ends. Point to files needed.]

You can use the browser's built-in developer tools to view your extension's code, display debugging output, and debug your extension.

1. Edit my_toolstrip.html, so that it has the following code:

   <script>
   function helloWorld() {
     var hwFile = 'hello_world.html';
     console.log("in helloWorld()");
     window.open(hwFile);
   }
   </script>
   
   <div class="toolstrip-button" onclick="helloWorld();">
   <span>Hello, World!</span>
   </div>

   The relocated code still has the same effect, but now it has some debugging output, thanks to the call to console.log().

2. Restart the browser, so that it loads your new version of the extension.
3. Right-click the Hello, World! button (at the bottom left) to bring up the Developer Tools window for this instance of your toolstrip. The window should look something like this:

   

4. Click the Scripts button. If necessary, choose my_toolstrip.html from the list of scripts. The result should be something like this:

   

5. Set a debugging breakpoint at the window.open() statement by clicking 5 in the left column:

   

6. Click the Console button (second from left, at the bottom of the Developer Tools window) so that you can see both the code and the console.

   

7. Back in the main browser window, click the Hello, World! button, so that the extension begins executing. You should see the output of console.log() along with the line number, and execution should stop just before the call to window.open().

   

   The Call Stack area at the right of the tools window shows that the helloWorld() method was called by an anonymous function that was called by onclick. Anywhere in the Call Stack or console that you see a file and line number (for example, "my_toolstrip.html:4"), you can click that text to see the relevant line of code.

8. In the upper right part of the tools window, scroll down (if necessary) until you can see the local scope variables. This section shows the current values of all variables in the current scope. For example, you can see that hwFile is a local variable that has the value "hello_world.html".

   

9. Click the buttons at the upper right of the window to resume execution or to step through the code. Once the call to window.open() returns, the main browser window should open a new tab that displays the contents of hello_world.html.

You now know how to debug an extension!

What next?

[PENDING: Summarize what we did, what it means, and where to find more information. Suggest where to go next.]