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 176 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 |