Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(133)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/tut_debugging.html

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698