| OLD | NEW |
| 1 <h1>Tutorial: Debugging</h1> | 1 <h1>Tutorial: Debugging</h1> |
| 2 | 2 |
| 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">Getting Started</a>. |
| 17 In this section, | 17 In this section, |
| 18 you'll load the extension | 18 you'll load the extension |
| 19 and take a look at its information | 19 and take a look at its information |
| 20 in the Extensions page. | 20 in the Extensions page. |
| 21 </p> | 21 </p> |
| 22 | 22 |
| 23 <ol> | 23 <ol> |
| 24 <li> | 24 <li> |
| 25 <p> | 25 <p> |
| 26 Load the Hello World extension if it isn't already running. | 26 Load the Hello World extension if it isn't already running. |
| 27 If the extension is running, | 27 If the extension is running, |
| 28 you'll see the Hello World icon | 28 you'll see the Hello World icon |
| 29 <img src="examples/tutorials/getstarted/icon.png" | 29 <img src="examples/tutorials/getstarted/icon.png" |
| 30 width="19" height="19" alt="" | 30 width="19" height="19" alt="" |
| 31 style="margin:0" /> | 31 style="margin:0" /> |
| 32 to the right of | 32 to the right of |
| 33 your browser's address bar. | 33 your browser's address bar. |
| 34 </p> | 34 </p> |
| 35 | 35 |
| 36 <p> | 36 <p> |
| 37 If the Hello World extension isn't already running, | 37 If the Hello World extension isn't already running, |
| 38 find the extension files and load them. | 38 find the extension files and load them. |
| 39 If you don't have a handy copy of the files, | 39 If you don't have a handy copy of the files, |
| 40 extract them from this | 40 extract them from this |
| 41 <a href="examples/tutorials/getstarted.zip" download="getstarted.zip">ZIP
file</a>. | 41 <a href="examples/tutorials/getstarted.zip" download="getstarted.zip">ZIP
file</a>. |
| 42 See Getting Started if you need | 42 See Getting Started if you need |
| 43 <a href="getstarted.html#unpacked">instructions | 43 <a href="getstarted#unpacked">instructions |
| 44 for loading the extension</a>. | 44 for loading the extension</a>. |
| 45 </p> | 45 </p> |
| 46 </li> | 46 </li> |
| 47 | 47 |
| 48 <li> | 48 <li> |
| 49 Go to the Extensions page | 49 Go to the Extensions page |
| 50 (<b>chrome://extensions</b>), | 50 (<b>chrome://extensions</b>), |
| 51 and make sure the page is in Developer mode. | 51 and make sure the page is in Developer mode. |
| 52 </li> | 52 </li> |
| 53 | 53 |
| (...skipping 17 matching lines...) Expand all Loading... |
| 71 for the following to work. The browser remembers the setting, | 71 for the following to work. The browser remembers the setting, |
| 72 even when the page isn't shown. | 72 even when the page isn't shown. |
| 73 </li> | 73 </li> |
| 74 <li> | 74 <li> |
| 75 Right-click the Hello World icon | 75 Right-click the Hello World icon |
| 76 <img src="examples/tutorials/getstarted/icon.png" | 76 <img src="examples/tutorials/getstarted/icon.png" |
| 77 width="19" height="19" alt="" | 77 width="19" height="19" alt="" |
| 78 style="margin:0" /> | 78 style="margin:0" /> |
| 79 and choose the <b>Inspect popup</b> menu item. The popup appears, | 79 and choose the <b>Inspect popup</b> menu item. The popup appears, |
| 80 and a Developer Tools window like the following should display the code | 80 and a Developer Tools window like the following should display the code |
| 81 for <b>popup.html</b>. | 81 for <b>popup</b>. |
| 82 | 82 |
| 83 <p> | 83 <p> |
| 84 <img src="{{static}}/images/devtools-1.gif" alt="" | 84 <img src="{{static}}/images/devtools-1.gif" alt="" |
| 85 width="500" height="294" /> | 85 width="500" height="294" /> |
| 86 </p> | 86 </p> |
| 87 The popup remains open as long as the Developer Tools window does. | 87 The popup remains open as long as the Developer Tools window does. |
| 88 </li> | 88 </li> |
| 89 <li> | 89 <li> |
| 90 If the <strong>Scripts</strong> button isn't already selected, | 90 If the <strong>Scripts</strong> button isn't already selected, |
| 91 click it. | 91 click it. |
| (...skipping 24 matching lines...) Expand all Loading... |
| 116 by searching for the string <b>img.src</b> | 116 by searching for the string <b>img.src</b> |
| 117 and clicking the number of the line where it occurs | 117 and clicking the number of the line where it occurs |
| 118 (for example, <strong>37</strong>): | 118 (for example, <strong>37</strong>): |
| 119 <p> | 119 <p> |
| 120 <img src="{{static}}/images/devtools-2.gif" alt="" | 120 <img src="{{static}}/images/devtools-2.gif" alt="" |
| 121 width="500" height="294" /> | 121 width="500" height="294" /> |
| 122 </p> | 122 </p> |
| 123 </li> | 123 </li> |
| 124 | 124 |
| 125 <li> | 125 <li> |
| 126 Make sure you can see the <b>popup.html</b> tab. | 126 Make sure you can see the <b>popup</b> tab. |
| 127 It should show 20 "hello world" images. | 127 It should show 20 "hello world" images. |
| 128 </li> | 128 </li> |
| 129 | 129 |
| 130 <li> | 130 <li> |
| 131 At the console prompt, reload the popup page | 131 At the console prompt, reload the popup page |
| 132 by entering <b>location.reload(true)</b>: | 132 by entering <b>location.reload(true)</b>: |
| 133 | 133 |
| 134 <pre> | 134 <pre> |
| 135 > <b>location.reload(true)</b> | 135 > <b>location.reload(true)</b> |
| 136 </pre> | 136 </pre> |
| (...skipping 93 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 230 </p> | 230 </p> |
| 231 | 231 |
| 232 <ul> | 232 <ul> |
| 233 <li> | 233 <li> |
| 234 Watch the extensions video | 234 Watch the extensions video |
| 235 <a href="http://www.youtube.com/watch?v=IP0nMv_NI1s&feature=PlayList&p=CA101
D6A85FE9D4B&index=5">Developing and Debugging</a>. | 235 <a href="http://www.youtube.com/watch?v=IP0nMv_NI1s&feature=PlayList&p=CA101
D6A85FE9D4B&index=5">Developing and Debugging</a>. |
| 236 </li> | 236 </li> |
| 237 <li> | 237 <li> |
| 238 Try installing and inspecting other extensions, | 238 Try installing and inspecting other extensions, |
| 239 such as the | 239 such as the |
| 240 <a href="samples.html">samples</a>. | 240 <a href="samples">samples</a>. |
| 241 </li> | 241 </li> |
| 242 <li> | 242 <li> |
| 243 Try using widely available debugging APIs such as | 243 Try using widely available debugging APIs such as |
| 244 <code>console.log()</code> and <code>console.error()</code> | 244 <code>console.log()</code> and <code>console.error()</code> |
| 245 in your extension's JavaScript code. | 245 in your extension's JavaScript code. |
| 246 Example: <code>console.log("Hello, world!")</code> | 246 Example: <code>console.log("Hello, world!")</code> |
| 247 </li> | 247 </li> |
| 248 <li> | 248 <li> |
| 249 Follow the <a href="http://www.chromium.org/devtools/google-chrome-developer
-tools-tutorial">Developer Tools tutorial</a>, | 249 Follow the <a href="http://www.chromium.org/devtools/google-chrome-developer
-tools-tutorial">Developer Tools tutorial</a>, |
| 250 explore the | 250 explore the |
| 251 <a href="http://www.chromium.org/devtools">Developer Tools site</a>, | 251 <a href="http://www.chromium.org/devtools">Developer Tools site</a>, |
| 252 and watch some video tutorials. | 252 and watch some video tutorials. |
| 253 </li> | 253 </li> |
| 254 </ul> | 254 </ul> |
| 255 | 255 |
| 256 | 256 |
| 257 | 257 |
| 258 <p> | 258 <p> |
| 259 For more ideas, | 259 For more ideas, |
| 260 see the <a href="getstarted.html#next-steps">Now what?</a> section | 260 see the <a href="getstarted#next-steps">Now what?</a> section |
| 261 of Getting Started. | 261 of Getting Started. |
| 262 </p> | 262 </p> |
| OLD | NEW |