| OLD | NEW |
|---|
| (Empty) | |
| 1 <h1 class="page_title">Tutorial: Debugging</h1> |
| 2 <p> |
| 3 This tutorial introduces you to using |
| 4 Google Chrome's built-in Developer Tools |
| 5 to interactively debug an extension. |
| 6 </p> |
| 7 <h2 id="extension-info"> View extension information </h2> |
| 8 <p> |
| 9 To follow this tutorial, you need |
| 10 the Hello World extension that was featured in |
| 11 <a href="getstarted.html">Getting Started</a>. |
| 12 In this section, |
| 13 you'll load the extension |
| 14 and take a look at its information |
| 15 in the Extensions page. |
| 16 </p> |
| 17 <ol> |
| 18 <li> |
| 19 <p> |
| 20 Load the Hello World extension if it isn't already running. |
| 21 If the extension is running, |
| 22 you'll see the Hello World icon |
| 23 <img src="../examples/tutorials/getstarted/icon.png" |
| 24 width="19" height="19" alt="" |
| 25 style="margin:0" /> |
| 26 to the right of |
| 27 your browser's address bar. |
| 28 </p> |
| 29 <p> |
| 30 If the Hello World extension isn't already running, |
| 31 find the extension files and load them. |
| 32 If you don't have a handy copy of the files, |
| 33 extract them from this |
| 34 <a href="../examples/tutorials/getstarted.zip">ZIP file</a>. |
| 35 See Getting Started if you need |
| 36 <a href="getstarted.html#load-ext">instructions |
| 37 for loading the extension</a>. |
| 38 </p> |
| 39 </li> |
| 40 <li> |
| 41 Go to the Extensions page |
| 42 (<b>chrome://extensions</b>), |
| 43 and make sure the page is in Developer mode. |
| 44 </li> |
| 45 <li> |
| 46 Look at the Hello World extension's information on that page. |
| 47 You can see details such as the extension's |
| 48 name, description, and ID. |
| 49 </li> |
| 50 </ol> |
| 51 <h2 id="inspect-popup"> Inspect the popup </h2> |
| 52 <p> |
| 53 As long as your browser is in Developer mode, it's easy to inspect popups. |
| 54 </p> |
| 55 <ol> |
| 56 <li> |
| 57 Go to the Extensions page (<b>chrome://extensions</b>), and make sure Develope
r |
| 58 mode is still enabled. The Extensions page doesn't need to be open |
| 59 for the following to work. The browser remembers the setting, |
| 60 even when the page isn't shown. |
| 61 </li> |
| 62 <li> |
| 63 Right-click the Hello World icon |
| 64 <img src="../examples/tutorials/getstarted/icon.png" |
| 65 width="19" height="19" alt="" |
| 66 style="margin:0" /> |
| 67 and choose the <b>Inspect popup</b> menu item. The popup appears, |
| 68 and a Developer Tools window like the following should display the code |
| 69 for <b>popup.html</b>. |
| 70 <p> |
| 71 <img src="{{static}}/images/devtools-1.gif" alt="" |
| 72 width="500" height="294" /> |
| 73 </p> |
| 74 The popup remains open as long as the Developer Tools window does. |
| 75 </li> |
| 76 <li> |
| 77 If the <strong>Scripts</strong> button isn't already selected, |
| 78 click it. |
| 79 </li> |
| 80 <li> |
| 81 Click the console button |
| 82 <img src="{{static}}/images/console-button.gif" |
| 83 style="margin:0; padding:0" align="absmiddle" |
| 84 width="26" height="22" alt="" />(second |
| 85 from left, |
| 86 at the bottom of the Developer Tools window) |
| 87 so that you can see both the code and the console. |
| 88 </li> |
| 89 </ol> |
| 90 <h2 id="debug"> Use the debugger </h2> |
| 91 <p> |
| 92 In this section, |
| 93 you'll follow the execution of the popup page |
| 94 as it adds images to itself. |
| 95 </p> |
| 96 <ol> |
| 97 <li> |
| 98 Set a breakpoint inside the image-adding loop |
| 99 by searching for the string <b>img.src</b> |
| 100 and clicking the number of the line where it occurs |
| 101 (for example, <strong>37</strong>): |
| 102 <p> |
| 103 <img src="{{static}}/images/devtools-2.gif" alt="" |
| 104 width="500" height="294" /> |
| 105 </p> |
| 106 </li> |
| 107 <li> |
| 108 Make sure you can see the <b>popup.html</b> tab. |
| 109 It should show 20 "hello world" images. |
| 110 </li> |
| 111 <li> |
| 112 At the console prompt, reload the popup page |
| 113 by entering <b>location.reload(true)</b>: |
| 114 <pre> |
| 115 > <b>location.reload(true)</b> |
| 116 </pre> |
| 117 <p> |
| 118 The popup page goes blank as it begins to reload, |
| 119 and its execution stops at line 37. |
| 120 </p> |
| 121 </li> |
| 122 <li> |
| 123 In the upper right part of the tools window, |
| 124 you should see the local scope variables. |
| 125 This section shows the current values of all variables in the current scope. |
| 126 For example, in the following screenshot |
| 127 the value of <code>i</code> is 0, and |
| 128 <code>photos</code> is a node list |
| 129 that contains at least a few elements. |
| 130 (In fact, it contains 20 elements at indexes 0 through 19, |
| 131 each one representing a photo.) |
| 132 <p> |
| 133 <img src="{{static}}/images/devtools-localvars.gif" alt="" |
| 134 width="225" height="215" /> |
| 135 </p> |
| 136 </li> |
| 137 <li> |
| 138 Click the play/pause button |
| 139 <img src="{{static}}/images/play-button.gif" |
| 140 style="margin:0; padding:0" align="absmiddle" |
| 141 width="22" height="20" alt="" />(near |
| 142 the top right of the Developer Tools window) |
| 143 to go through the image-processing loop a single time. |
| 144 Each time you click that button, |
| 145 the value of <code>i</code> increments and |
| 146 another icon appears in the popup page. |
| 147 For example, when <code>i</code> is 10, |
| 148 the popup page looks something like this: |
| 149 </li> |
| 150 <p> |
| 151 <img src="{{static}}/images/devtools-3.gif" |
| 152 width="500" height="245" |
| 153 alt="the popup page with 10 images" /> |
| 154 </p> |
| 155 <li> |
| 156 Use the buttons next to the play/pause button |
| 157 to step over, into, and out of function calls. |
| 158 To let the page finish loading, |
| 159 click line <b>37</b> to disable the breakpoint, |
| 160 and then press play/pause |
| 161 <img src="{{static}}/images/play-button.gif" |
| 162 style="margin:0; padding:0" align="absmiddle" |
| 163 width="22" height="20" alt="" />to |
| 164 continue execution. |
| 165 </li> |
| 166 </ol> |
| 167 <h2 id="summary">Summary</h2> |
| 168 <p> |
| 169 This tutorial demonstrated some techniques you can use |
| 170 to debug your extensions: |
| 171 </p> |
| 172 <ul> |
| 173 <li> |
| 174 Find your extension's ID and links to its pages in |
| 175 the <b>Extensions</b> page |
| 176 (<b>chrome://extensions</b>). |
| 177 </li> |
| 178 <li> |
| 179 View hard-to-reach pages |
| 180 (and any other file in your extension) using |
| 181 <b>chrome-extension://</b><em>extensionId</em><b>/</b><em>filename</em>. |
| 182 </li> |
| 183 <li> |
| 184 Use Developer Tools to inspect |
| 185 and step through a page's JavaScript code. |
| 186 </li> |
| 187 <li> |
| 188 Reload the currently inspected page from the console |
| 189 using <b>location.reload(true)</b>. |
| 190 </li> |
| 191 </ul> |
| 192 <h2 id="next">Now what?</h2> |
| 193 <p> |
| 194 Now that you've been introduced to debugging, |
| 195 here are suggestions for what to do next: |
| 196 </p> |
| 197 <ul> |
| 198 <li> |
| 199 Watch the extensions video |
| 200 <a href="http://www.youtube.com/watch?v=IP0nMv_NI1s&feature=PlayList&p=CA101
D6A85FE9D4B&index=5">Developing and Debugging</a>. |
| 201 </li> |
| 202 <li> |
| 203 Try installing and inspecting other extensions, |
| 204 such as the |
| 205 <a href="samples.html">samples</a>. |
| 206 </li> |
| 207 <li> |
| 208 Try using widely available debugging APIs such as |
| 209 <code>console.log()</code> and <code>console.error()</code> |
| 210 in your extension's JavaScript code. |
| 211 Example: <code>console.log("Hello, world!")</code> |
| 212 </li> |
| 213 <li> |
| 214 Follow the <a href="http://www.chromium.org/devtools/google-chrome-developer
-tools-tutorial">Developer Tools tutorial</a>, |
| 215 explore the |
| 216 <a href="http://www.chromium.org/devtools">Developer Tools site</a>, |
| 217 and watch some video tutorials. |
| 218 </li> |
| 219 </ul> |
| 220 <p> |
| 221 For more ideas, |
| 222 see the <a href="getstarted.html#summary">Now what?</a> section |
| 223 of Getting Started. |
| 224 </p> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10832042:
Extensions Docs Server: Doc conversion script (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src