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