| OLD | NEW |
|---|
| 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: 1) The <head> information in this page is significant, should be uniform
across api docs and should be edited only with knowledge of the templating mecha
nism. 2) The <body> tag *must* retain id="body" 3) All <body>.innerHTML is gener
eated as an rendering step. If viewed in a browser, it will be re-generated from
the template, json schema and authored overview content. 4) The <body>.innerHTM
L is also generated by an offline step so that this page may easily be indexed b
y search engines. TODO(rafaelw): Abstract this into a "pageshell" that becomes t
he single version of page template shell and the "instance" pages (bookmarks.htm
l, etc...) can be generated with a build step. --><!-- <html> must retain id="te
mplate --><html xmlns="http://www.w3.org/1999/xhtml" jstcache="0"><!-- <head> da
ta is significant and loads the needed libraries and styles --><head jstcache="0
"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" jstcache="
0"> <title jscontent="getPageTitle()" jstcache="1">Tutorial: Debugging</title> <
link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css" jstcache="0">
<script type="text/javascript" src="../../../third_party/jstemplate/jstemplate_c
ompiled.js" jstcache="0"> </script> <script type="text/javascript" src="js/api_p
age_generator.js" jstcache="0"></script> <script type="text/javascript" src="js/
bootstrap.js" jstcache="0"></script> </head><!-- <body> content is completely ge
nerated. Do not edit, as it will be and rewritten. --><body jstcache="0"> <div i
d="container" jstcache="0"> <a name="top" jstcache="0"> </a> <!-- API HEADER -->
<div id="pageHeader" jstcache="0"> <div id="searchbox" jstcache="0"> <form acti
on="http://www.google.com/cse" id="cse-search-box" jstcache="0"> <div jstcache="
0"> <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno" jst
cache="0"> <input type="hidden" name="ie" value="UTF-8" jstcache="0"> <input typ
e="text" name="q" size="31" jstcache="0"> <input type="submit" name="sa" value="
Search" jstcache="0"> </div> </form> <script type="text/javascript" src="http://
www.google.com/jsapi" jstcache="0"></script> <script type="text/javascript" jstc
ache="0">google.load("elements", "1", {packages: "transliteration"});</script> <
script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-
search-box&t13n_langs=en" jstcache="0"></script> <script type="text/javascri
pt" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" j
stcache="0"></script> </div> <div id="pageTitle" jstcache="0"> <h1 jscontent="ge
tPageTitle()" jstcache="1">Tutorial: Debugging</h1> </div> </div> <!-- /pageHead
er --> <div id="pageContent" jstcache="0"> <!-- SIDENAV --> <div id="leftNav" js
tcache="0"> <ul jstcache="0"> <li jstcache="0"> <a href="index.html" jstcache="0
">Home</a></li> <li jstcache="0"> <a href="getstarted.html" jstcache="0">Getting
Started</a></li> <li jstcache="0"> <a href="overview.html" jstcache="0">Overvie
w</a></li> <li jstcache="0"> <a href="devguide.html" jstcache="0"><div jstcache=
"0">Developer's Guide</div></a> <ul jstcache="0"> <li jstcache="0"><a href="tool
strip.html" jstcache="0">Toolstrips</a></li> <li jstcache="0"><a href="pageActio
ns.html" jstcache="0">Page Actions</a></li> <li jstcache="0"><a href="background
_pages.html" jstcache="0">Background Pages</a></li> <li jstcache="0"><a href="co
ntent_scripts.html" jstcache="0">Content Scripts</a></li> <li jstcache="0">Event
s</li> <li jstcache="0"><a href="tabs.html" jstcache="0">Tabs</a></li> <li jstca
che="0"><a href="windows.html" jstcache="0">Windows</a></li> <li jstcache="0"><a
href="bookmarks.html" jstcache="0">Bookmarks</a></li> <li jstcache="0">Themes</
li> <li jstcache="0"><a href="npapi.html" jstcache="0">NPAPI Plugins</a></li> <l
i jstcache="0"><a href="packaging.html" jstcache="0">Packaging</a></li> <li jstc
ache="0">Autoupdate</li> </ul> </li> <li jstcache="0"><a href="tutorials.html" j
stcache="0"><div jstcache="0">Tutorials</div></a> <ul jstcache="0"> <li jstcache
="0" class="leftNavSelected">Debugging</li> </ul> </li> <li jstcache="0">Referen
ce <ul jstcache="0"> <li jstcache="0"> Formats <ul jstcache="0"> <li jstcache="0
"><a href="manifest.html" jstcache="0">Manifest Files</a></li> <li jstcache="0">
Match Patterns</li> <li jstcache="0">Packages (.crx)</li> </ul> </li> <li jstcac
he="0"> <a href="api_index.html" jstcache="0">chrome.* APIs</a> </li> <li jstcac
he="0"> <a href="api_other.html" jstcache="0">Other APIs</a> </li> </ul> </li> <
li jstcache="0"><a href="http://dev.chromium.org/developers/design-documents/ext
ensions/samples" jstcache="0">Samples</a></li> </ul> </div> <div id="mainColumn"
jstcache="0"> <!-- TABLE OF CONTENTS --> <div id="toc" jsdisplay="showPageTOC()
" jstcache="2" style="display: none; "> <p jstcache="0">Contents</p> <ol jstcach
e="0"> <li jsselect="getStaticTOC()" jstcache="9"> <a jscontent="name" jsvalues=
".href:'#' + href" jstcache="14">h2Name</a> <ol jstcache="0"> <li jsselect="$thi
s.children" jstcache="22"> <a jscontent="name" jsvalues=".href:'#' + href" jstca
che="14">h3Name</a> </li> </ol> </li> <div jsselect="apiDefinition" jstcache="3"
> <li jstcache="0"> <a href="#apiReference" jscontent="'API reference: ' + getMo
duleName()" jstcache="4">API reference</a> <ol jstcache="0"> <li jsdisplay="$thi
s.properties" jstcache="5"> <a href="#properties" jstcache="0">Properties</a> <o
l jstcache="0"> <li jsselect="getPropertyListFromObject($this)" jstcache="10"> <
a jscontent="name" jsvalues=".href:'#property-' + name" href="#property-anchor"
jstcache="41">propertyName</a> </li> </ol> </li> <li jsdisplay="functions &&
amp; functions.length > 0" jstcache="6"> <a href="#methods" jstcache="0">Meth
ods</a> <ol jstcache="0"> <li jsselect="functions" jstcache="11"> <a jscontent="
name" jsvalues=".href:'#method-' + name" href="#method-anchor" jstcache="42">met
hodName</a> </li> </ol> </li> <li jsdisplay="events && events.length >
; 0" jstcache="7"> <a href="#events" jstcache="0">Events</a> <ol jstcache="0"> <
li jsselect="events" jstcache="12"> <a jscontent="name" jsvalues=".href:'#event-
' + name" href="#event-anchor" jstcache="43">eventName</a> </li> </ol> </li> <li
jsdisplay="types && types.length > 0" jstcache="8"> <a href="#types"
jstcache="0">Types</a> <ol jstcache="0"> <li jsselect="types" jstcache="13"> <a
jscontent="id" jsvalues=".href:'#type-' + id" href="#id-anchor" jstcache="44">i
d</a> </li> </ol> </li> </ol> </li> </div> </ol> </div> <!-- /TABLE OF CONTENTS
--> <!-- STATIC CONTENT PLACEHOLDER --> <div id="static" jstcache="0"><div id="p
ageData-title" class="pageData" jstcache="0">Tutorial: Debugging</div> <p jstcac
he="0"> [PENDING: intro goes here. This tutorial starts where <a href="getstarte
d.html" jstcache="0">Getting Started</a> ends. Point to files needed.] </p> <p j
stcache="0"> You can use the browser's built-in developer tools to view your ext
ension's code, display debugging output, and debug your extension. </p> <ol jstc
ache="0"> <li jstcache="0"> <p jstcache="0"> Edit <code jstcache="0">my_toolstri
p.html</code>, so that it has the following code: </p> <pre jstcache="0"><b jstc
ache="0"><script> function helloWorld() { var hwFile = 'hello_world.html';
console.log("in helloWorld()"); window.open(hwFile); } </script></b> <
div class="toolstrip-button" onclick="<b jstcache="0">helloWorld();</b>"> <
;span>Hello, World!</span> </div></pre> <p jstcache="0"> The relo
cated code still has the same effect, but now it has some debugging output, than
ks to the call to <code jstcache="0">console.log()</code>.</p> </li> <li jstcach
e="0"> Restart the browser, so that it loads your new version of the extension.
<!-- This might be confusing. Maybe we should instead cover location.reload() la
ter, after we've shown the console. <div class="note"> <b>Tip:</b> If you don't
want to restart your browser, you can get an updated version of the extension by
opening a new window. The new window will contain the updated extension; old wi
ndows will contain the old version. </div> --> </li> <li jstcache="0"> Right-cli
ck the <strong jstcache="0">Hello, World!</strong> button (at the bottom left) t
o bring up the Developer Tools window for this instance of your toolstrip. The w
indow should look something like this: <p jstcache="0"> <img src="images/devtool
s-1.gif" alt="" jstcache="0"> </p> <!-- Possibly we should recommend starting th
e Dev Tools using chrome://extensions, rather than right-click. However, that ad
ds some stuff (such as id) that might be confusing. --> </li> <li jstcache="0">
Click the <strong jstcache="0">Scripts</strong> button. If necessary, choose <st
rong jstcache="0">my_toolstrip.html</strong> from the list of scripts. The resul
t should be something like this: <p jstcache="0"> <img src="images/devtools-2.gi
f" alt="" jstcache="0"> </p> </li> <li jstcache="0"> Set a debugging breakpoint
at the <code jstcache="0">window.open()</code> statement by clicking <strong jst
cache="0">5</strong> in the left column: <p jstcache="0"> <img src="images/devto
ols-3.gif" alt="" jstcache="0"> </p> </li> <li jstcache="0"> Click the Console b
utton (second from left, at the bottom of the Developer Tools window) so that yo
u can see both the code and the console. <p jstcache="0"> <img src="images/devto
ols-4.gif" alt="" jstcache="0"></p> </li> <li jstcache="0"> Back in the main bro
wser window, click the <strong jstcache="0">Hello, World!</strong> button, so th
at the extension begins executing. You should see the output of <code jstcache="
0">console.log()</code> along with the line number, and execution should stop ju
st before the call to <code jstcache="0">window.open()</code>. <p jstcache="0">
<img src="images/devtools-5.gif" alt="" jstcache="0"> </p> <p jstcache="0"> The
Call Stack area at the right of the tools window shows that the <code jstcache="
0">helloWorld()</code> method was called by an anonymous function that was calle
d by <code jstcache="0">onclick</code>. Anywhere in the Call Stack or console th
at you see a file and line number (for example, "my_toolstrip.html:4"), you can
click that text to see the relevant line of code. </p> </li> <li jstcache="0"> I
n the upper right part of the tools window, scroll down (if necessary) until you
can see the local scope variables. This section shows the current values of all
variables in the current scope. For example, you can see that <code jstcache="0
">hwFile</code> is a local variable that has the value "hello_world.html". <p js
tcache="0"> <img src="images/devtools-6.gif" alt="" jstcache="0"> </p> </li> <li
jstcache="0"> Click the buttons at the upper right of the window to resume exec
ution or to step through the code. Once the call to <code jstcache="0">window.op
en()</code> returns, the main browser window should open a new tab that displays
the contents of <code jstcache="0">hello_world.html</code>.</li> </ol> <p jstca
che="0"> You now know how to debug an extension!</p> <h2 id="summary" jstcache="
0">What next?</h2> <p jstcache="0"> [PENDING: Summarize what we did, what it mea
ns, and where to find more information. Suggest where to go next.]</p> </div> <!
-- API PAGE --> <div class="apiPage" jsselect="apiDefinition" jstcache="3" style
="display: none; "> <a name="apiReference" jstcache="0"></a> <h2 jscontent="'API
reference: ' + getModuleName()" jstcache="4">API reference: chrome.apiname </h2
> <!-- PROPERTIES --> <div jsdisplay="$this.properties" class="apiGroup" jstcach
e="5"> <a name="properties" jstcache="0"></a> <h3 id="properties" jstcache="0">P
roperties</h3> <div jsselect="getPropertyListFromObject($this)" jstcache="10"> <
a jsvalues=".name:'property-' + name" jstcache="15"></a> <h4 jscontent="name" js
tcache="16">getLastError</h4> <div class="summary" jstcache="0"> <!-- Note: inte
ntionally longer 80 columns --> <span jscontent="getModuleName() + '.'" jstcache
="23">chrome.extension</span><span jscontent="$this.name" jstcache="24">lastErro
r</span> </div> <div transclude="valueTemplate" jstcache="17"> </div> </div> </d
iv> <!-- /apiGroup --> <!-- METHODS --> <div jsdisplay="functions && fun
ctions.length > 0" class="apiGroup" id="methods" jstcache="6"> <a name="metho
ds" jstcache="0"></a> <h3 jstcache="0">Methods</h3> <!-- iterates over all funct
ions --> <div class="apiItem" jsselect="functions" jstcache="11"> <a jsvalues=".
name:'method-' + name" jstcache="18"></a> <!-- method-anchor --> <h4 jscontent="
name" jstcache="16">method name</h4> <div class="summary" jstcache="0"><span jsd
isplay="returns" jscontent="getTypeName(returns)" jstcache="25">void</span> <!--
Note: intentionally longer 80 columns --> <span jscontent="getFullyQualifiedFun
ctionName($this)" jstcache="26">chrome.module.methodName</span>(<span jsselect="
parameters" jsvalues="class:optional ? 'optional' : ''" jstcache="27"><span jsdi
splay="$index" jstcache="33">, </span><span jscontent="getTypeName($this)" jstca
che="34"></span> <var jstcache="0"><span jscontent="name" jstcache="16"></span><
/var></span>)</div> <div class="description" jstcache="0"> <p class="todo" jsdis
play="!description" jstcache="28">Undocumented.</p> <p jsdisplay="description" j
svalues=".innerHTML:description" jstcache="29"> A description from the json sche
ma def of the function goes here. </p> <!-- PARAMETERS --> <h4 jstcache="0">Para
meters</h4> <dl jstcache="0"> <div jsselect="parameters" jstcache="35"> <!-- VAL
UE: This is a subtemplate that is used elsewhere via jsTemplate *transclude* -->
<div id="valueTemplate" jstcache="0"> <dt jstcache="0"> <var jsdisplay="$this.n
ame" jscontent="$this.name" jstcache="45">paramName</var> <em jstcache="0"> <!--
TYPE --> <div style="display:inline" jstcache="0"> ( <span class="optional" jsd
isplay="optional" jstcache="46">optional</span> <span id="typeTemplate" jstcache
="0"> <span jsdisplay="getTypeRef($this)" jstcache="47"> <a jsvalues=".href: get
TypeRefPage($this) + '#type-' + getTypeRef($this)" jscontent="getTypeRef($this)"
jstcache="49"> Type</a> </span> <span jsdisplay="!getTypeRef($this)" jstcache="
48"> <span jsdisplay="isArray($this)" jstcache="50"> array of <span jsselect="it
ems" jstcache="52"><span transclude="typeTemplate" jstcache="53"></span></span>
</span> <span jsdisplay="!isArray($this)" jscontent="getTypeName($this)" jstcach
e="51">paramType</span> </span> </span> ) </div> </em> </dt> <dd class="todo" js
display="!$this.description" jstcache="38"> Undocumented. </dd> <dd jsdisplay="$
this.description" jsvalues=".innerHTML:$this.description" jstcache="39"> Descrip
tion of this parameter from the json schema. </dd> <!-- OBJECT PROPERTIES --> <d
d jsdisplay="shouldExpandObject($this)" jstcache="40"> <dl jstcache="0"> <div js
select="getPropertyListFromObject($this)" jstcache="10"> <div transclude="valueT
emplate" jstcache="17"> </div> </div> </dl> </dd> </div> <!-- /VALUE --> </div>
</dl> <!-- RETURNS --> <h4 jsdisplay="returns" jstcache="30">Returns</h4> <dl js
tcache="0"> <div jsselect="returns" jstcache="36"> <div transclude="valueTemplat
e" jstcache="17"> </div> </div> </dl> <!-- CALLBACK --> <div jsdisplay="hasCall
back(parameters)" jstcache="31"> <div jsselect="getCallbackParameters(parameters
)" jstcache="37"> <h4 jstcache="0">Callback function</h4> <p jstcache="0"> If yo
u specify the <em jstcache="0">callback</em> parameter, it should specify a func
tion that looks like this: </p> <!-- Note: intentionally longer 80 columns --> <
pre jstcache="0">function(<span jscontent="getSignatureString(parameters)" jstca
che="32">Type param1, Type param2</span>) <span class="subdued" jstcache="0">{..
.}</span>);</pre> <dl jstcache="0"> <div jsselect="parameters" jstcache="35"> <d
iv transclude="valueTemplate" jstcache="17"> </div> </div> </dl> </div> </div> <
/div> <!-- /description --> </div> <!-- /apiItem --> </div> <!-- /apiGroup --> <
!-- EVENTS --> <div jsdisplay="events && events.length > 0" class="ap
iGroup" jstcache="7"> <a name="events" jstcache="0"></a> <h3 id="events" jstcach
e="0">Events</h3> <!-- iterates over all events --> <div jsselect="events" class
="apiItem" jstcache="12"> <a jsvalues=".name:'event-' + name" jstcache="19"></a>
<h4 jscontent="name" jstcache="16">event name</h4> <div class="summary" jstcach
e="0"> <!-- Note: intentionally longer 80 columns --> <span jscontent="getModule
Name() + '.'" class="subdued" jstcache="23">chrome.bookmarks</span><span jsconte
nt="name" jstcache="16">onEvent</span><span class="subdued" jstcache="0">.addLis
tener</span>(function(<span jscontent="getSignatureString(parameters)" jstcache=
"32">Type param1, Type param2</span>) <span class="subdued" jstcache="0">{...}</
span>); </div> <div class="description" jstcache="0"> <p class="todo" jsdisplay=
"!description" jstcache="28">Undocumented.</p> <p jsdisplay="description" jsvalu
es=".innerHTML:description" jstcache="29"> A description from the json schema de
f of the event goes here. </p> <!-- PARAMETERS --> <h4 jstcache="0">Parameters</
h4> <dl jstcache="0"> <div jsselect="parameters" jstcache="35"> <div transclude=
"valueTemplate" jstcache="17"> </div> </div> </dl> </div> <!-- /decription --> <
/div> <!-- /apiItem --> </div> <!-- /apiGroup --> <!-- TYPES --> <div jsdisplay=
"types && types.length > 0" class="apiGroup" jstcache="8"> <a name="t
ypes" jstcache="0"></a> <h3 id="types" jstcache="0">Types</h3> <!-- iterates ove
r all types --> <div jsselect="types" class="apiItem" jstcache="13"> <a jsvalues
=".name:'type-' + id" jstcache="20"></a> <h4 jscontent="id" jstcache="21">type n
ame</h4> <div transclude="valueTemplate" jstcache="17"> </div> </div> <!-- /apiI
tem --> </div> <!-- /apiGroup --> </div> <!-- /apiPage --> </div> <!-- /mainColu
mn --> </div> <!-- /pageContent --> <div id="pageFooter" --="" jstcache="0"> <p
jstcache="0"> Except as otherwise <a href="http://code.google.com/policies.html#
restrictions" jstcache="0">noted</a>, the content of this page is licensed under
the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/" jstcach
e="0">Creative Commons Attribution 3.0 License</a>, and code samples are license
d under the <a rel="license" href="http://code.google.com/google_bsd_license.htm
l" jstcache="0">BSD License</a>. </p> <p jstcache="0"> ©2009 Google </p> </div>
<!-- /pageFooter --> </div> <!-- /container --> </body></html> | 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: |
| 2 1) The <head> information in this page is significant, should be uniform |
| 3 across api docs and should be edited only with knowledge of the |
| 4 templating mechanism. |
| 5 2) The <body> tag *must* retain id="body" |
| 6 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a |
| 7 browser, it will be re-generated from the template, json schema and |
| 8 authored overview content. |
| 9 4) The <body>.innerHTML is also generated by an offline step so that this |
| 10 page may easily be indexed by search engines. |
| 11 |
| 12 TODO(rafaelw): Abstract this into a "pageshell" that becomes the single |
| 13 version of page template shell and the "instance" pages (bookmarks.html, |
| 14 etc...) can be generated with a build step. |
| 15 --><!-- <html> must retain id="template --><html xmlns="http://www.w3.org/1999/x
html" jstcache="0"><!-- <head> data is significant and loads the needed librarie
s and styles --><head jstcache="0"> |
| 16 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" jstcache=
"0"> |
| 17 <title jscontent="getPageTitle()" jstcache="1">Tutorial: Debugging</title> |
| 18 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css" jstcache=
"0"> |
| 19 <script type="text/javascript" src="../../../third_party/jstemplate/jstempla
te_compiled.js" jstcache="0"> |
| 20 </script> |
| 21 <script type="text/javascript" src="js/api_page_generator.js" jstcache="0"><
/script> |
| 22 <script type="text/javascript" src="js/bootstrap.js" jstcache="0"></script> |
| 23 </head><!-- <body> content is completely generated. Do not edit, as it will be |
| 24 and rewritten. --><body jstcache="0"> <div id="container" jstcache="0"> |
| 25 <a name="top" jstcache="0"> </a> |
| 26 <!-- API HEADER --> |
| 27 <div id="pageHeader" jstcache="0"> |
| 28 <div id="searchbox" jstcache="0"> |
| 29 <form action="http://www.google.com/cse" id="cse-search-box" jstcache="0
"> |
| 30 <div jstcache="0"> |
| 31 <input type="hidden" name="cx" value="002967670403910741006:61_cvzfq
tno" jstcache="0"> |
| 32 <input type="hidden" name="ie" value="UTF-8" jstcache="0"> |
| 33 <input type="text" name="q" size="31" jstcache="0"> |
| 34 <input type="submit" name="sa" value="Search" jstcache="0"> |
| 35 </div> |
| 36 </form> |
| 37 |
| 38 <script type="text/javascript" src="http://www.google.com/jsapi" jstcach
e="0"></script> |
| 39 <script type="text/javascript" jstcache="0">google.load("elements", "1",
{packages: "transliteration"});</script> |
| 40 <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?
form=cse-search-box&t13n_langs=en" jstcache="0"></script> |
| 41 <script type="text/javascript" src="http://www.google.com/coop/cse/brand
?form=cse-search-box&lang=en" jstcache="0"></script> |
| 42 </div> |
| 43 <div id="pageTitle" jstcache="0"> |
| 44 <h1 jscontent="getPageTitle()" jstcache="1">Tutorial: Debugging</h1> |
| 45 </div> |
| 46 </div> <!-- /pageHeader --> |
| 47 |
| 48 <div id="pageContent" jstcache="0"> |
| 49 <!-- SIDENAV --> |
| 50 <div id="leftNav" jstcache="0"> |
| 51 <ul jstcache="0"> |
| 52 <li jstcache="0"> <a href="index.html" jstcache="0">Home</a></li> |
| 53 <li jstcache="0"> <a href="getstarted.html" jstcache="0">Getting Start
ed</a></li> |
| 54 <li jstcache="0"> <a href="overview.html" jstcache="0">Overview</a></l
i> |
| 55 <li jstcache="0"> <a href="devguide.html" jstcache="0"><div jstcache="
0">Developer's Guide</div></a> |
| 56 <ul jstcache="0"> |
| 57 <li jstcache="0"><a href="toolstrip.html" jstcache="0">Toolstrips<
/a></li> |
| 58 <li jstcache="0"><a href="pageActions.html" jstcache="0">Page Acti
ons</a></li> |
| 59 <li jstcache="0"><a href="background_pages.html" jstcache="0">Back
ground Pages</a></li> |
| 60 <li jstcache="0"><a href="content_scripts.html" jstcache="0">Conte
nt Scripts</a></li> |
| 61 <li jstcache="0"><a href="events.html" jstcache="0">Events</a></li
> |
| 62 <li jstcache="0"><a href="tabs.html" jstcache="0">Tabs</a></li> |
| 63 <li jstcache="0"><a href="windows.html" jstcache="0">Windows</a></
li> |
| 64 <li jstcache="0"><a href="bookmarks.html" jstcache="0">Bookmarks</
a></li> |
| 65 <li jstcache="0"><a href="themes.html" jstcache="0">Themes</a></li
> |
| 66 <li jstcache="0"><a href="npapi.html" jstcache="0">NPAPI Plugins</
a></li> |
| 67 <li jstcache="0"><a href="packaging.html" jstcache="0">Packaging</
a></li> |
| 68 <li jstcache="0">Autoupdate</li> |
| 69 </ul> |
| 70 </li> |
| 71 <li jstcache="0"><a href="tutorials.html" jstcache="0"><div jstcache="
0">Tutorials</div></a> |
| 72 <ul jstcache="0"> |
| 73 <li jstcache="0" class="leftNavSelected">Debugging</li> |
| 74 </ul> |
| 75 </li> |
| 76 <li jstcache="0">Reference |
| 77 <ul jstcache="0"> |
| 78 <li jstcache="0"> Formats |
| 79 <ul jstcache="0"> |
| 80 <li jstcache="0"><a href="manifest.html" jstcache="0">Manifest
Files</a></li> |
| 81 <li jstcache="0"><a href="match_patterns.html" jstcache="0">Ma
tch Patterns</a></li> |
| 82 <li jstcache="0">Packages (.crx)</li> |
| 83 </ul> |
| 84 </li> |
| 85 <li jstcache="0"> <a href="api_index.html" jstcache="0">chrome.* A
PIs</a> </li> |
| 86 <li jstcache="0"> <a href="api_other.html" jstcache="0">Other APIs
</a> </li> |
| 87 </ul> |
| 88 </li> |
| 89 <li jstcache="0"><a href="http://dev.chromium.org/developers/design-doc
uments/extensions/samples" jstcache="0">Samples</a></li> |
| 90 </ul> |
| 91 </div> |
| 92 |
| 93 <div id="mainColumn" jstcache="0"> |
| 94 <!-- TABLE OF CONTENTS --> |
| 95 <div id="toc" jsdisplay="showPageTOC()" jstcache="2" style="display: non
e; "> |
| 96 <p jstcache="0">Contents</p> |
| 97 <ol jstcache="0"> |
| 98 <li jsselect="getStaticTOC()" jstcache="9"> |
| 99 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">h2Na
me</a> |
| 100 <ol jstcache="0"> |
| 101 <li jsselect="$this.children" jstcache="22"> |
| 102 <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">
h3Name</a> |
| 103 </li> |
| 104 </ol> |
| 105 </li> |
| 106 <div jsselect="apiDefinition" jstcache="3"> |
| 107 <li jstcache="0"> |
| 108 <a href="#apiReference" jscontent="'API reference: ' + getModule
Name()" jstcache="4">API reference</a> |
| 109 <ol jstcache="0"> |
| 110 <li jsdisplay="$this.properties" jstcache="5"> |
| 111 <a href="#properties" jstcache="0">Properties</a> |
| 112 <ol jstcache="0"> |
| 113 <li jsselect="getPropertyListFromObject($this)" jstcache="
10"> |
| 114 <a jscontent="name" jsvalues=".href:'#property-' + name"
href="#property-anchor" jstcache="42">propertyName</a> |
| 115 </li> |
| 116 </ol> |
| 117 </li> |
| 118 <li jsdisplay="functions && functions.length > 0" j
stcache="6"> |
| 119 <a href="#methods" jstcache="0">Methods</a> |
| 120 <ol jstcache="0"> |
| 121 <li jsselect="functions.sort(sortByName)" jstcache="11"> |
| 122 <a jscontent="name" jsvalues=".href:'#method-' + name" h
ref="#method-anchor" jstcache="43">methodName</a> |
| 123 </li> |
| 124 </ol> |
| 125 </li> |
| 126 <li jsdisplay="events && events.length > 0" jstcach
e="7"> |
| 127 <a href="#events" jstcache="0">Events</a> |
| 128 <ol jstcache="0"> |
| 129 <li jsselect="events.sort(sortByName)" jstcache="12"> |
| 130 <a jscontent="name" jsvalues=".href:'#event-' + name" hr
ef="#event-anchor" jstcache="44">eventName</a> |
| 131 </li> |
| 132 </ol> |
| 133 </li> |
| 134 <li jsdisplay="types && types.length > 0" jstcache=
"8"> |
| 135 <a href="#types" jstcache="0">Types</a> |
| 136 <ol jstcache="0"> |
| 137 <li jsselect="types.sort(sortByName)" jstcache="38"> |
| 138 <a jscontent="id" jsvalues=".href:'#type-' + id" href="#
id-anchor" jstcache="45">id</a> |
| 139 </li> |
| 140 </ol> |
| 141 </li> |
| 142 </ol> |
| 143 </li> |
| 144 </div> |
| 145 </ol> |
| 146 </div> |
| 147 <!-- /TABLE OF CONTENTS --> |
| 148 |
| 149 <!-- STATIC CONTENT PLACEHOLDER --> |
| 150 <div id="static" jstcache="0"><div id="pageData-title" class="pageData"
jstcache="0">Tutorial: Debugging</div> |
| 151 |
| 152 <p jstcache="0"> |
| 153 [PENDING: intro goes here. |
| 154 This tutorial starts where |
| 155 <a href="getstarted.html" jstcache="0">Getting Started</a> ends. |
| 156 Point to files needed.] |
| 157 </p> |
| 158 |
| 159 <p jstcache="0"> |
| 160 You can use the browser's built-in developer tools |
| 161 to view your extension's code, |
| 162 display debugging output, |
| 163 and debug your extension. |
| 164 </p> |
| 165 <ol jstcache="0"> |
| 166 <li jstcache="0"> |
| 167 <p jstcache="0"> Edit <code jstcache="0">my_toolstrip.html</code>, so that i
t has the following code: </p> |
| 168 <pre jstcache="0"><b jstcache="0"><script> |
| 169 function helloWorld() { |
| 170 var hwFile = 'hello_world.html'; |
| 171 console.log("in helloWorld()"); |
| 172 window.open(hwFile); |
| 173 } |
| 174 </script></b> |
| 175 |
| 176 <div class="toolstrip-button" onclick="<b jstcache="0">helloWorld();</b>"> |
| 177 <span>Hello, World!</span> |
| 178 </div></pre> |
| 179 <p jstcache="0"> The relocated code still has the same effect, |
| 180 but now it has some debugging output, |
| 181 thanks to the call to <code jstcache="0">console.log()</code>.</p> |
| 182 </li> |
| 183 <li jstcache="0"> |
| 184 Restart the browser, so that it loads your new version of the extension. |
| 185 |
| 186 <!-- |
| 187 This might be confusing. |
| 188 Maybe we should instead cover location.reload() later, |
| 189 after we've shown the console. |
| 190 <div class="note"> |
| 191 <b>Tip:</b> |
| 192 If you don't want to restart your browser, |
| 193 you can get an updated version of the extension |
| 194 by opening a new window. |
| 195 The new window will contain the updated extension; |
| 196 old windows will contain the old version. |
| 197 </div> |
| 198 --> |
| 199 </li> |
| 200 <li jstcache="0"> |
| 201 Right-click the <strong jstcache="0">Hello, World!</strong> button |
| 202 (at the bottom left) |
| 203 to bring up the Developer Tools window |
| 204 for this instance of your toolstrip. |
| 205 The window should look something like this: |
| 206 <p jstcache="0"> |
| 207 <img src="images/devtools-1.gif" alt="" jstcache="0"> </p> |
| 208 <!-- |
| 209 Possibly we should recommend starting the Dev Tools |
| 210 using chrome://extensions, rather than right-click. |
| 211 However, that adds some stuff (such as id) |
| 212 that might be confusing. |
| 213 --> |
| 214 |
| 215 </li> |
| 216 <li jstcache="0"> |
| 217 Click the <strong jstcache="0">Scripts</strong> button. |
| 218 If necessary, choose <strong jstcache="0">my_toolstrip.html</strong> |
| 219 from the list of scripts. |
| 220 The result should be something like this: |
| 221 <p jstcache="0"> |
| 222 <img src="images/devtools-2.gif" alt="" jstcache="0"> </p> |
| 223 </li> |
| 224 <li jstcache="0"> |
| 225 Set a debugging breakpoint at the <code jstcache="0">window.open()</code> stat
ement |
| 226 by clicking <strong jstcache="0">5</strong> in the left column: |
| 227 <p jstcache="0"> |
| 228 <img src="images/devtools-3.gif" alt="" jstcache="0"> </p> |
| 229 </li> |
| 230 <li jstcache="0"> |
| 231 Click the Console button |
| 232 (second from left, at the bottom of the Developer Tools window) |
| 233 so that you can see both the code and the console. |
| 234 <p jstcache="0"> |
| 235 <img src="images/devtools-4.gif" alt="" jstcache="0"></p> |
| 236 </li> |
| 237 <li jstcache="0"> |
| 238 Back in the main browser window, |
| 239 click the <strong jstcache="0">Hello, World!</strong> button, |
| 240 so that the extension begins executing. |
| 241 You should see the output of <code jstcache="0">console.log()</code> |
| 242 along with the line number, |
| 243 and execution should stop just before |
| 244 the call to <code jstcache="0">window.open()</code>. |
| 245 <p jstcache="0"> |
| 246 <img src="images/devtools-5.gif" alt="" jstcache="0"> |
| 247 </p> |
| 248 |
| 249 <p jstcache="0"> |
| 250 The Call Stack area at the right of the tools window shows that |
| 251 the <code jstcache="0">helloWorld()</code> method was called by an anonymous f
unction |
| 252 that was called by <code jstcache="0">onclick</code>. |
| 253 Anywhere in the Call Stack or console that you see a file and line number |
| 254 (for example, "my_toolstrip.html:4"), |
| 255 you can click that text to see the relevant line of code. </p> |
| 256 </li> |
| 257 <li jstcache="0"> |
| 258 In the upper right part of the tools window, |
| 259 scroll down (if necessary) until you can see the local scope variables. |
| 260 This section shows the current values of all variables in the current scope. |
| 261 For example, you can see that <code jstcache="0">hwFile</code> is a local vari
able |
| 262 that has the value "hello_world.html". |
| 263 <p jstcache="0"> |
| 264 <img src="images/devtools-6.gif" alt="" jstcache="0"> </p> |
| 265 </li> |
| 266 <li jstcache="0"> |
| 267 Click the buttons at the upper right of the window |
| 268 to resume execution or to step through the code. |
| 269 Once the call to <code jstcache="0">window.open()</code> returns, |
| 270 the main browser window should open a new tab |
| 271 that displays the contents of <code jstcache="0">hello_world.html</code>.</li> |
| 272 </ol> |
| 273 <p jstcache="0"> |
| 274 You now know how to debug an extension!</p> |
| 275 |
| 276 <h2 id="summary" jstcache="0">What next?</h2> |
| 277 |
| 278 <p jstcache="0"> |
| 279 [PENDING: Summarize what we did, |
| 280 what it means, |
| 281 and where to find more information. |
| 282 Suggest where to go next.]</p> |
| 283 </div> |
| 284 |
| 285 <!-- API PAGE --> |
| 286 <div class="apiPage" jsselect="apiDefinition" jstcache="3" style="displa
y: none; "> |
| 287 <a name="apiReference" jstcache="0"></a> |
| 288 <h2 jscontent="'API reference: ' + getModuleName()" jstcache="4">API ref
erence: chrome.apiname </h2> |
| 289 |
| 290 <!-- PROPERTIES --> |
| 291 <div jsdisplay="$this.properties" class="apiGroup" jstcache="5"> |
| 292 <a name="properties" jstcache="0"></a> |
| 293 <h3 id="properties" jstcache="0">Properties</h3> |
| 294 |
| 295 <div jsselect="getPropertyListFromObject($this)" jstcache="10"> |
| 296 <a jsvalues=".name:'property-' + name" jstcache="15"></a> |
| 297 <h4 jscontent="name" jstcache="16">getLastError</h4> |
| 298 <div class="summary" jstcache="0"> |
| 299 <!-- Note: intentionally longer 80 columns --> |
| 300 <span jscontent="getModuleName() + '.'" jstcache="23">chrome.ext
ension</span><span jscontent="$this.name" jstcache="24">lastError</span> |
| 301 </div> |
| 302 <div transclude="valueTemplate" jstcache="17"> |
| 303 </div> |
| 304 </div> |
| 305 |
| 306 </div> <!-- /apiGroup --> |
| 307 |
| 308 <!-- METHODS --> |
| 309 <div jsdisplay="functions && functions.length > 0" class="a
piGroup" id="methods" jstcache="6"> |
| 310 <a name="methods" jstcache="0"></a> |
| 311 <h3 jstcache="0">Methods</h3> |
| 312 |
| 313 <!-- iterates over all functions --> |
| 314 <div class="apiItem" jsselect="functions.sort(sortByName)" jstcache=
"11"> |
| 315 <a jsvalues=".name:'method-' + name" jstcache="18"></a> <!-- metho
d-anchor --> |
| 316 <h4 jscontent="name" jstcache="16">method name</h4> |
| 317 |
| 318 <div class="summary" jstcache="0"><span jsdisplay="returns" jscont
ent="getTypeName(returns)" jstcache="25">void</span> |
| 319 <!-- Note: intentionally longer 80 columns --> |
| 320 <span jscontent="getFullyQualifiedFunctionName($this)" jstcach
e="26">chrome.module.methodName</span>(<span jsselect="parameters" jsvalues="cla
ss:optional ? 'optional' : ''" jstcache="27"><span jsdisplay="$index" jstcache="
33">, </span><span jscontent="getTypeName($this)" jstcache="34"></span> |
| 321 <var jstcache="0"><span jscontent="name" jstcache="16"></s
pan></var></span>)</div> |
| 322 |
| 323 <div class="description" jstcache="0"> |
| 324 <p class="todo" jsdisplay="!description" jstcache="28">Undocumen
ted.</p> |
| 325 <p jsdisplay="description" jsvalues=".innerHTML:description" jst
cache="29"> |
| 326 A description from the json schema def of the function goes he
re. |
| 327 </p> |
| 328 |
| 329 <!-- PARAMETERS --> |
| 330 <h4 jstcache="0">Parameters</h4> |
| 331 <dl jstcache="0"> |
| 332 <div jsselect="parameters" jstcache="35"> |
| 333 |
| 334 <!-- VALUE: This is a subtemplate that is used elsewhere |
| 335 via jsTemplate *transclude* --> |
| 336 <div id="valueTemplate" jstcache="0"> |
| 337 <dt jstcache="0"> |
| 338 <var jsdisplay="$this.name" jscontent="$this.name" jstca
che="46">paramName</var> |
| 339 <em jstcache="0"> |
| 340 |
| 341 <!-- TYPE --> |
| 342 <div style="display:inline" jstcache="0"> |
| 343 ( |
| 344 <span class="optional" jsdisplay="optional" jstc
ache="47">optional</span> |
| 345 <span id="typeTemplate" jstcache="0"> |
| 346 <span jsdisplay="getTypeRef($this)" jstcache="
48"> |
| 347 <a jsvalues=".href: getTypeRefPage($this) +
'#type-' + getTypeRef($this)" jscontent="getTypeRef($this)" jstcache="50"> Type<
/a> |
| 348 </span> |
| 349 <span jsdisplay="!getTypeRef($this)" jstcache=
"49"> |
| 350 <span jsdisplay="isArray($this)" jstcache="5
1"> |
| 351 array of <span jsselect="items" jstcache="
53"><span transclude="typeTemplate" jstcache="54"></span></span> |
| 352 </span> |
| 353 <span jsdisplay="!isArray($this)" jscontent=
"getTypeName($this)" jstcache="52">paramType</span> |
| 354 </span> |
| 355 </span> |
| 356 ) |
| 357 </div> |
| 358 |
| 359 </em> |
| 360 </dt> |
| 361 <dd class="todo" jsdisplay="!$this.description" jstcache="
39"> |
| 362 Undocumented. |
| 363 </dd> |
| 364 <dd jsdisplay="$this.description" jsvalues=".innerHTML:$th
is.description" jstcache="40"> |
| 365 Description of this parameter from the json schema. |
| 366 </dd> |
| 367 |
| 368 <!-- OBJECT PROPERTIES --> |
| 369 <dd jsdisplay="shouldExpandObject($this)" jstcache="41"> |
| 370 <dl jstcache="0"> |
| 371 <div jsselect="getPropertyListFromObject($this)" jstca
che="10"> |
| 372 <div transclude="valueTemplate" jstcache="17"> |
| 373 </div> |
| 374 </div> |
| 375 </dl> |
| 376 </dd> |
| 377 </div> <!-- /VALUE --> |
| 378 |
| 379 </div> |
| 380 </dl> |
| 381 |
| 382 <!-- RETURNS --> |
| 383 <h4 jsdisplay="returns" jstcache="30">Returns</h4> |
| 384 <dl jstcache="0"> |
| 385 <div jsselect="returns" jstcache="36"> |
| 386 <div transclude="valueTemplate" jstcache="17"> |
| 387 </div> |
| 388 </div> |
| 389 </dl> |
| 390 |
| 391 <!-- CALLBACK --> |
| 392 <div jsdisplay="hasCallback(parameters)" jstcache="31"> |
| 393 <div jsselect="getCallbackParameters(parameters)" jstcache="37
"> |
| 394 <h4 jstcache="0">Callback function</h4> |
| 395 <p jstcache="0"> |
| 396 If you specify the <em jstcache="0">callback</em> parameter, |
| 397 it should specify a function that looks like this: |
| 398 </p> |
| 399 |
| 400 <!-- Note: intentionally longer 80 columns --> |
| 401 <pre jstcache="0">function(<span jscontent="getSignatureString
(parameters)" jstcache="32">Type param1, Type param2</span>) <span class="subdue
d" jstcache="0">{...}</span>);</pre> |
| 402 <dl jstcache="0"> |
| 403 <div jsselect="parameters" jstcache="35"> |
| 404 <div transclude="valueTemplate" jstcache="17"> |
| 405 </div> |
| 406 </div> |
| 407 </dl> |
| 408 </div> |
| 409 </div> |
| 410 |
| 411 </div> <!-- /description --> |
| 412 |
| 413 </div> <!-- /apiItem --> |
| 414 |
| 415 </div> <!-- /apiGroup --> |
| 416 |
| 417 <!-- EVENTS --> |
| 418 <div jsdisplay="events && events.length > 0" class="apiGrou
p" jstcache="7"> |
| 419 <a name="events" jstcache="0"></a> |
| 420 <h3 id="events" jstcache="0">Events</h3> |
| 421 |
| 422 <!-- iterates over all events --> |
| 423 <div jsselect="events.sort(sortByName)" class="apiItem" jstcache="12
"> |
| 424 <a jsvalues=".name:'event-' + name" jstcache="19"></a> |
| 425 <h4 jscontent="name" jstcache="16">event name</h4> |
| 426 |
| 427 <div class="summary" jstcache="0"> |
| 428 <!-- Note: intentionally longer 80 columns --> |
| 429 <span jscontent="getModuleName() + '.'" class="subdued" jstcache
="23">chrome.bookmarks</span><span jscontent="name" jstcache="16">onEvent</span>
<span class="subdued" jstcache="0">.addListener</span>(function(<span jscontent=
"getSignatureString(parameters)" jstcache="32">Type param1, Type param2</span>)
<span class="subdued" jstcache="0">{...}</span>); |
| 430 </div> |
| 431 |
| 432 <div class="description" jstcache="0"> |
| 433 <p class="todo" jsdisplay="!description" jstcache="28">Undocumen
ted.</p> |
| 434 <p jsdisplay="description" jsvalues=".innerHTML:description" jst
cache="29"> |
| 435 A description from the json schema def of the event goes here. |
| 436 </p> |
| 437 |
| 438 <!-- PARAMETERS --> |
| 439 <h4 jstcache="0">Parameters</h4> |
| 440 <dl jstcache="0"> |
| 441 <div jsselect="parameters" jstcache="35"> |
| 442 <div transclude="valueTemplate" jstcache="17"> |
| 443 </div> |
| 444 </div> |
| 445 </dl> |
| 446 |
| 447 </div> <!-- /decription --> |
| 448 |
| 449 </div> <!-- /apiItem --> |
| 450 |
| 451 </div> <!-- /apiGroup --> |
| 452 |
| 453 <!-- TYPES --> |
| 454 <div jsdisplay="types && types.length > 0" class="apiGroup"
jstcache="8"> |
| 455 <a name="types.sort(sortByName)" jstcache="0"></a> |
| 456 <h3 id="types" jstcache="0">Types</h3> |
| 457 |
| 458 <!-- iterates over all types --> |
| 459 <div jsselect="types" class="apiItem" jstcache="13"> |
| 460 <a jsvalues=".name:'type-' + id" jstcache="20"></a> |
| 461 <h4 jscontent="id" jstcache="21">type name</h4> |
| 462 |
| 463 <div transclude="valueTemplate" jstcache="17"> |
| 464 </div> |
| 465 |
| 466 </div> <!-- /apiItem --> |
| 467 |
| 468 </div> <!-- /apiGroup --> |
| 469 |
| 470 </div> <!-- /apiPage --> |
| 471 </div> <!-- /mainColumn --> |
| 472 </div> <!-- /pageContent --> |
| 473 <div id="pageFooter" --="" jstcache="0"> |
| 474 <p jstcache="0"> |
| 475 Except as otherwise <a href="http://code.google.com/policies.html#restrictions
" jstcache="0">noted</a>, |
| 476 the content of this page is licensed under the <a rel="license" href="http://c
reativecommons.org/licenses/by/3.0/" jstcache="0">Creative Commons |
| 477 Attribution 3.0 License</a>, and code samples are licensed under the |
| 478 <a rel="license" href="http://code.google.com/google_bsd_license.html" jstcach
e="0">BSD License</a>. |
| 479 </p> |
| 480 <p jstcache="0"> |
| 481 ©2009 Google |
| 482 </p> |
| 483 </div> <!-- /pageFooter --> |
| 484 </div> <!-- /container --> |
| 485 </body></html> |
| 486 #EOF |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 179068:
Extension Doc Changes (no building or testable changes): minor changes for tab & windows doc (Closed)
