Extensions Docs Server: Doc conversion script - SVN

chrome/common/extensions/docs/server2/templates/articles/tut_debugging.html

-<div id="pageData-name" class="pageData">Tutorial: Debugging</div>
-<div id="pageData-showTOC" class="pageData">true</div>
+<h1>Tutorial: Debugging</h1>
+
 
 <p>
 This tutorial introduces you to using
 Google Chrome's built-in Developer Tools
 to interactively debug an extension.
 </p>
 
 
 <h2 id="extension-info"> View extension information </h2>
 
@@ skipping 61 matching lines @@
   <li>
   Right-click the Hello World icon
   <img src="../examples/tutorials/getstarted/icon.png"
        width="19" height="19" alt=""
        style="margin:0" />
   and choose the <b>Inspect popup</b> menu item. The popup appears,
   and a Developer Tools window like the following should display the code
   for <b>popup.html</b>.
 
   <p>
-     <img src="../images/devtools-1.gif" alt=""
+     <img src="{{static}}/images/devtools-1.gif" alt=""
           width="500" height="294" />
      </p> 
   The popup remains open as long as the Developer Tools window does.  
   </li>
   <li>
   If the <strong>Scripts</strong> button isn't already selected,
   click it.
-  <!-- [PENDING: can we omit this step?] -->
+  
   </li>
   <li>
   Click the console button
-  <img src="../images/console-button.gif"
+  <img src="{{static}}/images/console-button.gif"
        style="margin:0; padding:0" align="absmiddle"
        width="26" height="22" alt="" />(second
   from left,
   at the bottom of the Developer Tools window)
   so that you can see both the code and the console.
   </li>
 </ol>
 
 <h2 id="debug"> Use the debugger </h2>
 
 <p>
 In this section,
 you'll follow the execution of the popup page
 as it adds images to itself.
 </p>
 
 <ol>
   <li>
   Set a breakpoint inside the image-adding loop
   by searching for the string <b>img.src</b>
   and clicking the number of the line where it occurs
   (for example, <strong>37</strong>):
   <p>
-  <img src="../images/devtools-2.gif" alt=""
+  <img src="{{static}}/images/devtools-2.gif" alt=""
        width="500" height="294" />
   </p>
   </li>
 
   <li>
   Make sure you can see the <b>popup.html</b> tab.
   It should show 20 "hello world" images.
   </li>
 
   <li>
@@ skipping 15 matching lines @@
   you should see the local scope variables.
   This section shows the current values of all variables in the current scope.
   For example, in the following screenshot
   the value of <code>i</code> is 0, and
   <code>photos</code> is a node list
   that contains at least a few elements.
   (In fact, it contains 20 elements at indexes 0 through 19,
   each one representing a photo.)
 
   <p>
-  <img src="../images/devtools-localvars.gif" alt=""
+  <img src="{{static}}/images/devtools-localvars.gif" alt=""
        width="225" height="215" />
   </p>
   </li>
 
   <li>
   Click the play/pause button
-  <img src="../images/play-button.gif"
+  <img src="{{static}}/images/play-button.gif"
        style="margin:0; padding:0" align="absmiddle"
        width="22" height="20" alt="" />(near
   the top right of the Developer Tools window)
   to go through the image-processing loop a single time.
   Each time you click that button,
   the value of <code>i</code> increments and
   another icon appears in the popup page.
   For example, when <code>i</code> is 10,
   the popup page looks something like this:
   </li>
 
   <p>
-  <img src="../images/devtools-3.gif"
+  <img src="{{static}}/images/devtools-3.gif"
        width="500" height="245"
        alt="the popup page with 10 images" />
   </p>
 
   <li>
   Use the buttons next to the play/pause button
   to step over, into, and out of function calls.
   To let the page finish loading,
   click line <b>37</b> to disable the breakpoint,
   and then press play/pause
-  <img src="../images/play-button.gif"
+  <img src="{{static}}/images/play-button.gif"
        style="margin:0; padding:0" align="absmiddle"
        width="22" height="20" alt="" />to
   continue execution.
   </li>
 
 </ol>
 
 
 <h2 id="summary">Summary</h2>
 
@@ skipping 48 matching lines @@
     Example: <code>console.log("Hello, world!")</code>
   </li>
   <li>
     Follow the <a href="http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial">Developer Tools tutorial</a>,
     explore the
     <a href="http://www.chromium.org/devtools">Developer Tools site</a>,
     and watch some video tutorials.
   </li>
 </ul>
 
-<!-- [PENDING: do something to help people debug content scripts, which show up in blue] -->
+
 
 <p>
 For more ideas,
 see the <a href="getstarted.html#summary">Now what?</a> section
 of Getting Started.
-</p>
+</p>