| OLD | NEW |
| 1 <div id="pageData-title" class="pageData">Tutorial: Debugging</div> | 1 <div id="pageData-title" class="pageData">Tutorial: Debugging</div> |
| 2 <div id="pageData-showTOC" class="pageData">true</div> | 2 <div id="pageData-showTOC" class="pageData">true</div> |
| 3 | 3 |
| 4 <p> | 4 <p> |
| 5 This tutorial introduces you to using | 5 This tutorial introduces you to using |
| 6 Google Chrome's built-in Developer Tools | 6 Google Chrome's built-in Developer Tools |
| 7 to interactively debug an extension. | 7 to interactively debug an extension. |
| 8 </p> | 8 </p> |
| 9 | 9 |
| 10 | 10 |
| 11 <h2 id="extension-info"> View extension information </h2> | 11 <h2 id="extension-info"> View extension information </h2> |
| 12 | 12 |
| 13 <p> | 13 <p> |
| 14 To follow this tutorial, you need | 14 To follow this tutorial, you need |
| 15 the Hello World extension that was featured in | 15 the Hello World extension that was featured in |
| 16 <a href="getstarted.html">Getting Started</a>. | 16 <a href="getstarted.html">Getting Started</a>. |
| 17 </p> | 17 </p> |
| 18 | 18 |
| 19 <ol> | 19 <ol> |
| 20 <li> | 20 <li> |
| 21 <p> | 21 <p> |
| 22 Load the Hello World extension if it isn't already running. | 22 Load the Hello World extension if it isn't already running. |
| 23 If the extension is running, | 23 If the extension is running, |
| 24 you'll see the Hello World icon | 24 you'll see the Hello World icon |
| 25 <img src="examples/tutorials/getstarted/icon.png" | 25 <img src="examples/tutorials/getstarted/icon.png" |
| 26 width="19" height="19" alt="" /> | 26 width="19" height="19" alt="" |
| 27 style="margin:0" /> |
| 27 to the right of | 28 to the right of |
| 28 your browser's address bar. | 29 your browser's address bar. |
| 29 </p> | 30 </p> |
| 30 | 31 |
| 31 <p> | 32 <p> |
| 32 If the Hello World extension isn't already running, | 33 If the Hello World extension isn't already running, |
| 33 find the extension files and load them. | 34 find the extension files and load them. |
| 34 If you don't have a handy copy of the files, | 35 If you don't have a handy copy of the files, |
| 35 extract them from this | 36 extract them from this |
| 36 <a href="examples/tutorials/getstarted/getstarted.zip">ZIP file</a>. | 37 <a href="examples/tutorials/getstarted/getstarted.zip">ZIP file</a>. |
| (...skipping 17 matching lines...) Expand all Loading... |
| 54 <p class="comment"> | 55 <p class="comment"> |
| 55 [PENDING: screenshot here?] | 56 [PENDING: screenshot here?] |
| 56 </p> | 57 </p> |
| 57 | 58 |
| 58 </li> | 59 </li> |
| 59 | 60 |
| 60 <li> | 61 <li> |
| 61 Keeping an eye on the Installed Extensions page, | 62 Keeping an eye on the Installed Extensions page, |
| 62 click the Hello World extension's icon | 63 click the Hello World extension's icon |
| 63 <img src="examples/tutorials/getstarted/icon.png" | 64 <img src="examples/tutorials/getstarted/icon.png" |
| 64 width="19" height="19" alt="" />. | 65 width="19" height="19" alt="" |
| 66 style="margin:0" />. |
| 65 A popup appears, | 67 A popup appears, |
| 66 and a link named <b>popup.html</b> appears in extension's information, | 68 and a link named <b>popup.html</b> appears in extension's information, |
| 67 under a new "Inspect active views:" heading. | 69 under a new "Inspect active views:" heading. |
| 68 | 70 |
| 69 <p> | 71 <p> |
| 70 <img src="images/debug-popup.png" | 72 <img src="images/debug-popup.png" |
| 71 width="" height="" alt="" /> | 73 width="" height="" alt="" /> |
| 72 | 74 |
| 73 </li> | 75 </li> |
| 74 </ol> | 76 </ol> |
| (...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 139 </li> | 141 </li> |
| 140 <li> | 142 <li> |
| 141 If the <strong>Scripts</strong> button isn't already selected, | 143 If the <strong>Scripts</strong> button isn't already selected, |
| 142 click it. | 144 click it. |
| 143 <span class="comment">[PENDING: can we omit this step?]</span> | 145 <span class="comment">[PENDING: can we omit this step?]</span> |
| 144 </li> | 146 </li> |
| 145 <li> | 147 <li> |
| 146 Click the console button | 148 Click the console button |
| 147 <img src="images/console-button.gif" | 149 <img src="images/console-button.gif" |
| 148 style="border:1px black solid" | 150 style="border:1px black solid" |
| 149 width="18" height="14" alt="" /> | 151 width="18" height="14" alt="" |
| 152 style="margin:0" /> |
| 150 (second from left, at the bottom of the Developer Tools window) | 153 (second from left, at the bottom of the Developer Tools window) |
| 151 so that you can see both the code and the console. | 154 so that you can see both the code and the console. |
| 152 </li> | 155 </li> |
| 153 </ol> | 156 </ol> |
| 154 | 157 |
| 155 <h2 id="debug"> Use the debugger </h2> | 158 <h2 id="debug"> Use the debugger </h2> |
| 156 | 159 |
| 157 <p> | 160 <p> |
| 158 In this section, | 161 In this section, |
| 159 you'll follow the execution of the popup page | 162 you'll follow the execution of the popup page |
| (...skipping 141 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 301 <p class="comment"> | 304 <p class="comment"> |
| 302 [PENDING: do something to help people debug | 305 [PENDING: do something to help people debug |
| 303 content scripts, which show up in blue] | 306 content scripts, which show up in blue] |
| 304 </p> | 307 </p> |
| 305 | 308 |
| 306 <p> | 309 <p> |
| 307 For more ideas, | 310 For more ideas, |
| 308 see the <a href="getstarted.html#summary">Now what?</a> section | 311 see the <a href="getstarted.html#summary">Now what?</a> section |
| 309 of Getting Started. | 312 of Getting Started. |
| 310 </p> | 313 </p> |
| OLD | NEW |