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.html">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, |
(...skipping 26 matching lines...) Expand all Loading... |
66 | 66 |
67 <ol> | 67 <ol> |
68 <li> | 68 <li> |
69 Go to the Extensions page (<b>chrome://extensions</b>), and make sure Develope
r | 69 Go to the Extensions page (<b>chrome://extensions</b>), and make sure Develope
r |
70 mode is still enabled. The Extensions page doesn't need to be open | 70 mode is still enabled. The Extensions page doesn't need to be open |
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.html</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> |
(...skipping 166 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
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#summary">Now what?</a> section | 260 see the <a href="getstarted.html#summary">Now what?</a> section |
261 of Getting Started. | 261 of Getting Started. |
262 </p> | 262 </p> |
OLD | NEW |