diff options
Diffstat (limited to 'chrome/common/extensions/docs/tut_debugging.html')
| -rwxr-xr-x | chrome/common/extensions/docs/tut_debugging.html | 487 |
1 files changed, 486 insertions, 1 deletions
diff --git a/chrome/common/extensions/docs/tut_debugging.html b/chrome/common/extensions/docs/tut_debugging.html index 907c556..d67fdad 100755 --- a/chrome/common/extensions/docs/tut_debugging.html +++ b/chrome/common/extensions/docs/tut_debugging.html @@ -1 +1,486 @@ -<!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 mechanism. 2) The <body> tag *must* retain id="body" 3) All <body>.innerHTML is genereated 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>.innerHTML is also generated by an offline step so that this page may easily be indexed by search engines. TODO(rafaelw): Abstract this into a "pageshell" that becomes the single version of page template shell and the "instance" pages (bookmarks.html, etc...) can be generated with a build step. --><!-- <html> must retain id="template --><html xmlns="http://www.w3.org/1999/xhtml" jstcache="0"><!-- <head> data 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_compiled.js" jstcache="0"> </script> <script type="text/javascript" src="js/api_page_generator.js" jstcache="0"></script> <script type="text/javascript" src="js/bootstrap.js" jstcache="0"></script> </head><!-- <body> content is completely generated. Do not edit, as it will be and rewritten. --><body jstcache="0"> <div id="container" jstcache="0"> <a name="top" jstcache="0"> </a> <!-- API HEADER --> <div id="pageHeader" jstcache="0"> <div id="searchbox" jstcache="0"> <form action="http://www.google.com/cse" id="cse-search-box" jstcache="0"> <div jstcache="0"> <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno" jstcache="0"> <input type="hidden" name="ie" value="UTF-8" jstcache="0"> <input type="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" jstcache="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/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" jstcache="0"></script> </div> <div id="pageTitle" jstcache="0"> <h1 jscontent="getPageTitle()" jstcache="1">Tutorial: Debugging</h1> </div> </div> <!-- /pageHeader --> <div id="pageContent" jstcache="0"> <!-- SIDENAV --> <div id="leftNav" jstcache="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">Overview</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="toolstrip.html" jstcache="0">Toolstrips</a></li> <li jstcache="0"><a href="pageActions.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="content_scripts.html" jstcache="0">Content Scripts</a></li> <li jstcache="0">Events</li> <li jstcache="0"><a href="tabs.html" jstcache="0">Tabs</a></li> <li jstcache="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> <li jstcache="0"><a href="packaging.html" jstcache="0">Packaging</a></li> <li jstcache="0">Autoupdate</li> </ul> </li> <li jstcache="0"><a href="tutorials.html" jstcache="0"><div jstcache="0">Tutorials</div></a> <ul jstcache="0"> <li jstcache="0" class="leftNavSelected">Debugging</li> </ul> </li> <li jstcache="0">Reference <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 jstcache="0"> <a href="api_index.html" jstcache="0">chrome.* APIs</a> </li> <li jstcache="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/extensions/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 jstcache="0"> <li jsselect="getStaticTOC()" jstcache="9"> <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">h2Name</a> <ol jstcache="0"> <li jsselect="$this.children" jstcache="22"> <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">h3Name</a> </li> </ol> </li> <div jsselect="apiDefinition" jstcache="3"> <li jstcache="0"> <a href="#apiReference" jscontent="'API reference: ' + getModuleName()" jstcache="4">API reference</a> <ol jstcache="0"> <li jsdisplay="$this.properties" jstcache="5"> <a href="#properties" jstcache="0">Properties</a> <ol 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 && functions.length > 0" jstcache="6"> <a href="#methods" jstcache="0">Methods</a> <ol jstcache="0"> <li jsselect="functions" jstcache="11"> <a jscontent="name" jsvalues=".href:'#method-' + name" href="#method-anchor" jstcache="42">methodName</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">id</a> </li> </ol> </li> </ol> </li> </div> </ol> </div> <!-- /TABLE OF CONTENTS --> <!-- STATIC CONTENT PLACEHOLDER --> <div id="static" jstcache="0"><div id="pageData-title" class="pageData" jstcache="0">Tutorial: Debugging</div> <p jstcache="0"> [PENDING: intro goes here. This tutorial starts where <a href="getstarted.html" jstcache="0">Getting Started</a> ends. Point to files needed.] </p> <p jstcache="0"> You can use the browser's built-in developer tools to view your extension's code, display debugging output, and debug your extension. </p> <ol jstcache="0"> <li jstcache="0"> <p jstcache="0"> Edit <code jstcache="0">my_toolstrip.html</code>, so that it has the following code: </p> <pre jstcache="0"><b jstcache="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 relocated code still has the same effect, but now it has some debugging output, thanks to the call to <code jstcache="0">console.log()</code>.</p> </li> <li jstcache="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() later, 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 windows will contain the old version. </div> --> </li> <li jstcache="0"> Right-click the <strong jstcache="0">Hello, World!</strong> button (at the bottom left) to bring up the Developer Tools window for this instance of your toolstrip. The window should look something like this: <p jstcache="0"> <img src="images/devtools-1.gif" alt="" jstcache="0"> </p> <!-- Possibly we should recommend starting the Dev Tools using chrome://extensions, rather than right-click. However, that adds some stuff (such as id) that might be confusing. --> </li> <li jstcache="0"> Click the <strong jstcache="0">Scripts</strong> button. If necessary, choose <strong jstcache="0">my_toolstrip.html</strong> from the list of scripts. The result should be something like this: <p jstcache="0"> <img src="images/devtools-2.gif" alt="" jstcache="0"> </p> </li> <li jstcache="0"> Set a debugging breakpoint at the <code jstcache="0">window.open()</code> statement by clicking <strong jstcache="0">5</strong> in the left column: <p jstcache="0"> <img src="images/devtools-3.gif" alt="" jstcache="0"> </p> </li> <li jstcache="0"> Click the Console button (second from left, at the bottom of the Developer Tools window) so that you can see both the code and the console. <p jstcache="0"> <img src="images/devtools-4.gif" alt="" jstcache="0"></p> </li> <li jstcache="0"> Back in the main browser window, click the <strong jstcache="0">Hello, World!</strong> button, so that 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 just 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 called by <code jstcache="0">onclick</code>. Anywhere in the Call Stack or console that 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"> In 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 jstcache="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 execution or to step through the code. Once the call to <code jstcache="0">window.open()</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 jstcache="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 means, 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" jstcache="5"> <a name="properties" jstcache="0"></a> <h3 id="properties" jstcache="0">Properties</h3> <div jsselect="getPropertyListFromObject($this)" jstcache="10"> <a jsvalues=".name:'property-' + name" jstcache="15"></a> <h4 jscontent="name" jstcache="16">getLastError</h4> <div class="summary" jstcache="0"> <!-- Note: intentionally longer 80 columns --> <span jscontent="getModuleName() + '.'" jstcache="23">chrome.extension</span><span jscontent="$this.name" jstcache="24">lastError</span> </div> <div transclude="valueTemplate" jstcache="17"> </div> </div> </div> <!-- /apiGroup --> <!-- METHODS --> <div jsdisplay="functions && functions.length > 0" class="apiGroup" id="methods" jstcache="6"> <a name="methods" jstcache="0"></a> <h3 jstcache="0">Methods</h3> <!-- iterates over all functions --> <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 jsdisplay="returns" jscontent="getTypeName(returns)" jstcache="25">void</span> <!-- Note: intentionally longer 80 columns --> <span jscontent="getFullyQualifiedFunctionName($this)" jstcache="26">chrome.module.methodName</span>(<span jsselect="parameters" jsvalues="class:optional ? 'optional' : ''" jstcache="27"><span jsdisplay="$index" jstcache="33">, </span><span jscontent="getTypeName($this)" jstcache="34"></span> <var jstcache="0"><span jscontent="name" jstcache="16"></span></var></span>)</div> <div class="description" jstcache="0"> <p class="todo" jsdisplay="!description" jstcache="28">Undocumented.</p> <p jsdisplay="description" jsvalues=".innerHTML:description" jstcache="29"> A description from the json schema def of the function goes here. </p> <!-- PARAMETERS --> <h4 jstcache="0">Parameters</h4> <dl jstcache="0"> <div jsselect="parameters" jstcache="35"> <!-- VALUE: This is a subtemplate that is used elsewhere via jsTemplate *transclude* --> <div id="valueTemplate" jstcache="0"> <dt jstcache="0"> <var jsdisplay="$this.name" jscontent="$this.name" jstcache="45">paramName</var> <em jstcache="0"> <!-- TYPE --> <div style="display:inline" jstcache="0"> ( <span class="optional" jsdisplay="optional" jstcache="46">optional</span> <span id="typeTemplate" jstcache="0"> <span jsdisplay="getTypeRef($this)" jstcache="47"> <a jsvalues=".href: getTypeRefPage($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="items" jstcache="52"><span transclude="typeTemplate" jstcache="53"></span></span> </span> <span jsdisplay="!isArray($this)" jscontent="getTypeName($this)" jstcache="51">paramType</span> </span> </span> ) </div> </em> </dt> <dd class="todo" jsdisplay="!$this.description" jstcache="38"> Undocumented. </dd> <dd jsdisplay="$this.description" jsvalues=".innerHTML:$this.description" jstcache="39"> Description of this parameter from the json schema. </dd> <!-- OBJECT PROPERTIES --> <dd jsdisplay="shouldExpandObject($this)" jstcache="40"> <dl jstcache="0"> <div jsselect="getPropertyListFromObject($this)" jstcache="10"> <div transclude="valueTemplate" jstcache="17"> </div> </div> </dl> </dd> </div> <!-- /VALUE --> </div> </dl> <!-- RETURNS --> <h4 jsdisplay="returns" jstcache="30">Returns</h4> <dl jstcache="0"> <div jsselect="returns" jstcache="36"> <div transclude="valueTemplate" jstcache="17"> </div> </div> </dl> <!-- CALLBACK --> <div jsdisplay="hasCallback(parameters)" jstcache="31"> <div jsselect="getCallbackParameters(parameters)" jstcache="37"> <h4 jstcache="0">Callback function</h4> <p jstcache="0"> If you specify the <em jstcache="0">callback</em> parameter, it should specify a function that looks like this: </p> <!-- Note: intentionally longer 80 columns --> <pre jstcache="0">function(<span jscontent="getSignatureString(parameters)" jstcache="32">Type param1, Type param2</span>) <span class="subdued" jstcache="0">{...}</span>);</pre> <dl jstcache="0"> <div jsselect="parameters" jstcache="35"> <div transclude="valueTemplate" jstcache="17"> </div> </div> </dl> </div> </div> </div> <!-- /description --> </div> <!-- /apiItem --> </div> <!-- /apiGroup --> <!-- EVENTS --> <div jsdisplay="events && events.length > 0" class="apiGroup" jstcache="7"> <a name="events" jstcache="0"></a> <h3 id="events" jstcache="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" jstcache="0"> <!-- Note: intentionally longer 80 columns --> <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>); </div> <div class="description" jstcache="0"> <p class="todo" jsdisplay="!description" jstcache="28">Undocumented.</p> <p jsdisplay="description" jsvalues=".innerHTML:description" jstcache="29"> A description from the json schema def 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="types" jstcache="0"></a> <h3 id="types" jstcache="0">Types</h3> <!-- iterates over all types --> <div jsselect="types" class="apiItem" jstcache="13"> <a jsvalues=".name:'type-' + id" jstcache="20"></a> <h4 jscontent="id" jstcache="21">type name</h4> <div transclude="valueTemplate" jstcache="17"> </div> </div> <!-- /apiItem --> </div> <!-- /apiGroup --> </div> <!-- /apiPage --> </div> <!-- /mainColumn --> </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/" jstcache="0">Creative Commons Attribution 3.0 License</a>, and code samples are licensed under the <a rel="license" href="http://code.google.com/google_bsd_license.html" jstcache="0">BSD License</a>. </p> <p jstcache="0"> ©2009 Google </p> </div> <!-- /pageFooter --> </div> <!-- /container --> </body></html> +<!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 mechanism. + 2) The <body> tag *must* retain id="body" + 3) All <body>.innerHTML is genereated 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>.innerHTML is also generated by an offline step so that this + page may easily be indexed by search engines. + + TODO(rafaelw): Abstract this into a "pageshell" that becomes the single + version of page template shell and the "instance" pages (bookmarks.html, + etc...) can be generated with a build step. +--><!-- <html> must retain id="template --><html xmlns="http://www.w3.org/1999/xhtml" jstcache="0"><!-- <head> data 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_compiled.js" jstcache="0"> + </script> + <script type="text/javascript" src="js/api_page_generator.js" jstcache="0"></script> + <script type="text/javascript" src="js/bootstrap.js" jstcache="0"></script> + </head><!-- <body> content is completely generated. Do not edit, as it will be + and rewritten. --><body jstcache="0"> <div id="container" jstcache="0"> + <a name="top" jstcache="0"> </a> + <!-- API HEADER --> + <div id="pageHeader" jstcache="0"> + <div id="searchbox" jstcache="0"> + <form action="http://www.google.com/cse" id="cse-search-box" jstcache="0"> + <div jstcache="0"> + <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno" jstcache="0"> + <input type="hidden" name="ie" value="UTF-8" jstcache="0"> + <input type="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" jstcache="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/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" jstcache="0"></script> + </div> + <div id="pageTitle" jstcache="0"> + <h1 jscontent="getPageTitle()" jstcache="1">Tutorial: Debugging</h1> + </div> + </div> <!-- /pageHeader --> + + <div id="pageContent" jstcache="0"> + <!-- SIDENAV --> + <div id="leftNav" jstcache="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">Overview</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="toolstrip.html" jstcache="0">Toolstrips</a></li> + <li jstcache="0"><a href="pageActions.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="content_scripts.html" jstcache="0">Content Scripts</a></li> + <li jstcache="0"><a href="events.html" jstcache="0">Events</a></li> + <li jstcache="0"><a href="tabs.html" jstcache="0">Tabs</a></li> + <li jstcache="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"><a href="themes.html" jstcache="0">Themes</a></li> + <li jstcache="0"><a href="npapi.html" jstcache="0">NPAPI Plugins</a></li> + <li jstcache="0"><a href="packaging.html" jstcache="0">Packaging</a></li> + <li jstcache="0">Autoupdate</li> + </ul> + </li> + <li jstcache="0"><a href="tutorials.html" jstcache="0"><div jstcache="0">Tutorials</div></a> + <ul jstcache="0"> + <li jstcache="0" class="leftNavSelected">Debugging</li> + </ul> + </li> + <li jstcache="0">Reference + <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"><a href="match_patterns.html" jstcache="0">Match Patterns</a></li> + <li jstcache="0">Packages (.crx)</li> + </ul> + </li> + <li jstcache="0"> <a href="api_index.html" jstcache="0">chrome.* APIs</a> </li> + <li jstcache="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/extensions/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 jstcache="0"> + <li jsselect="getStaticTOC()" jstcache="9"> + <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">h2Name</a> + <ol jstcache="0"> + <li jsselect="$this.children" jstcache="22"> + <a jscontent="name" jsvalues=".href:'#' + href" jstcache="14">h3Name</a> + </li> + </ol> + </li> + <div jsselect="apiDefinition" jstcache="3"> + <li jstcache="0"> + <a href="#apiReference" jscontent="'API reference: ' + getModuleName()" jstcache="4">API reference</a> + <ol jstcache="0"> + <li jsdisplay="$this.properties" jstcache="5"> + <a href="#properties" jstcache="0">Properties</a> + <ol jstcache="0"> + <li jsselect="getPropertyListFromObject($this)" jstcache="10"> + <a jscontent="name" jsvalues=".href:'#property-' + name" href="#property-anchor" jstcache="42">propertyName</a> + </li> + </ol> + </li> + <li jsdisplay="functions && functions.length > 0" jstcache="6"> + <a href="#methods" jstcache="0">Methods</a> + <ol jstcache="0"> + <li jsselect="functions.sort(sortByName)" jstcache="11"> + <a jscontent="name" jsvalues=".href:'#method-' + name" href="#method-anchor" jstcache="43">methodName</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.sort(sortByName)" jstcache="12"> + <a jscontent="name" jsvalues=".href:'#event-' + name" href="#event-anchor" jstcache="44">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.sort(sortByName)" jstcache="38"> + <a jscontent="id" jsvalues=".href:'#type-' + id" href="#id-anchor" jstcache="45">id</a> + </li> + </ol> + </li> + </ol> + </li> + </div> + </ol> + </div> + <!-- /TABLE OF CONTENTS --> + + <!-- STATIC CONTENT PLACEHOLDER --> + <div id="static" jstcache="0"><div id="pageData-title" class="pageData" jstcache="0">Tutorial: Debugging</div> + +<p jstcache="0"> +[PENDING: intro goes here. +This tutorial starts where +<a href="getstarted.html" jstcache="0">Getting Started</a> ends. +Point to files needed.] +</p> + +<p jstcache="0"> +You can use the browser's built-in developer tools +to view your extension's code, +display debugging output, +and debug your extension. +</p> +<ol jstcache="0"> + <li jstcache="0"> + <p jstcache="0"> Edit <code jstcache="0">my_toolstrip.html</code>, so that it has the following code: </p> +<pre jstcache="0"><b jstcache="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 relocated code still has the same effect, + but now it has some debugging output, + thanks to the call to <code jstcache="0">console.log()</code>.</p> + </li> + <li jstcache="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() later, +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 windows will contain the old version. + </div> +--> + </li> + <li jstcache="0"> + Right-click the <strong jstcache="0">Hello, World!</strong> button + (at the bottom left) + to bring up the Developer Tools window + for this instance of your toolstrip. + The window should look something like this: + <p jstcache="0"> + <img src="images/devtools-1.gif" alt="" jstcache="0"> </p> +<!-- +Possibly we should recommend starting the Dev Tools +using chrome://extensions, rather than right-click. +However, that adds some stuff (such as id) +that might be confusing. +--> + + </li> + <li jstcache="0"> + Click the <strong jstcache="0">Scripts</strong> button. + If necessary, choose <strong jstcache="0">my_toolstrip.html</strong> + from the list of scripts. + The result should be something like this: + <p jstcache="0"> + <img src="images/devtools-2.gif" alt="" jstcache="0"> </p> + </li> + <li jstcache="0"> + Set a debugging breakpoint at the <code jstcache="0">window.open()</code> statement + by clicking <strong jstcache="0">5</strong> in the left column: + <p jstcache="0"> + <img src="images/devtools-3.gif" alt="" jstcache="0"> </p> + </li> + <li jstcache="0"> + Click the Console button + (second from left, at the bottom of the Developer Tools window) + so that you can see both the code and the console. + <p jstcache="0"> + <img src="images/devtools-4.gif" alt="" jstcache="0"></p> + </li> + <li jstcache="0"> + Back in the main browser window, + click the <strong jstcache="0">Hello, World!</strong> button, + so that 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 just 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 called by <code jstcache="0">onclick</code>. + Anywhere in the Call Stack or console that 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"> + In 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 jstcache="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 execution or to step through the code. + Once the call to <code jstcache="0">window.open()</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 jstcache="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 means, +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" jstcache="5"> + <a name="properties" jstcache="0"></a> + <h3 id="properties" jstcache="0">Properties</h3> + + <div jsselect="getPropertyListFromObject($this)" jstcache="10"> + <a jsvalues=".name:'property-' + name" jstcache="15"></a> + <h4 jscontent="name" jstcache="16">getLastError</h4> + <div class="summary" jstcache="0"> + <!-- Note: intentionally longer 80 columns --> + <span jscontent="getModuleName() + '.'" jstcache="23">chrome.extension</span><span jscontent="$this.name" jstcache="24">lastError</span> + </div> + <div transclude="valueTemplate" jstcache="17"> + </div> + </div> + + </div> <!-- /apiGroup --> + + <!-- METHODS --> + <div jsdisplay="functions && functions.length > 0" class="apiGroup" id="methods" jstcache="6"> + <a name="methods" jstcache="0"></a> + <h3 jstcache="0">Methods</h3> + + <!-- iterates over all functions --> + <div class="apiItem" jsselect="functions.sort(sortByName)" 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 jsdisplay="returns" jscontent="getTypeName(returns)" jstcache="25">void</span> + <!-- Note: intentionally longer 80 columns --> + <span jscontent="getFullyQualifiedFunctionName($this)" jstcache="26">chrome.module.methodName</span>(<span jsselect="parameters" jsvalues="class:optional ? 'optional' : ''" jstcache="27"><span jsdisplay="$index" jstcache="33">, </span><span jscontent="getTypeName($this)" jstcache="34"></span> + <var jstcache="0"><span jscontent="name" jstcache="16"></span></var></span>)</div> + + <div class="description" jstcache="0"> + <p class="todo" jsdisplay="!description" jstcache="28">Undocumented.</p> + <p jsdisplay="description" jsvalues=".innerHTML:description" jstcache="29"> + A description from the json schema def of the function goes here. + </p> + + <!-- PARAMETERS --> + <h4 jstcache="0">Parameters</h4> + <dl jstcache="0"> + <div jsselect="parameters" jstcache="35"> + + <!-- VALUE: This is a subtemplate that is used elsewhere + via jsTemplate *transclude* --> + <div id="valueTemplate" jstcache="0"> + <dt jstcache="0"> + <var jsdisplay="$this.name" jscontent="$this.name" jstcache="46">paramName</var> + <em jstcache="0"> + + <!-- TYPE --> + <div style="display:inline" jstcache="0"> + ( + <span class="optional" jsdisplay="optional" jstcache="47">optional</span> + <span id="typeTemplate" jstcache="0"> + <span jsdisplay="getTypeRef($this)" jstcache="48"> + <a jsvalues=".href: getTypeRefPage($this) + '#type-' + getTypeRef($this)" jscontent="getTypeRef($this)" jstcache="50"> Type</a> + </span> + <span jsdisplay="!getTypeRef($this)" jstcache="49"> + <span jsdisplay="isArray($this)" jstcache="51"> + array of <span jsselect="items" jstcache="53"><span transclude="typeTemplate" jstcache="54"></span></span> + </span> + <span jsdisplay="!isArray($this)" jscontent="getTypeName($this)" jstcache="52">paramType</span> + </span> + </span> + ) + </div> + + </em> + </dt> + <dd class="todo" jsdisplay="!$this.description" jstcache="39"> + Undocumented. + </dd> + <dd jsdisplay="$this.description" jsvalues=".innerHTML:$this.description" jstcache="40"> + Description of this parameter from the json schema. + </dd> + + <!-- OBJECT PROPERTIES --> + <dd jsdisplay="shouldExpandObject($this)" jstcache="41"> + <dl jstcache="0"> + <div jsselect="getPropertyListFromObject($this)" jstcache="10"> + <div transclude="valueTemplate" jstcache="17"> + </div> + </div> + </dl> + </dd> + </div> <!-- /VALUE --> + + </div> + </dl> + + <!-- RETURNS --> + <h4 jsdisplay="returns" jstcache="30">Returns</h4> + <dl jstcache="0"> + <div jsselect="returns" jstcache="36"> + <div transclude="valueTemplate" jstcache="17"> + </div> + </div> + </dl> + + <!-- CALLBACK --> + <div jsdisplay="hasCallback(parameters)" jstcache="31"> + <div jsselect="getCallbackParameters(parameters)" jstcache="37"> + <h4 jstcache="0">Callback function</h4> + <p jstcache="0"> + If you specify the <em jstcache="0">callback</em> parameter, + it should specify a function that looks like this: + </p> + + <!-- Note: intentionally longer 80 columns --> + <pre jstcache="0">function(<span jscontent="getSignatureString(parameters)" jstcache="32">Type param1, Type param2</span>) <span class="subdued" jstcache="0">{...}</span>);</pre> + <dl jstcache="0"> + <div jsselect="parameters" jstcache="35"> + <div transclude="valueTemplate" jstcache="17"> + </div> + </div> + </dl> + </div> + </div> + + </div> <!-- /description --> + + </div> <!-- /apiItem --> + + </div> <!-- /apiGroup --> + + <!-- EVENTS --> + <div jsdisplay="events && events.length > 0" class="apiGroup" jstcache="7"> + <a name="events" jstcache="0"></a> + <h3 id="events" jstcache="0">Events</h3> + + <!-- iterates over all events --> + <div jsselect="events.sort(sortByName)" class="apiItem" jstcache="12"> + <a jsvalues=".name:'event-' + name" jstcache="19"></a> + <h4 jscontent="name" jstcache="16">event name</h4> + + <div class="summary" jstcache="0"> + <!-- Note: intentionally longer 80 columns --> + <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>); + </div> + + <div class="description" jstcache="0"> + <p class="todo" jsdisplay="!description" jstcache="28">Undocumented.</p> + <p jsdisplay="description" jsvalues=".innerHTML:description" jstcache="29"> + A description from the json schema def 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="types.sort(sortByName)" jstcache="0"></a> + <h3 id="types" jstcache="0">Types</h3> + + <!-- iterates over all types --> + <div jsselect="types" class="apiItem" jstcache="13"> + <a jsvalues=".name:'type-' + id" jstcache="20"></a> + <h4 jscontent="id" jstcache="21">type name</h4> + + <div transclude="valueTemplate" jstcache="17"> + </div> + + </div> <!-- /apiItem --> + + </div> <!-- /apiGroup --> + + </div> <!-- /apiPage --> + </div> <!-- /mainColumn --> + </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/" jstcache="0">Creative Commons + Attribution 3.0 License</a>, and code samples are licensed under the + <a rel="license" href="http://code.google.com/google_bsd_license.html" jstcache="0">BSD License</a>. + </p> + <p jstcache="0"> + ©2009 Google + </p> + </div> <!-- /pageFooter --> + </div> <!-- /container --> +</body></html> +#EOF |