Processing ../devtools-docs/docs/authoring-development-workflow.html file...
<p>You may be on a widescreen monitor, wishing to maximize the space available to inspect and debug your code</p>
<p><strong> - "widescreen" -> wide screen,wide-screen,windscreen</strong></p>
<br/>
<p>You can change the split to be less than 400px (the current minimum width of Chrome) to test resizing layouts</p>
<p><strong> - "400px" -> </strong></p>
<br/>
<p>It is also possible to hold down and drag the DevTools toolbar to move its docking position, as demonstrated in the animation below.</p>
<p><strong> - "toolbar" -> tool bar,tool-bar,barstool</strong></p>
<br/>
<p>Cmd + O (Mac OSX)</p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>which will work regardless of the panel you are currently in. For this Todo app, using one of these shortcuts will take us to the Sources panel and present us with a search box listing all inspectable files.</p>
<p><strong> - "Todo" -> Tod,Toto,Todd,Dodo,Togo,Tod o,Too,To do,To-do</strong></p>
<p><strong> - "inspectable" -> inspect able,inspect-able,respectable,injectable,indispensable,installable</strong></p>
<br/>
<p>From there, we can filter down to specific files (e.g files with the word 'script' in their name) or select a file to view or edit.</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Note: We support camel-case matching in all of our dialogs. e.g: to open FooBarScript.js, you could just type FBaSc, which could save time.</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<p><strong> - "FooBarScript.js" -> Superscriptions</strong></p>
<p><strong> - "FBaSc" -> Bascom</strong></p>
<br/>
<p>Cmd + F (Mac OSX)</p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>Cmd + Opt + F (Max OSX)</p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>Cmd + Shift + O (Mac OSX)</p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>Cmd + L (Mac OSX)</p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>1. Click the link to the script (e.g ) in the markup view of the Elements panel:</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Changes to scripts are only executed at evaluation time, meaning that modifications to code that is not running after the page loads will not have an effect. Changes to code executed at a later stage, such as mouseover handlers or click-event callbacks can however be changed and tested on the fly.</p>
<p><strong> - "mouseover" -> mouse over,mouse-over,moreover,mouser,overuse</strong></p>
<br/>
<p>The "element.style" section displays properties that were set through the style attribute in the page's markup.</p>
<p><strong> - "element.style" -> elementariness</strong></p>
<br/>
<p>or clicking on the filename (e.g styles.css) in the "Elements -> Styles panel" (for SASS/CSS):</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<p><strong> - "styles.css" -> stylesheets</strong></p>
<br/>
<p>A diff of the changes</p>
<p><strong> - "diff" -> duff,doff,riff,tiff,miff,Tiff,Giff,differ</strong></p>
<br/>
<p>Apply original content will effectively do the same action, but will maintain the revision history in view in case you wish to go back to a specific changeset.</p>
<p><strong> - "changeset" -> change set,change-set,changes et,changes-et,changeless</strong></p>
<br/>
<p>Sometimes you want to be able to save smaller scripts, bookmarklets and utilities so that you've always got them available to you while debugging in the browser. Snippets is a new DevTools feature enabling this workflow, allowing you to create, store and run JavaScript within the  Sources tab. It is currently available in Chrome Canary.</p>
<p><strong> - "bookmarklets" -> bookmark lets,bookmark-lets,booklets</strong></p>
<br/>
<p>Bookmarklets - all of your bookmarklets could be stored as snippets, especially those you may wish to edit.</p>
<p><strong> - "Bookmarklets" -> Bookmark lets,Bookmark-lets,Booklets</strong></p>
<p><strong> - "bookmarklets" -> bookmark lets,bookmark-lets,booklets</strong></p>
<br/>
<p>Debugging - Snippets offer a multi-line console with syntax-highlighting and persistance, making it convenience for debugging code that is more than a one-liner.</p>
<p><strong> - "persistance" -> persistence,resistance,Resistance,assistance</strong></p>
<br/>
<p>Selecting a snippet file from the file-list opens it up in the built-in editor to your right. Here you can write or paste any JavaScript code (i.e your snippet) including functions and expressions.</p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<br/>
<p>Note: Snippets are stored in the DevTools localStorage. When performing a Save/Save As, you can bind the snippet to the file where it should be saved like any other script.</p>
<p><strong> - "localStorage" -> local Storage,local-storage,preallocator</strong></p>
<br/>
<p>My workflow: Never having to leave the DevTools | remy sharp</p>
<p><strong> - "remy" -> Remy,rem,rems,rely,re my,re-my,rem y</strong></p>
<br/>
<p>The Breakpoint With Addy Osmani And Paul Lewis - Snippets | youtube</p>
<p><strong> - "Osmani" -> Osman,Osman i,Tasmania</strong></p>
<p><strong> - "youtube" -> you tube,you-tube,buyout</strong></p>
<br/>
<p>Chrome Dev Tools: JavaScript and Performance | nettuts</p>
<p><strong> - "nettuts" -> net tuts,net-tuts,netts</strong></p>
<br/>
<p>Iterating with the Chrome DevTools | jeremey kahn</p>
<p><strong> - "jeremey" -> Jereme,Jeremy,Jeramey</strong></p>
<p><strong> - "kahn" -> khan,Kahn,Hahn</strong></p>
<br/>
Processing ../devtools-docs/docs/blackboxing.html file...
<p>Like everyone, you get bugs in your application code. You start debugging, but when you step through your code line-by-line, the debugger sometimes jumps into a source file that's not your focus (such as a third-party JS library). I'm sure you've experienced the annoyance of stepping through the library code before getting back to your own application code.</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>The screenshot above shows that app.js opened, where a breakpoint was set. When stepping into that code, backbone.js opened, then underscore.js. This can be a time-consuming process and an undesirable one, too.</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<p><strong> - "app.js" -> apps</strong></p>
<p><strong> - "backbone.js" -> backbones,backbone</strong></p>
<p><strong> - "underscore.js" -> underscores,underscore</strong></p>
<br/>
<p>Use the Settings panel to configure blackboxed scripts. Open the DevTools Settings and under Sources click Manage framework blackboxing.</p>
<p><strong> - "blackboxed" -> black boxed,black-boxed,blackbox ed,blackbox-ed,blackbox,blackballed</strong></p>
<br/>
<p>You may want to temporarily unblackbox a rule for testing purposes. You can do this by changing the behavior to Disabled. If you wanted to remove a rule entirely you can click X to delete it.</p>
<p><strong> - "unblackbox" -> blackbox</strong></p>
<br/>
<p>When you view a blackboxed script in the editor on the Sources panel, you will see a yellow bar indicating that it's blackboxed. Clicking on more expands the bar showing a bit more info about what it means, and how you can disable it.</p>
<p><strong> - "blackboxed" -> black boxed,black-boxed,blackbox ed,blackbox-ed,blackbox,blackballed</strong></p>
<br/>
<p>When paused on a breakpoint, in the call stack you will see a message stating the number of frames which are blackboxed. You can show these frames if you want, but since they are calls made from a blackboxed script they are hidden unless you click show.</p>
<p><strong> - "blackboxed" -> black boxed,black-boxed,blackbox ed,blackbox-ed,blackbox,blackballed</strong></p>
<br/>
<p>We want to make sure your debugging experience when working with JS frameworks is excellent. Please file a ticket after trying blackboxing if you have ideas on how it can be improved or address your use cases better.</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
Processing ../devtools-docs/docs/blog-posts.html file...
<p>   New developer tools experimental APIs for Chrome extensions (Oct 2011)</p>
<p><strong> - "APIs" -> A Pis,API,API s,Pis,Apsis,Apish,Apes,Apps,Apia,Alis,Avis,Pisa</strong></p>
<br/>
<p>Web Inspector   Redesign (Sep 2008)</p>
<p><strong> - "Sep" -> Se,Sp,Sept,Shep,See,Sen,Rep,Set,Pep,Hep,Yep,Se p,Esp,Seep</strong></p>
<br/>
Processing ../devtools-docs/docs/clean-testing-environment.html file...
<p> Ensure Chrome is being run with a clean profile:     Option 1: Use Incognito mode. Open the Chrome menu  and select New Incognito Window, or launch        Chrome with the  switch.             Option 2: Use a fresh Chrome profile. Click the user icon in the top-right corner 	of your Chrome window and select New User.                           To guarantee a clean profile that doesn't inherit        any extensions or settings, launch Chrome using the         switch with the path .  e.g:                         OSX:             Linux:           Windows:                  This will ensure you get a completely empty profile instead of loading the user's profile as read-only. Close other tabs and processes/applications you may have running in the background. If these apps need to run in the background, use your system monitor to ensure apps are not stealing too much CPU or RAM.  Disable any Dynamic CPU overclocking you may have enabled on your system. Make sure you are up to date with the latest builds of Chrome. You can use http://download-chromium.appspot.com to grab edge builds. If you are running into a bug and generally use Chrome Canary as your   development browser, it is worth testing in Chrome Stable to ensure the issue   is unrelated to new features or bugs. {{/partials.standard_devtools_article}} </p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<p><strong> - "overclocking" -> over clocking,over-clocking,overclouding,overstocking,overcooking,overlooking</strong></p>
<p><strong> - "http:" -> HTTP</strong></p>
<p><strong> - "download-chromium.appspot.com" -> download-chromium</strong></p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
<p>Option 2: Use a fresh Chrome profile. Click the user icon in the top-right corner 	of your Chrome window and select New User.                           To guarantee a clean profile that doesn't inherit        any extensions or settings, launch Chrome using the         switch with the path .  e.g:                         OSX:             Linux:           Windows:                  This will ensure you get a completely empty profile instead of loading the user's profile as read-only. </p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>To guarantee a clean profile that doesn't inherit        any extensions or settings, launch Chrome using the         switch with the path .  e.g:</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>                 OSX:             Linux:           Windows:                 </p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>OSX:    </p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>Disable any Dynamic CPU overclocking you may have enabled on your system.</p>
<p><strong> - "overclocking" -> over clocking,over-clocking,overclouding,overstocking,overcooking,overlooking</strong></p>
<br/>
<p>Make sure you are up to date with the latest builds of Chrome. You can use http://download-chromium.appspot.com to grab edge builds.</p>
<p><strong> - "http:" -> HTTP</strong></p>
<p><strong> - "download-chromium.appspot.com" -> download-chromium</strong></p>
<br/>
Processing ../devtools-docs/docs/commandline-api.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>Returns reference to the first DOM element with the specified CSS selector.This function is an alias for  function.</p>
<p><strong> - "selector.This" -> selector. This,selectors</strong></p>
<br/>
<p>Note: Press Shift+Enter in the console to start a new line without executing the script.</p>
<p><strong> - "Shift+Enter" -> Shifter</strong></p>
<br/>
<p>$x(path)</p>
<p><strong> - "x(path" -> XPath</strong></p>
<br/>
<p>copy(object)</p>
<p><strong> - "copy(object" -> objectify</strong></p>
<br/>
<p>debug(function)</p>
<p><strong> - "debug(function" -> eigenfunction</strong></p>
<br/>
<p>Use undebug(fn) to stop breaking on the function, or use the UI to disable all breakpoints.</p>
<p><strong> - "undebug(fn" -> underfund</strong></p>
<br/>
<p>dir(object)</p>
<p><strong> - "dir(object" -> objector</strong></p>
<br/>
<p>Displays an object-style listing of all the properties of the specified object. This method is an alias for the Console API's  method.</p>
<p><strong> - "API's" -> Ape's,Apia's,Apr's,Ari's,Ali's,Adi's,Ami's,Okapi's,Appia's</strong></p>
<br/>
<p>dirxml(object)</p>
<p><strong> - "dirxml(object" -> objectionable</strong></p>
<br/>
<p>inspect(object/function)</p>
<p><strong> - "inspect(object" -> inspectorate</strong></p>
<br/>
<p>getEventListeners(object)</p>
<p><strong> - "getEventListeners(object" -> </strong></p>
<br/>
<p>Returns the event listeners registered on the specified object. The return value is an object that contains an array for each registered event type ("click" or "keydown", for example). The members of each array are objects that describe the listener registered for each type. For example, the following lists all the event listeners registered on the  object.</p>
<p><strong> - "keydown" -> key down,key-down,Downey</strong></p>
<br/>
<p>If more than one listener is registered on the specified object, then the array contains a member for each listener. For instance, in the following example there are two event listeners registered on the  element for the "mousedown" event:</p>
<p><strong> - "mousedown" -> mouse down,mouse-down,moused own,moused-own,dormouse</strong></p>
<br/>
<p>keys(object)</p>
<p><strong> - "keys(object" -> objectify</strong></p>
<br/>
<p>Assuming  was defined in the global namespace (for simplicity), typing  and  in the Console would result in the following:</p>
<p><strong> - "namespace" -> name space,name-space,names pace,names-pace,spacemen</strong></p>
<br/>
<p>monitor(function)</p>
<p><strong> - "monitor(function" -> multifunction</strong></p>
<br/>
<p>Use unmonitor(function) to cease monitoring.</p>
<p><strong> - "unmonitor(function" -> multifunction</strong></p>
<br/>
<p>monitorEvents(object[, events])</p>
<p><strong> - "monitorEvents(object" -> objectionableness</strong></p>
<br/>
<p>profile([name])</p>
<p><strong> - "profile([name" -> profitableness</strong></p>
<br/>
<p>profileEnd([name])</p>
<p><strong> - "profileEnd([name" -> profitableness</strong></p>
<br/>
<p>table(data[, columns])</p>
<p><strong> - "table(data" -> debatable,adaptable,beatable,eatable</strong></p>
<br/>
<p>undebug(function)</p>
<p><strong> - "undebug(function" -> eigenfunction</strong></p>
<br/>
<p>unmonitor(function)</p>
<p><strong> - "unmonitor(function" -> multifunction</strong></p>
<br/>
<p>Stops the monitoring of the specified function. Used in concert with monitor(fn).</p>
<p><strong> - "monitor(fn" -> monitor</strong></p>
<br/>
<p>unmonitorEvents(object[, events])</p>
<p><strong> - "unmonitorEvents(object" -> unmonitored</strong></p>
<br/>
<p>You can also selectively stop monitoring specific events on an object. For example, following code starts monitoring all mouse events on the currently selected element, and then stops monitoring "mousemove" events (perhaps to reduce noise in the console output).</p>
<p><strong> - "mousemove" -> mouse move,mouse-move,mousse,venomous</strong></p>
<br/>
<p>values(object)</p>
<p><strong> - "values(object" -> objectiveness</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/console-api.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>console.assert(expression, object)</p>
<p><strong> - "console.assert(expression" -> expressionless</strong></p>
<br/>
<p>console.clear()</p>
<p><strong> - "console.clear" -> consolable</strong></p>
<br/>
<p>However, if Preserve Logs is on, console.clear() will not do anything in case there's some iframe which calls console.clear() and can make your debugging process harder. "Clear console" in the context menu will still work, and actually clear the console.</p>
<p><strong> - "console.clear" -> consolable</strong></p>
<br/>
<p>console.count(label)</p>
<p><strong> - "console.count(label" -> inconsolableness</strong></p>
<br/>
<p>console.debug(object [, object, ...])</p>
<p><strong> - "console.debug(object" -> objectionableness</strong></p>
<br/>
<p>console.dir(object)</p>
<p><strong> - "console.dir(object" -> objectionableness</strong></p>
<br/>
<p>Calling  on a JavaScript object is equivalent to calling  on the same object—they both print out the object's JavaScript properites in a tree format.</p>
<p><strong> - "object—they" -> objectivity</strong></p>
<p><strong> - "properites" -> properties,propitiates,prosperity,proprietress,expropriates</strong></p>
<br/>
<p>console.dirxml(object)</p>
<p><strong> - "console.dirxml(object" -> </strong></p>
<br/>
<p> is a shortcut for dir</p>
<p><strong> - "dir" -> deer,rid,Dir,sir,fir,die,dire,dirt,dirk,dis,air,din,cir,did,dig</strong></p>
<br/>
<p> acts either as dir or dirxml depending on the object type (non-dom or dom)</p>
<p><strong> - "dir" -> deer,rid,Dir,sir,fir,die,dire,dirt,dirk,dis,air,din,cir,did,dig</strong></p>
<p><strong> - "dirxml" -> dirndl</strong></p>
<p><strong> - "non-dom" -> non-mod,non-Dom,non-dim,non-don,non-do,non-om,non-dome,non-dorm,non-doom,non-Odom,non-doe,non-dos,non-dam,non-dot,non-tom</strong></p>
<p><strong> - "dom" -> mod,Dom,dim,don,do,om,dome,dorm,doom,Odom,doe,dos,dam,dot,tom</strong></p>
<br/>
<p>console.error(object [, object, ...])</p>
<p><strong> - "console.error(object" -> objectionableness</strong></p>
<br/>
<p>console.group(object[, object, ...])</p>
<p><strong> - "console.group(object" -> objectionableness</strong></p>
<br/>
<p>console.groupCollapsed(object[, object, ...])</p>
<p><strong> - "console.groupCollapsed(object" -> </strong></p>
<br/>
<p>console.groupEnd()</p>
<p><strong> - "console.groupEnd" -> inconsolableness</strong></p>
<br/>
<p>Closes the most recently created logging group that previously created with  or . See console.group() and console.groupCollapsed() for examples.</p>
<p><strong> - "console.group" -> consoler</strong></p>
<p><strong> - "console.groupCollapsed" -> collapsed</strong></p>
<br/>
<p>console.info(object [, object, ...])</p>
<p><strong> - "console.info(object" -> objectionableness</strong></p>
<br/>
<p>console.log(object [, object, ...])</p>
<p><strong> - "console.log(object" -> objectionableness</strong></p>
<br/>
<p>console.profile([label])</p>
<p><strong> - "console.profile([label" -> </strong></p>
<br/>
<p>When the Chrome DevTools is open, calling this function starts a JavaScript CPU profile with an optional label.To complete the profile, call . Each profile is added to the Profiles tab.</p>
<p><strong> - "label.To" -> label. To,labeled</strong></p>
<br/>
<p>console.profileEnd()</p>
<p><strong> - "console.profileEnd" -> inconsolableness</strong></p>
<br/>
<p>See console.profile() for example use.</p>
<p><strong> - "console.profile" -> inconsolableness</strong></p>
<br/>
<p>console.time(label)</p>
<p><strong> - "console.time(label" -> inconsolableness</strong></p>
<br/>
<p>console.timeEnd(label)</p>
<p><strong> - "console.timeEnd(label" -> inconsolableness</strong></p>
<br/>
<p>For example usage, see console.time().</p>
<p><strong> - "console.time" -> consolation</strong></p>
<br/>
<p>console.timeline(label)</p>
<p><strong> - "console.timeline(label" -> inconsolableness</strong></p>
<br/>
<p>console.timelineEnd()</p>
<p><strong> - "console.timelineEnd" -> inconsolableness</strong></p>
<br/>
<p>console.timeStamp([label])</p>
<p><strong> - "console.timeStamp([label" -> timestamped</strong></p>
<br/>
<p>console.trace(object)</p>
<p><strong> - "console.trace(object" -> objectionableness</strong></p>
<br/>
<p>console.warn(object [, object, ...])</p>
<p><strong> - "console.warn(object" -> objectionableness</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/console.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>A place to log diagnostic information using methods provided by the Console API, such as console.log(), or console.profile().</p>
<p><strong> - "console.log" -> consolable</strong></p>
<p><strong> - "console.profile" -> inconsolableness</strong></p>
<br/>
<p>This documentation provides an overview and common uses of these two APIs. You can also browse the Console API and Command Line API reference guides.</p>
<p><strong> - "APIs" -> A Pis,API,API s,Pis,Apsis,Apish,Apes,Apps,Apia,Alis,Avis,Pisa</strong></p>
<br/>
<p>To toggle a split-view of the Console on another tab, press the Esc key on your keyboard, or click the Show/Hide Console button in the bottom left corner of the Chrome DevTools window. In the following screenshot the Console split-view is shown with the Elements panel.</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<br/>
<p>To clear the console's history, do one of the following:</p>
<p><strong> - "console's" -> consoles,consoler's,consolers,console,consolable,Constable's,consonance's</strong></p>
<br/>
<p>Invoke console.clear() Console API from JavaScript.</p>
<p><strong> - "console.clear" -> consolable</strong></p>
<br/>
<p>Log XMLHTTPRequests—determines if each XMLHTTPRequest is logged to the Console panel.</p>
<p><strong> - "XMLHTTPRequests—determines" -> Predetermines</strong></p>
<p><strong> - "XMLHTTPRequest" -> Frequentest</strong></p>
<br/>
<p>Preserve log upon navigation—determines if console history for the current page is preserved when you navigate to another page. By default, both of these settings are disabled.</p>
<p><strong> - "navigation—determines" -> determinativeness</strong></p>
<br/>
<p>The Console API is collection of methods provided by the global  object defined by DevTools. One of the API's main purposes is to log information (such as a property value, or an entire objects or DOM element) to the console while your application is running. You can also group output visually in the console to reduce visual clutter.</p>
<p><strong> - "API's" -> Ape's,Apia's,Apr's,Ari's,Ali's,Adi's,Ami's,Okapi's,Appia's</strong></p>
<br/>
<p>The console.log() method takes one or more expressions as parameters and writes their current values to the console. For example:</p>
<p><strong> - "console.log" -> consolable</strong></p>
<br/>
<p>All—Shows all console output.</p>
<p><strong> - "All—Shows" -> Allhallows</strong></p>
<br/>
<p>Errors—Only show output from </p>
<p><strong> - "Errors—Only" -> Erroneously</strong></p>
<br/>
<p>Warnings—Only show output from </p>
<p><strong> - "Warnings—Only" -> Warningly</strong></p>
<br/>
<p>Logs—Only show output from ,  and .</p>
<p><strong> - "Logs—Only" -> </strong></p>
<br/>
<p>Debug—Only show output from  and other console output.</p>
<p><strong> - "Debug—Only" -> Debuggable</strong></p>
<br/>
<p>The first parameter you pass to any of the console's logging methods ( or , for example) may contain one or more format specifiers. A format specifier consists of a  symbol followed by a letter that indicates the formatting that should be applied to the inserted value ( for strings, for example). The format specifier identifies where to substitute a value provided by a subsequent parameter value.</p>
<p><strong> - "console's" -> consoles,consoler's,consolers,console,consolable,Constable's,consonance's</strong></p>
<br/>
<p>As shown in the following screenshot, the  command annotates the Timeline in the following places:</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<br/>
<p>A yellow vertical line in the Timeline's summary and detail views.</p>
<p><strong> - "Timeline's" -> Timeliness,Time line's,Time-line's,Timeline,Emmeline's,Emeline's,Ameline's</strong></p>
<br/>
<p>To enter a multi-line expression at the shell prompt (such as a function definition) press Shift+Enter between lines.</p>
<p><strong> - "Shift+Enter" -> Shifter</strong></p>
<br/>
<p>The Command Line API provides several methods to access DOM elements in your application. For example, the  method returns the first element that matches the specified CSS selector, just like . For instance, the following code returns the element with the ID "loginBtn".</p>
<p><strong> - "loginBtn" -> login</strong></p>
<br/>
<p>The  command returns an array of all the elements that match the specified CSS selector, just like . For instance, the following displays selects all  elements with the CSS class "loginBtn":</p>
<p><strong> - "loginBtn" -> login</strong></p>
<br/>
<p>The  method takes a DOM element reference (or JavaScript reference) as a parameter and displays the element or object in the appropriate panel—the Elements panel for DOM elements, or the Profile panel for a JavaScript object.</p>
<p><strong> - "panel—the" -> panelization</strong></p>
<br/>
<p>For example, in the following screenshot the  function is used to get a reference to an  element. Then the last evaluated expression property () is passed to  to open that element in the Elements panel.</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<br/>
<p>Often when testing you'll select DOM elements—either directly in the Elements panel or using the Selection tool (magnifying glass)—so that you can further inspect the element. Or, when analyzing a memory snapshot in the Profiles panel, you might select a JavaScript object to further inspect it.</p>
<p><strong> - "elements—either" -> elementariness</strong></p>
<p><strong> - "glass)—so" -> glassless</strong></p>
<br/>
<p>The following screenshot shows the values of these properties after selecting three different elements in turn from the Elements panel:</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<br/>
<p>To monitor several events, you can pass an array of event names as the second parameter. The code below monitors both "mousedown" and "mouseup" events on the body of the document.</p>
<p><strong> - "mousedown" -> mouse down,mouse-down,moused own,moused-own,dormouse</strong></p>
<p><strong> - "mouseup" -> mouse up,mouse-up,mouse,mousse</strong></p>
<br/>
<p>You can also pass one of the supported "event types" that DevTools maps to a set of actual event names. For example, the "touch" event type cause DevTools to monitor "touchstart", "touchend", "touchmove", and "touchcancel" events on the target object.</p>
<p><strong> - "touchstart" -> touch start,touch-start,touchstone</strong></p>
<p><strong> - "touchend" -> touched,touch end,touch-end,toucher</strong></p>
<p><strong> - "touchmove" -> touch move,touch-move,touchstone</strong></p>
<p><strong> - "touchcancel" -> touch cancel,touch-cancel,touchable</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/contributing.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>Documentation authoring The source for the DevTools documentation is on GitHub and contributions are always welcome. Both reference and tutorial guides benefit from your help. Get in touch with @paul_irish for more information on how you can assist here. </p>
<p><strong> - "paul_irish" -> Parrish</strong></p>
<br/>
<p>Get in touch with @paul_irish for more information on how you can assist here.</p>
<p><strong> - "paul_irish" -> Parrish</strong></p>
<br/>
<p>Share what you've learned Share what you've learned via GIFs, Vines or construction paper Cover new experimental features Design improved UX for all parts of DevTools Triage and manage issues Work on features or bugs </p>
<p><strong> - "GIFs" -> G Ifs,Figs,Gigs,Ifs,Gifts,Gins,Gift,Giff</strong></p>
<p><strong> - "UX" -> IX,U,X,AUX,TUX,EX,US,AX,OX,UM,UP,UH,BX,RX</strong></p>
<br/>
<p>Share what you've learned via GIFs, Vines or construction paper</p>
<p><strong> - "GIFs" -> G Ifs,Figs,Gigs,Ifs,Gifts,Gins,Gift,Giff</strong></p>
<br/>
<p>Design improved UX for all parts of DevTools</p>
<p><strong> - "UX" -> IX,U,X,AUX,TUX,EX,US,AX,OX,UM,UP,UH,BX,RX</strong></p>
<br/>
<p>Coverage of new experimental features Subscribe to devtools-reviews@chromium.org mailing list for all reviews of pending code Subscribe to the RSS feed of devtools commits. Follow @ChromeDevTools on Twitter which also includes a feed of all commits. There's plenty of action and developers are eager to hear what's landing </p>
<p><strong> - "devtools-reviews@chromium.org" -> DevTools-reviews@chromium.org</strong></p>
<p><strong> - "RSS" -> RS,RES,ASS,RPS,R'S,RS S,ROSS,RUSS,ROS,RVS</strong></p>
<p><strong> - "devtools" -> DevTools</strong></p>
<p><strong> - "ChromeDevTools" -> Chrome DevTools,Chrome-DevTools,Chromosomes</strong></p>
<br/>
<p>Subscribe to devtools-reviews@chromium.org mailing list for all reviews of pending code</p>
<p><strong> - "devtools-reviews@chromium.org" -> DevTools-reviews@chromium.org</strong></p>
<br/>
<p>Subscribe to the RSS feed of devtools commits.</p>
<p><strong> - "RSS" -> RS,RES,ASS,RPS,R'S,RS S,ROSS,RUSS,ROS,RVS</strong></p>
<p><strong> - "devtools" -> DevTools</strong></p>
<br/>
<p>Follow @ChromeDevTools on Twitter which also includes a feed of all commits.</p>
<p><strong> - "ChromeDevTools" -> Chrome DevTools,Chrome-DevTools,Chromosomes</strong></p>
<br/>
<p>Designing improved UX for all parts of DevTools Your ideas on the design and UX are quite welcome. </p>
<p><strong> - "UX" -> IX,U,X,AUX,TUX,EX,US,AX,OX,UM,UP,UH,BX,RX</strong></p>
<br/>
<p>Your ideas on the design and UX are quite welcome.</p>
<p><strong> - "UX" -> IX,U,X,AUX,TUX,EX,US,AX,OX,UM,UP,UH,BX,RX</strong></p>
<br/>
<p>Working on features or bugs The codebase is just JavaScript and the contribution guide below can get you started quickly </p>
<p><strong> - "codebase" -> co debase,co-debase,code base,code-base,codebreak</strong></p>
<br/>
<p>The codebase is just JavaScript and the contribution guide below can get you started quickly</p>
<p><strong> - "codebase" -> co debase,co-debase,code base,code-base,codebreak</strong></p>
<br/>
<p>The DevTools team values feedback from developers using the tools. If you want to keep updated, you can subscribe at crbug to the channels below. Please remember to star issues that affect you as well. Finally, don't forget to submit feature requests or bug reports for things that you find as well. Not only in the DevTools, but for all of Chrome.</p>
<p><strong> - "crbug" -> bug</strong></p>
<br/>
<p>The Chrome DevTools are actually a web app written in JavaScript and CSS. If you're familiar with these technologies, you know enough to write a patch. A few folks have already done this, giving us a colorpicker, a file picker and other features, all contributed by developers just like you.</p>
<p><strong> - "colorpicker" -> color picker,color-picker,colorimeter</strong></p>
<br/>
<p>IRC channel on Freenode: #chrome-devtools and #blink</p>
<p><strong> - "IRC" -> CIR,IRE,ARC,INC,IRK,IRV,IR,IRA,IR C,CIRCE</strong></p>
<p><strong> - "Freenode" -> Free node,Free-node,Freedmen</strong></p>
<p><strong> - "chrome-devtools" -> chrome-DevTools,chromosomes</strong></p>
<br/>
<p>Note: You will need to sign and submit a completed CLA (Contributor License Agreement) before we are able to consider any contributions you may wish to make. </p>
<p><strong> - "CLA" -> CAL,CL,CA,LA,CLAN,COLA,CLAD,CLAM,CLAP,CLAY,CLAW,LAC,ALA,ILA</strong></p>
<br/>
<p>Serve devtools frontend</p>
<p><strong> - "devtools" -> DevTools</strong></p>
<p><strong> - "frontend" -> fronted,front end,front-end,Frontenac</strong></p>
<br/>
<p>Run a local web server. The local web server will serve files from the directory   on some port (e.g. ).</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Why does the server need to run from the devtools directory?</p>
<p><strong> - "devtools" -> DevTools</strong></p>
<br/>
<p>When remotely debugging and developing the front-end of Blink, the content of the   file is generated based on the content of   instead as a fallback of the Chromium build system. The   file is in the parent folder of the  folder which is  . This is why you need to run the web server from within the  directory.</p>
<p><strong> - "fallback" -> callback,fullback,fall back,fall-back,blackball</strong></p>
<br/>
<p>Note:  describes the API between front-end and back-end. It is used for generating API stubs for the front-end and back-end at the build stage. When remote debugging the front-end part of the API,  is generated on the fly by front-end code. For more information, read the Chromium How-tos. </p>
<p><strong> - "How-tos" -> How-sot,How-tis,How-to,How-ts,How-toes,How-toss,How-taos,How-tons,How-tors,How-tots,How-togs,How-toms,How-tops,How-toys,How-tows</strong></p>
<br/>
<p> We're loading our inspection dashboard on port 9222 but we're specifying the devtools frontend to then use in the URL hash: .  Since we launched the devtools frontend on port 8000 we want to match that here. The path should point to the correct location of the inspector.html file assuming that your web server is running from the Source directory. The older  flag was retired.</p>
<p><strong> - "devtools" -> DevTools</strong></p>
<p><strong> - "frontend" -> fronted,front end,front-end,Frontenac</strong></p>
<p><strong> - "inspector.html" -> inspectorate</strong></p>
<br/>
<p>These flags cause Chrome to allow websocket connections into localhost:9222 and to serve the front-end UI from your local git repo. Here's a full list of command line switches and what they do.</p>
<p><strong> - "websocket" -> web socket,web-socket,WebSocket</strong></p>
<p><strong> - "localhost:9222" -> localhost</strong></p>
<p><strong> - "repo" -> rope,rep,reps,reno,redo,rep o</strong></p>
<br/>
<p>If you're not developing the DevTools, the easy way to inspect the DevTools is undock them from your tab  so it is in a separate window. Then hit your keyboard shortcut for inspecting (like cmd-alt-i). This will bring up a new DevTools window that's inspecting the previous once. You can now redock these windows as you wish. </p>
<p><strong> - "undock" -> unlock,undo ck,undo-ck,undo</strong></p>
<p><strong> - "cmd-alt-i" -> Cmd-alt-i,cm-alt-i,cad-alt-i,cod-alt-i,cud-alt-i,cpd-alt-i,cm d-alt-i</strong></p>
<p><strong> - "redock" -> re dock,re-dock,redo ck,redo-ck,relocked,docker,recked</strong></p>
<br/>
<p>Next, return to the "Inspectable Pages" tab, http://localhost:9222.</p>
<p><strong> - "Inspectable" -> Inspect able,Inspect-able,Respectable,Injectable,Indispensable,Installable</strong></p>
<p><strong> - "http:" -> HTTP</strong></p>
<p><strong> - "localhost:9222" -> localhost</strong></p>
<br/>
<p>This grid menu is served by a small web server running inside the first instance of Canary which the  parameter was passed into. Since the web server is running from your local git repo in the   directory, so the files within the devtools folder will be used for the inspector you see when clicking any of one these pages.</p>
<p><strong> - "repo" -> rope,rep,reps,reno,redo,rep o</strong></p>
<p><strong> - "devtools" -> DevTools</strong></p>
<br/>
<p>Notice that the URL address of this DevTools instance points to http://localhost:8000/front_end/inspector.html. This is because of the inspector URL  that was passed as a hash to the "Inspectable Pages" URL. It connects to your local repo through a websocket, which you may notice, is part of the URL . (You can also use DevTools to look at this WebSocket frame data). Back to hacking…</p>
<p><strong> - "http:" -> HTTP</strong></p>
<p><strong> - "localhost:8000" -> localhost</strong></p>
<p><strong> - "front_end" -> Frontenac</strong></p>
<p><strong> - "inspector.html" -> inspectorate</strong></p>
<p><strong> - "Inspectable" -> Inspect able,Inspect-able,Respectable,Injectable,Indispensable,Installable</strong></p>
<p><strong> - "repo" -> rope,rep,reps,reno,redo,rep o</strong></p>
<p><strong> - "websocket" -> web socket,web-socket,WebSocket</strong></p>
<br/>
<p>Now that you are ready to dig into the code and start developing the DevTools source, head over to http://crbug.com and find the ticket for your change and leave a comment saying you will be writing a patch for it. If you haven't decided on what you to change look through the open issues and choose one you would like to do and leave a comment on it asking for it to be assigned to you.</p>
<p><strong> - "http:" -> HTTP</strong></p>
<p><strong> - "crbug.com" -> </strong></p>
<br/>
<p>You should see "0 error(s), 0 warning(s)".</p>
<p><strong> - "error(s" -> errors,error's,error</strong></p>
<p><strong> - "warning(s" -> warnings,warning's,warning</strong></p>
<br/>
<p>Install depot_tools</p>
<p><strong> - "depot_tools" -> DevTools</strong></p>
<br/>
<p>You will need to install the depot_tools in order to upload your patch once your changes are completed. The depot_tools are a package of scripts used to manage checkouts and code reviews, and it includes commands , , and  and will be useful later on. You will still want to sync your Chromium checkout with all its dependencies however.</p>
<p><strong> - "depot_tools" -> DevTools</strong></p>
<br/>
<p>Note: This guide includes steps for Windows throughout it, but has not been confirmed to work due to the inability to add  to the PATH of Windows command line. However, you can try Cygwin as an alternative solution. Here you can find steps for installing depot_tools on Windows with Cygwin. </p>
<p><strong> - "Cygwin" -> Cycling</strong></p>
<p><strong> - "depot_tools" -> DevTools</strong></p>
<br/>
<p>You must have an account for codereview.chromium.org and you'll enter in your credentials in this process. Afterwards, you'll get the codereview URL e.g.</p>
<p><strong> - "codereview.chromium.org" -> </strong></p>
<p><strong> - "codereview" -> code review,code-review,codeword</strong></p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>You get to pick between two workflows: merge or rebase. Both are  "mathematically equivalent" but you use different commands. Unless you are a git uber-guru, the workflows and thinking for each are different.</p>
<p><strong> - "rebase" -> rebate,debase,re base,re-base,freebase,Reba,Reeba,base</strong></p>
<p><strong> - "uber-guru" -> tuber-guru,cuber-guru,umber-guru,Huber-guru,Buber-guru,rube-guru,user-guru,rubber-guru,dubber-guru,lubber-guru,Rube-guru,grubber</strong></p>
<br/>
<p>About half of the contributors to Chromium use this rebase workflow.</p>
<p><strong> - "rebase" -> rebate,debase,re base,re-base,freebase,Reba,Reeba,base</strong></p>
<br/>
<p>git checkout -b myAwesomeBranch make a bunch of changes in the branch </p>
<p><strong> - "myAwesomeBranch" -> awesomeness</strong></p>
<br/>
<p>gclient sync</p>
<p><strong> - "gclient" -> client,g client</strong></p>
<br/>
<p>git checkout my_branch</p>
<p><strong> - "my_branch" -> subbranch</strong></p>
<br/>
<p>git rebase master</p>
<p><strong> - "rebase" -> rebate,debase,re base,re-base,freebase,Reba,Reeba,base</strong></p>
<br/>
<p>If you end up with lots of revisions in your branch, the rebase can be messy as it applies each change in order so you may need to resolve conflicts repeatedly. Git you squash a bunch of commits into one with . It pops open an editor with a bunch of  lines. Change all but the first pick. _to _squash. Use  to replace the word .</p>
<p><strong> - "rebase" -> rebate,debase,re base,re-base,freebase,Reba,Reeba,base</strong></p>
<p><strong> - "_to" -> to,Ito</strong></p>
<p><strong> - "_squash" -> squash,quash</strong></p>
<br/>
<p>git diff master should be the exact patch you're expecting to upload </p>
<p><strong> - "diff" -> duff,doff,riff,tiff,miff,Tiff,Giff,differ</strong></p>
<br/>
<p>Create a new issue at https://code.google.com/p/chromium/issues/list, or find issue you want to fix.</p>
<p><strong> - "https:" -> HTTP</strong></p>
<p><strong> - "code.google.com" -> </strong></p>
<br/>
<p>Create a branch in your local git checkout for that issue. Something like  (e.g. "drawer-status-bar-231904"). This makes easier to find in which branch your issue lives and vice-versa. It'd be great to assign issue to yourself and mark it as "started" so that nobody else starts doing same job.</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Commit changes in that branch. You can merge all commits into one. This makes rebasing later easier if needed.</p>
<p><strong> - "rebasing" -> rebating,debasing,re basing,re-basing,freebasing,increasing,creasing</strong></p>
<br/>
<p>. The first time you have to fill in the commit description and mention issue number, for example "". You will be asked for patch description later on and they all will be attached to the same codereview issue. See "Patch Set #1", "PatchSet #2"... at https://chromiumcodereview.appspot.com/14329024/</p>
<p><strong> - "codereview" -> code review,code-review,codeword</strong></p>
<p><strong> - "PatchSet" -> Patch Set,Patch-Set,Patch-set,Patchiness</strong></p>
<p><strong> - "https:" -> HTTP</strong></p>
<p><strong> - "chromiumcodereview.appspot.com" -> </strong></p>
<br/>
<p>Add reviewers to the changelist and ask them to review. You should pick reviewers from the OWNERS files.  suggests reviewers.</p>
<p><strong> - "changelist" -> change list,change-list,changeling,evangelistic,evangelist,Evangelist</strong></p>
<br/>
<p>If received LGTM from owners - press commit button.</p>
<p><strong> - "LGTM" -> LG</strong></p>
<br/>
<p>Sometimes you may need to rebase if the "commit" button fails on codereview page. Some reviewers don't like rebasing during a codereview since it makes reviewing harder for them.</p>
<p><strong> - "rebase" -> rebate,debase,re base,re-base,freebase,Reba,Reeba,base</strong></p>
<p><strong> - "codereview" -> code review,code-review,codeword</strong></p>
<p><strong> - "rebasing" -> rebating,debasing,re basing,re-basing,freebasing,increasing,creasing</strong></p>
<br/>
<p>To setup a build that can run the layout tests read about layout tests over on Chromium.org. Depending on the type of patch you are submitting, there may be Chrome DevTools layout tests you will want to run before submission.</p>
<p><strong> - "Chromium.org" -> Chromium</strong></p>
<br/>
<p>First, run  to use . You can follow the steps located in the Chromium Using Git guide to walk you through this process. In summary make sure depot_tools is in your path. Run  in a directory you wish to store the Chromium source (perhaps get a snack or one of those paddles with a ball on it, this will take some time).</p>
<p><strong> - "depot_tools" -> DevTools</strong></p>
<br/>
<p>This will also take some time. Once it has finished providing you with warmth from your laptop then you are good to run the layout tests which can be run with from your src directory  . Replace the .sh with .bat if you are on Windows. Some failures are expected! (unfortunatly). A good process here is to run them before you make any changes, then run them after you make your changes. It can also take an argument to a directory so you can just point it to the  directory to run.</p>
<p><strong> - "src" -> arc,sec,sic,sac,soc,RCS</strong></p>
<p><strong> - "unfortunatly" -> unfortunately,unfortunate,fortunately</strong></p>
<br/>
<p> DevTools front-end and core/inspector backend use wire protocol (aka remote debugging protocol) to interact. Some older docs (2012) about it:</p>
<p><strong> - "backend" -> backed,back end,back-end,backhand</strong></p>
<br/>
<p>https://www.webkit.org/blog/1875/announcing-remote-debugging-protocol-v1-0/</p>
<p><strong> - "https:" -> HTTP</strong></p>
<p><strong> - "www.webkit.org" -> </strong></p>
<p><strong> - "announcing-remote-debugging-protocol-v1-0" -> announcing-remote-debugging-protocol-v-0,announcing-remote-debugging-protocol-1-0,announcing-remote-debugging-protocol-vs-0,announcing-remote-debugging-protocol-vi-0,announcing-remote-debugging-protocol-vb-0</strong></p>
<br/>
<p>https://developer.chrome.com/devtools/docs/debugger-protocol</p>
<p><strong> - "https:" -> HTTP</strong></p>
<p><strong> - "developer.chrome.com" -> underdevelopment</strong></p>
<p><strong> - "devtools" -> DevTools</strong></p>
<br/>
<p>All the code that touches DOM and other properties of the page is native. Console the only thing that touches the running page JS because it absolutely needs to.</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>If it depends on renderer information, you should add a new method into the protocol (protocol.json), for example into the DOM agent. That would generate JS bindings on the front-end part and corresponding handler functions in InspectorDOMAgent interface. Then you implement them on the backend part and call from the front-end.</p>
<p><strong> - "protocol.json" -> protocol</strong></p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<p><strong> - "InspectorDOMAgent" -> Inspectorate</strong></p>
<p><strong> - "backend" -> backed,back end,back-end,backhand</strong></p>
<br/>
<p>Look at any methods in protocol.json to see how they are used.</p>
<p><strong> - "protocol.json" -> protocol</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/cpu-profiling.html file...
Processing ../devtools-docs/docs/css-preprocessors.html file...
<p>For preprocessors that support CSS source maps, DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file,  not the generated .css file.</p>
<p><strong> - "css" -> CSS,cs,cuss,cs's,ass,cos,cps,cs s</strong></p>
<br/>
<p>Control+click (or Command+click) on any CSS property name or value to open the source file and jump to the appropriate line.</p>
<p><strong> - "Control+click" -> Controlling</strong></p>
<p><strong> - "Command+click" -> Commanding</strong></p>
<br/>
<p>To use this workflow, your CSS preprocessor must support CSS source maps, specifically the Source Map v3 proposal. The CSS source maps must be built along with the CSS files, so DevTools can map each CSS property to the correct location in the original source file (for example, .scss file).</p>
<p><strong> - "v3" -> v,3,vs,vi,vb</strong></p>
<p><strong> - "scss" -> SCSS,sass</strong></p>
<br/>
<p>To use this workflow, your CSS preprocessor must support CSS source maps, specifically the Source Map v3 proposal. The CSS source maps must be built along with the CSS files, so DevTools can map each CSS property to the correct location in the original source file (for example, .scss file).</p>
<p><strong> - "v3" -> v,3,vs,vi,vb</strong></p>
<p><strong> - "scss" -> SCSS,sass</strong></p>
<br/>
<p> You must be accessing your site or app from a web server (not a file:// URL), and the server must serve the CSS files as well as the source maps (.css.map) and source files (.scss, etc.). </p>
<p><strong> - "css.map" -> </strong></p>
<p><strong> - "scss" -> SCSS,sass</strong></p>
<br/>
<p> You must be accessing your site or app from a web server (not a file:// URL), and the server must serve the CSS files as well as the source maps (.css.map) and source files (.scss, etc.). </p>
<p><strong> - "css.map" -> </strong></p>
<p><strong> - "scss" -> SCSS,sass</strong></p>
<br/>
<p>To live-edit Sass files in Chrome you need to have the pre-release version of the Sass compiler, which is the only version that currently supports source map generation.</p>
<p><strong> - "pre-release" -> per-release,ore-release,pee-release,pr-release,re-release,pres-release,pare-release,pore-release,pure-release,prep-release,prey-release,pyre-release,pref-release,rep-release,ere-release</strong></p>
<br/>
<p>Compass: The  flag was implemented in Compass 1.0. Alternatively you can add  to your config.rb file. Demo repo here. Development notes are in issue 1108. </p>
<p><strong> - "config.rb" -> configure</strong></p>
<p><strong> - "repo" -> rope,rep,reps,reno,redo,rep o</strong></p>
<br/>
<p>Autoprefixer: Implemented in 1.0. Autoprefixer docs explain how to use it, along with absorbing an input sourcemap (from another preprocessor).</p>
<p><strong> - "Autoprefixer" -> Autorepeat</strong></p>
<br/>
<p>Libsass: Implemented. </p>
<p><strong> - "Libsass" -> Lib sass,Lib-sass,Libs ass,Libs-ass,Lissa</strong></p>
<br/>
<p>For instance, given an SCSS file named styles.scss:</p>
<p><strong> - "styles.scss" -> stylesheets</strong></p>
<br/>
<p>Sass generates a CSS file, styles.css, with the sourceMappingURL annotation:</p>
<p><strong> - "styles.css" -> stylesheets</strong></p>
<p><strong> - "sourceMappingURL" -> sourcemaps</strong></p>
<br/>
Processing ../devtools-docs/docs/debugger-protocol.html file...
<p>    As of Google Chrome M31, we commit to supporting the version 1.1 of the protocol. All subsequent 1.* versions of the protocol are going to be backwards compatible with 1.1.   As of Google Chrome M18, we commit to supporting the version 1.0 of the protocol. All subsequent 1.* versions of the protocol are going to be backwards compatible with 1.0.   As of Google Chrome M16, we commit to supporting the version 0.1 of the protocol. All subsequent 0.* versions of the protocol are going to be backwards compatible with 0.1. </p>
<p><strong> - "M31" -> </strong></p>
<p><strong> - "M18" -> </strong></p>
<p><strong> - "M16" -> </strong></p>
<br/>
<p>As of Google Chrome M31, we commit to supporting the version 1.1 of the protocol. All subsequent 1.* versions of the protocol are going to be backwards compatible with 1.1.</p>
<p><strong> - "M31" -> </strong></p>
<br/>
<p>As of Google Chrome M18, we commit to supporting the version 1.0 of the protocol. All subsequent 1.* versions of the protocol are going to be backwards compatible with 1.0.</p>
<p><strong> - "M18" -> </strong></p>
<br/>
<p>As of Google Chrome M16, we commit to supporting the version 0.1 of the protocol. All subsequent 0.* versions of the protocol are going to be backwards compatible with 0.1.</p>
<p><strong> - "M16" -> </strong></p>
<br/>
<p>When you navigate your client browser to the remote's Chrome port, Developer Tools front-end is being served from the host Chrome as a Web Application from the Web Server.</p>
<p><strong> - "remote's" -> remotes,re mote's,re-mote's,remoteness's,remorse's,remote,mote's</strong></p>
<br/>
<p>In this scenario, you can substitute Developer Tools front-end with your own implementation. Instead of navigating to the HTML page at http://localhost:9222, your application can discover available pages by issuing the following HTTP request to the browser:</p>
<p><strong> - "http:" -> HTTP</strong></p>
<p><strong> - "localhost:9222" -> localhost</strong></p>
<br/>
<p>and getting a JSON object with information about inspectable pages along with the WebSocket addresses that you could use in order to start instrumenting them.</p>
<p><strong> - "inspectable" -> inspect able,inspect-able,respectable,injectable,indispensable,installable</strong></p>
<br/>
<p>To allow third parties to interact with the protocol, we introduced chrome.debugger extension API that exposes this JSON message transport interface. As a result, you can not only attach to the remotely running Chrome instance, but also instrument it from its own extension.</p>
<p><strong> - "chrome.debugger" -> Mercurochrome</strong></p>
<br/>
<p>Chrome Debugger Extension API provides a higher level API where command domain, name and body are provided explicitly in the  call. This API hides request ids and handles binding of the request with its response, hence allowing  to report result in the callback function call. One can also use this API in combination with the other Extension APIs. </p>
<p><strong> - "APIs" -> A Pis,API,API s,Pis,Apsis,Apish,Apes,Apps,Apia,Alis,Avis,Pisa</strong></p>
<br/>
Processing ../devtools-docs/docs/debugging-clients.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>This blog post from Mark  DuBois  gives an overview of working in Brackets.</p>
<p><strong> - "DuBois" -> Du Bois,Du-Bois,Dubious</strong></p>
<br/>
<p>Download from download.brackets.io.</p>
<p><strong> - "download.brackets.io" -> download</strong></p>
<br/>
<p>crconsole</p>
<p><strong> - "crconsole" -> consoler,console,consolable</strong></p>
<br/>
<p>Introduction to Telemetry on  Chromium.org.</p>
<p><strong> - "Chromium.org" -> Chromium</strong></p>
<br/>
<p>Chrome.vim is an experimental plugin for the Vim editor that provides some basic  Chrome operations as Vim commands.</p>
<p><strong> - "Chrome.vim" -> Chromosome</strong></p>
<br/>
<p>https://github.com/mklabs/vimfiles/tree/master/custom-bundle/vim-chrome </p>
<p><strong> - "https:" -> HTTP</strong></p>
<p><strong> - "github.com" -> GitHub</strong></p>
<p><strong> - "mklabs" -> blabs</strong></p>
<p><strong> - "vimfiles" -> vim files,vim-files,misfiles</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/device-mode.html file...
<p>       You can also toggle device mode on and off using the keyboard shortcut:       Ctrl+Shift+M (or Cmd+Shift+M on Mac).     </p>
<p><strong> - "Ctrl+Shift+M" -> Shiftlessness</strong></p>
<p><strong> - "Cmd+Shift+M" -> Makeshift</strong></p>
<br/>
<p>           To jump-start your debugging process, device mode has a variety of emulation presets. Quickly emulate a particular device by selecting a model from the preset dropdown.         </p>
<p><strong> - "dropdown" -> drop down,drop-down,drown</strong></p>
<br/>
<p>Autosizes (boosts) text for pages without a defined viewport.</p>
<p><strong> - "Autosizes" -> Auto sizes,Auto-sizes,Automatizes,Outsizes</strong></p>
<br/>
<p>           To get more granular control over the screen emulator, you can tune the resolution settings below the device preset dropdown.          </p>
<p><strong> - "dropdown" -> drop down,drop-down,drown</strong></p>
<br/>
<p>           If you want to emulate a Retina device from a non-Retina machine or vice versa, adjust the Device pixel ratio  field.           The device pixel ratio (DPR) is the ratio between logical pixels and physical pixels. Devices with Retina displays, such as the iPhone 5, have higher pixel density than standard devices, which can affect the sharpness and size of visual content.         </p>
<p><strong> - "DPR" -> DPT,PR,DPI,PPR,APR,D PR,DR,DER,DIR,DAR,DUR,DP</strong></p>
<br/>
<p>           Some examples of DPR-sensitivity on the web are:         </p>
<p><strong> - "DPR-sensitivity" -> DPT-sensitivity,PR-sensitivity,DPI-sensitivity,PPR-sensitivity,APR-sensitivity,D PR-sensitivity,DR-sensitivity,DER-sensitivity,DIR-sensitivity,DAR-sensitivity,DUR-sensitivity,DP-sensitivity,Hypersensitivity,Oversensitivity,Sensitivity</strong></p>
<br/>
<p>The srcset attribute on images.</p>
<p><strong> - "srcset" -> secret</strong></p>
<br/>
<p>The  BOM property.</p>
<p><strong> - "BOM" -> MOB,OM,BOOM,BOMB,BOA,BOT,TOM,BOO,COM,BOD,BUM,BOG,MOM,BOP,BOB</strong></p>
<br/>
<p>           Note:  If you have a native Retina display, you'll notice that low dpi assets look pixelated while higher-dpi assets are sharp. To simulate this effect on a standard display, select the Fit checkbox and set the DPR to 2.         </p>
<p><strong> - "pixelated" -> pix elated,pix-elated,dilapidated</strong></p>
<p><strong> - "DPR" -> DPT,PR,DPI,PPR,APR,D PR,DR,DER,DIR,DAR,DUR,DP</strong></p>
<br/>
<p>Now you can quickly select your custom screen emulation from the device preset dropdown.</p>
<p><strong> - "dropdown" -> drop down,drop-down,drown</strong></p>
<br/>
<p>       Device mode's network conditioning allows you to test your site on a variety of network connections, including Edge, 3G, and even offline. Select a connection from the preset dropdown to apply network throttling and latency manipulation.     </p>
<p><strong> - "3G" -> 3,G,LG,CG,MG,PG,KG,AG,HG</strong></p>
<p><strong> - "offline" -> off line,off-line,lifeline</strong></p>
<p><strong> - "dropdown" -> drop down,drop-down,drown</strong></p>
<br/>
<p>       Network throttling artificially limits the maximum download throughput (rate of data transfer). Latency manipulation enforces a minimum delay in connection (RTT).     </p>
<p><strong> - "RTT" -> RT,RTE,RAT,ROT,RUT,RT T</strong></p>
<br/>
<p>         Select the CSS media checkbox, and choose a media type from the dropdown list.       </p>
<p><strong> - "dropdown" -> drop down,drop-down,drown</strong></p>
<br/>
<p>       Note: If your app detects sensors onload using JavaScript (such as Modernizr), make sure that you reload the page after enabling sensor emulators.     </p>
<p><strong> - "onload" -> unload,on load,on-load,download,load</strong></p>
<p><strong> - "Modernizr" -> Modernize,Modernizer,Modernism,Modern</strong></p>
<br/>
<p>           You can simulate multi-touch events on devices that support multi-touch input, such as laptops with trackpads. For more information about setting up multi-touch simulation, see the "Developer Tools" section of the Multi-touch web development guide on HTML5 Rocks.         </p>
<p><strong> - "trackpads" -> track pads,track-pads,trackless</strong></p>
<br/>
<p>           Tip: Try out the DevTools debugger in combination with touch emulation using this fingerpaint touch screen demo.         </p>
<p><strong> - "fingerpaint" -> fingerprint,finger paint,finger-paint,fingertip,fingering</strong></p>
<br/>
Processing ../devtools-docs/docs/dom-and-styles.html file...
<p>When you hover over or select a DOM node, the rendered element is highlighted in the main browser window. If the element is scrolled offscreen, a tooltip is displayed at the edge of the browser window indicating that the selected element is offscreen.</p>
<p><strong> - "offscreen" -> off screen,off-screen,smokescreen</strong></p>
<p><strong> - "tooltip" -> tool tip,tool-tip,toolkit</strong></p>
<br/>
<p>isAttribute: True if the event is registered through a DOM attribute (for example, ).</p>
<p><strong> - "isAttribute" -> is Attribute,is-attribute,attribute,attributive,attributable,distributer</strong></p>
<br/>
<p>lineNumber: Line number containing the event registration.</p>
<p><strong> - "lineNumber" -> line Number,line-number,linen umber,linen-umber,renumber,timberline,numberer,Berliner</strong></p>
<br/>
<p>listenerBody: String representation of the callback function.</p>
<p><strong> - "listenerBody" -> listener Body,listener-body,listener</strong></p>
<br/>
<p>sourceName: URL Path to the source file containing the event listener.</p>
<p><strong> - "sourceName" -> source Name,source-name,sourcemaps</strong></p>
<br/>
<p>useCapture: A boolean value stating whether the useCapture flag on  was set.</p>
<p><strong> - "useCapture" -> use Capture,use-capture,capturer,capture</strong></p>
<br/>
<p>See the W3C documentation on cascading and inheritance for more information: http://www.w3.org/TR/CSS2/cascade.html</p>
<p><strong> - "http:" -> HTTP</strong></p>
<p><strong> - "www.w3.org" -> </strong></p>
<p><strong> - "CSS2" -> CSS</strong></p>
<p><strong> - "cascade.html" -> Cascades</strong></p>
<br/>
<p>Cascade rules dictate that if two rules have the same origin, weight, and specificity, the last defined rule takes precedence. In this case, the second color property takes precedence. The first color property is shown in strikethrough text to show that it's been overridden.</p>
<p><strong> - "strikethrough" -> strike through,strike-through,breakthroughs</strong></p>
<br/>
<p>User agent stylesheets are clearly labelled, and are often overridden by the CSS on your web page.</p>
<p><strong> - "labelled" -> labeled,la belled,la-belled,label led,label-led,belled,belabored,blabbed,belated</strong></p>
<br/>
<p>Greyed out selectors like  and  do not apply to the selected node. The rules shown above corresponds to the following CSS source:</p>
<p><strong> - "Greyed" -> Preyed,Gr eyed,Gr-eyed,Grey ed,Grey-ed,Greed,Greedy,Grayed,Grey</strong></p>
<br/>
<p>You can add or edit styles within the Styles pane in the Elements panel. Unless the area containing the styling information is greyed out (as is the case with user agent stylesheets), all styles are editable. Edit styles in the following ways:</p>
<p><strong> - "greyed" -> greed,greedy,grayed,preyed,gr eyed,gr-eyed,Grey</strong></p>
<br/>
<p>To enable or disable a style declaration, check or uncheck the checkbox next to it.</p>
<p><strong> - "uncheck" -> unchecked,check</strong></p>
<br/>
<p>By default, your CSS modifications are not permanent, changes are lost when you reload the page. To customise the behaviour, see Workspaces.</p>
<p><strong> - "customise" -> customize,decustomised,customhouse</strong></p>
<p><strong> - "behaviour" -> behavior</strong></p>
<br/>
<p>Expand second-level items to view a diff (before and after) corresponding to the modification. A line with a pink background signifies a removal while a line with a green background signifies an addition.</p>
<p><strong> - "diff" -> duff,doff,riff,tiff,miff,Tiff,Giff,differ</strong></p>
<br/>
<p>Note: If you provide a value of anything other than  to the CSS position property, the metrics pane displays a box labelled position.</p>
<p><strong> - "labelled" -> labeled,la belled,la-belled,label led,label-led,belled,belabored,blabbed,belated</strong></p>
<br/>
Processing ../devtools-docs/docs/elements-styles.html file...
<p>For every property specified by more than one rule, the pane displays a   computed trace, which is a stack of selectors applicable to the node   and specifying the property value. Since rule selectors have different   specificities, all but the top-most one will be “cancelled out” in the   trace, which is denoted by a strike-through type.   </p>
<p><strong> - "cancelled" -> canceled,can celled,can-celled,cancel led,cancel-led,cancelated,canceler,cancel,candled</strong></p>
<br/>
<p>Uncheck a box to disable the  property   (i.e. temporarily remove it from the style). The property gets struck out, and   the change is instantly reflected in the inspected page.        </p>
<p><strong> - "Uncheck" -> Unchecked,Check</strong></p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<br/>
<p>For  and    elements, the central field contains the actual   offsetWidth × offsetHeight pixel dimensions of the   selected element.</p>
<p><strong> - "offsetWidth" -> offset Width,offset-width,offsetting</strong></p>
<p><strong> - "offsetHeight" -> offset Height,offset-height,offsetting</strong></p>
<br/>
<p>Activate the Resources panel, find tutorial.css in the   resource tree. Note that the tree node is expandable. Click the arrow next to   the node title, and you will see all the resource modifications that you have   made above.</p>
<p><strong> - "tutorial.css" -> tutorials</strong></p>
<br/>
Processing ../devtools-docs/docs/elements.html file...
<p>The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page. For example, you may be curious if an image has an HTML id attribute, and what that attribute's value is. </p>
<p><strong> - "attribute's" -> attributes,attributer's,at tribute's,at-tribute's,attributer,attribute,attribution's,attributives</strong></p>
<br/>
<p>Open the Google Closure Hovercard demo page.</p>
<p><strong> - "Hovercard" -> Hover card,Hover-card,Overheard,Hardcover</strong></p>
<br/>
<p>Click the magnifying glass icon to turn on inspect mode. Return to the Google Closure Hovercard page and click the top-left card, Tom Smith. Because you are in inspect mode, this highlights the corresponding node in the Elements panel and displays its associated styles, then turns off inspect mode.    </p>
<p><strong> - "Hovercard" -> Hover card,Hover-card,Overheard,Hardcover</strong></p>
<br/>
<p>You'll see that we're able to tell all the style attributes that are being applied. For example, the padding comes directly from the  element's  attribute. The font is first defined for , but then overriden by the . There is also the  property specified that is not recognized by the rendering engine. Properties like this are marked with the triangle warning sign to the left.</p>
<p><strong> - "overriden" -> override,overridden,overrides,overrider,override n,overdriven</strong></p>
<br/>
<p>Now, hover over the .anchor editable style rule in the sidebar to see checkboxes that let you disable individual properties. You should see something like this:   You   can disable a property by de-selecting it. </p>
<p><strong> - "de-selecting" -> DE-selecting,ed-selecting,De-selecting,d-selecting,e-selecting,die-selecting,den-selecting,doe-selecting,ode-selecting,due-selecting,deg-selecting,deb-selecting,dye-selecting,def-selecting,dew-selecting</strong></p>
<br/>
<p>Click an editable (non-grayed-out) style property name or value to edit them. For example, double-click the margin: 20px property. You should see something like this:    Autocompletion suggestions will appear while editing property names and values. To add a new style property, click anywhere in the editable style declaration whitespace. The new property will be added immediately after the clicked style declaration. If you edit a style property value with a number, you can use the Up or Down keys to change the number. Holding the Alt/Option key steps by 0.1, holding the Shift key steps by 10. You can add more properties via double-clicking white area to the left / bottom of existing entries or via pasting multiple properties separated with semicolon. You can start editing of style rule selectors by clicking them. You can also add new style rules using the Gear Menu, located to the right of the Styles section bar.</p>
<p><strong> - "20px" -> </strong></p>
<p><strong> - "Autocompletion" -> Auto completion,Auto-completion,Complementation,Completion</strong></p>
<br/>
<p>You can add a new style selector using the  button found in the Styles section bar. In order to emulate an element's pseudostate (:active, :hover, :focus, :visited), use the  in the Styles pane header. In will bring up a small pane where you can select which pseudostates of the selected element should be activated. </p>
<p><strong> - "pseudostate" -> pseudo state,pseudo-state,pseudoscience</strong></p>
<p><strong> - "pseudostates" -> pseudo states,pseudo-states,pseudosciences</strong></p>
<br/>
<p>You can add breakpoints that fire on DOM modifications related to a certain element. Bring up a context menu on the #profileCard element and select the events you want to break on: subtree modifications, attributes modifications, and the node removal. Let's select "Attributes Modification" for now. Mover your mouse over any gray rectangle with a name. Your JavaScript code will break inside tooltip.js which tries to modify the "className" attribute of the #profileCard element. Press F8 to continue the JavaScript execution. The code immediately breaks on an attribute modification once again. Now select DOM Breakpoints in the right-hand sidebar.</p>
<p><strong> - "profileCard" -> profile Card,profile-card,profiterole</strong></p>
<p><strong> - "tooltip.js" -> toolkits</strong></p>
<p><strong> - "className" -> class Name,class-name,classiness</strong></p>
<br/>
<p> You will see a list of your DOM breakpoints (contains a single breakpoint you just added.) You can toggle the breakpoint using a nearby checkbox to de-activate (and re-activate) it, or you can remove it altogether using its context menu's "Remove Breakpoint" item.</p>
<p><strong> - "de-activate" -> DE-activate,ed-activate,De-activate,d-activate,e-activate,die-activate,den-activate,doe-activate,ode-activate,due-activate,deg-activate,deb-activate,dye-activate,def-activate,dew-activate</strong></p>
<br/>
<p>Select Event Listeners in the right-hand sidebar.    The event listeners shown for the selected node are in the order in which they are fired through the capturing and bubbling phases. This provides the most accurate and useful information possible. Event listeners are separated by type. If a node has both onclick and onmouseover listeners they appear in different sections. You can also set your filter preference using the Gear Menu. You can choose to see only the listeners registered on the selected node, or the entire event flow.</p>
<p><strong> - "onclick" -> on click,on-click,click</strong></p>
<p><strong> - "onmouseover" -> overgenerous</strong></p>
<br/>
<p>Type document.write in the search box. You should see incremental search running:    The Elements panel supports XPath and CSS selectors as queries, in addition to plain text. All search results are highlighted in the DOM tree, the first match is revealed and selected.</p>
<p><strong> - "document.write" -> documentation</strong></p>
<br/>
Processing ../devtools-docs/docs/extensions-gallery.html file...
<p>                       Angular Batarang              This extension features tools to help find and address performance bottlenecks, and visualize and debug applications.    </p>
<p><strong> - "Batarang" -> Bataan</strong></p>
<br/>
<p>                       Ember Inspector              The Ember Inspector is a plug-in for the Chrome developer tools that makes understanding and debugging your Ember.js application a snap. After installing this extension, you'll be able to easily: - View all of the rou…    </p>
<p><strong> - "Ember.js" -> Embers</strong></p>
<p><strong> - "rou" -> rout,our,roe,sou,rot,rod,rob,you,row,Lou</strong></p>
<br/>
<p>                       Backbone Debugger              Adds a panel under the Chrome Developer Tools that displays in real-time all your application views, models, collections and routers. Data displayed includes: - Views: rendering status, html element, associated model an…    </p>
<p><strong> - "html" -> HTML,ht ml,ht-ml</strong></p>
<br/>
<p>                       Grunt DevTools              Extends the Developer Tools, adding tools for Grunt! A full GUI for your Gruntfile. Supports background tasks, such as 'watch'. Allows you to run tasks for multiple projects in a single window. See the GitHub page fo…    </p>
<p><strong> - "Gruntfile" -> Grunt file,Grunt-file,Disgruntle</strong></p>
<p><strong> - "fo" -> few,of,do,go,f,o,foe,for,fro,fol,fog,fop,fob,so,fa</strong></p>
<br/>
<p>                       DevTools Redirect              This devtools extension will allow you to work faster on your local files using the server environment, try modifications on a website without breaking it for other people. You're deciding which file(s) you want to redi…    </p>
<p><strong> - "devtools" -> DevTools</strong></p>
<p><strong> - "file(s" -> files,filers,file's</strong></p>
<p><strong> - "redi" -> ride,redo,red,redid,Dredi,Fredi,ired,reds,Nedi,Tedi,Hedi,red i</strong></p>
<br/>
<p>                       Knockoutjs context debugger              Knockoutjs debugging extension. Adds a extra sidebar in the elements pane of the chrome dev tools with the relevant knockout context and data for the selected element. Very usefull if you got large/nested viewmodels. A…    </p>
<p><strong> - "Knockoutjs" -> Knockouts,Knockout's,Knockout</strong></p>
<p><strong> - "dev" -> Dev,deb,div,den,rev,deg,def,dew,Nev,Rev,Lev,Kev</strong></p>
<p><strong> - "usefull" -> useful,usefully,use full,use-full,useful l</strong></p>
<p><strong> - "viewmodels" -> view models,view-models,viewfinders</strong></p>
<br/>
<p>                       BatmanJS DevTools              If you work with Batman.js, this Batman.js Devtools Chrome extension is an invaluable tool. It includes a variety of tools useful for developing with Batman.js right in your browser.    </p>
<p><strong> - "BatmanJS" -> Batman's,Batman,Batsman</strong></p>
<p><strong> - "Batman.js" -> Batman</strong></p>
<p><strong> - "Devtools" -> DevTools,Dev tools,Dev-tools</strong></p>
<br/>
<p>                       Emmet LiveStyle              Unlike other similar tools, LiveStyle doesn't replace CSS file in browser (or file system) to display changes, it performs structural analysis as-you-type and maps changes from one CSS source into another. Benefits are…    </p>
<p><strong> - "LiveStyle" -> Live Style,Lifestyle,Live-style,Stylites,Styles</strong></p>
<br/>
<p>                       SnappySnippet              SnappySnippet is a DevTools extension that allows you to extract CSS and HTML from selected DOM subtree (last inspected element). Then, with just one click, you can send selected code to CodePen, jsFiddle or JS Bin. Ot…    </p>
<p><strong> - "SnappySnippet" -> Snappy Snippet,Snappy-snippet,Whippersnapper</strong></p>
<p><strong> - "CodePen" -> Code Pen,Code-Pen,Code-pen,Codependent,Codependency,Encode</strong></p>
<p><strong> - "jsFiddle" -> fiddle</strong></p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<p><strong> - "Ot" -> OT,O,T,Ont,Oct,Et,Os,St,It,At,Rt,Ct,Gt,Mt,Pt</strong></p>
<br/>
<p>                       RapidJS DevTools              An extra panel in the inspect dialog of the chrome developer tools, that let you inspect the insights of a rAppid:js application. To enable the inspection for your application you need to add the following setting to y…    </p>
<p><strong> - "RapidJS" -> Rapids,Rapid</strong></p>
<p><strong> - "rAppid:js" -> rapidness</strong></p>
<br/>
<p>                       RailsPanel              RailsPanel is a Chrome extension for Rails development that will end your tailing of development.log. Have all information about your Rails app requests right there in the Developer Tools panel. Provides insight to db/r…    </p>
<p><strong> - "RailsPanel" -> Rails Panel,Rails-panel,Spandrels</strong></p>
<p><strong> - "development.log" -> developmental,development</strong></p>
<br/>
<p>                       App Inspector for Sencha              Google Chrome™ Dev Tools extension for debugging Sencha™ applications.    </p>
<p><strong> - "Sencha" -> Hansen,Chase</strong></p>
<br/>
<p>                       jQuery Debugger              New Selector Inspector panel Comfortably inspect your jQuery selectors, and watch their matching elements displayed on any website. Designed to help you understand easily even the most complex selectors. Two new sideba…    </p>
<p><strong> - "jQuery" -> j Query,query,equerry</strong></p>
<p><strong> - "sideba" -> sidebar,sideband,backside</strong></p>
<br/>
<p>                       PageSpeed Insights              The PageSpeed Insights browser extensions, available for Chrome and Firefox, allow you to evaluate the performance of your web pages and to get suggestions on how to improve them. PageSpeed Insights for Chrome is a Chr…    </p>
<p><strong> - "PageSpeed" -> Page Speed,Page-speed,Pages peed,Pages-peed,Passaged</strong></p>
<p><strong> - "Chr" -> Che,Ch,Cr,Hr,Cher,Chi,Car,C hr,Ch r,Char,Cir,Ctr</strong></p>
<br/>
<p>                       Django Debug Panel              Django Debug Toolbar inside WebKit DevTools. Works fine with background AJAX requests and non-HTML responses. Great for single-page applications and other AJAX intensive web applications.    </p>
<p><strong> - "Django" -> Fandango</strong></p>
<p><strong> - "Toolbar" -> Tool bar,Tool-bar,Barstool</strong></p>
<br/>
Processing ../devtools-docs/docs/heap-profiling-comparison.html file...
Processing ../devtools-docs/docs/heap-profiling-containment.html file...
Processing ../devtools-docs/docs/heap-profiling-dom-leaks.html file...
Processing ../devtools-docs/docs/heap-profiling-dominators.html file...
<p>Using the Dominators view, it's easy to spot collection objects that are small by themselves but retain lots of memory.  In the Dominators view, find the  node (usually, the topmost one) and expand it. Look at the top two child nodes (by default nodes are sorted by their retained size). The first one is a system wrapper around the  array. The second one is the  node. Both of them have small shallow size, but big retained size, due to a fact that they hold lots of  objects.</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<br/>
<p>Note that the Dominators reveals dependencies between objects, not their references. For example, one of the  objects is shared between two arrays, thus it is not retained by any of them, but by the  object.</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<br/>
Processing ../devtools-docs/docs/heap-profiling-summary.html file...
Processing ../devtools-docs/docs/heap-profiling.html file...
<p>There are four views:        Summary — shows objects grouped by       the constructor name;     Comparison — displays difference between       two snapshots;     Containment — allows exploration of heap       contents;     Dominators —       shows dominators 	tree.         </p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<p><strong> - "dominators" -> dominator,dominator's,nominators,dominator s,dominates,terminators,nominator,indoctrinators</strong></p>
<br/>
<p>Dominators —       shows dominators 	tree.     </p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<p><strong> - "dominators" -> dominator,dominator's,nominators,dominator s,dominates,terminators,nominator,indoctrinators</strong></p>
<br/>
<p>Each property has one of four types::        property — a regular property with a name,       accessed via the  (dot) operator, or via        (brackets) notation, e.g. ;     element — a regular property with a numeric       index, accessed via  (brackets) notation;     context variable — a variable in a function       context, accessible by its name from inside a function closure;     system property — property added by the       JavaScript VM, not accessible from JavaScript code.    </p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>property — a regular property with a name,       accessed via the  (dot) operator, or via        (brackets) notation, e.g. ;</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Objects designated as System don't have corresponding JavaScript types. They are part of JavaScript VM's object system implementation.</p>
<p><strong> - "VM's" -> V's,M's,VMS's,Vi's,Va's,Vt's,V M's,Vim's,Em's,Sm's,Am's</strong></p>
<br/>
<p>When more than one heap snapshot is taken, it is possible to compare them, and find leaked objects. To verify that a certain application operation doesn't create leaks (e.g. usually a pair of direct and reverse operations, like opening a document, and then closing it, should not leave any garbage), you may follow the scenario below:   take a heap snapshot before performing an operation;   perform an operation (e.g. open a document);   perform a reverse operation (close the document);   take a heap snapshot. </p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>perform an operation (e.g. open a document);</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>The view provides several entry points:         objects — these are objects       considered as "global" objects for JavaScript code;     GC roots — actual GC roots used by VM's garbage collector;     Native objects — browser objects that are "pushed"       inside the JavaScript virtual machine to allow automation, e.g. DOM nodes,       CSS rules (see the next section for more details.)    </p>
<p><strong> - "VM's" -> V's,M's,VMS's,Vi's,Va's,Vt's,V M's,Vim's,Em's,Sm's,Am's</strong></p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>GC roots — actual GC roots used by VM's garbage collector;</p>
<p><strong> - "VM's" -> V's,M's,VMS's,Vi's,Va's,Vt's,V M's,Vim's,Em's,Sm's,Am's</strong></p>
<br/>
<p>Native objects — browser objects that are "pushed"       inside the JavaScript virtual machine to allow automation, e.g. DOM nodes,       CSS rules (see the next section for more details.)</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Dominators view</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<br/>
<p>The Dominators view shows the dominators tree for the heap graph. The Dominators view looks similar to the Containment view, but lacks property names. This is because a dominator of an object may lack direct references to it, that is, the dominators tree is not a spanning tree of the graph. But this only serves for good, as helps us to identify memory accumulation points quickly.</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<p><strong> - "dominators" -> dominator,dominator's,nominators,dominator s,dominates,terminators,nominator,indoctrinators</strong></p>
<br/>
<p>In the simplest case, the path will only include "true" JavaScript objects and use references that are accessible from JavaScript code, e.g.:                 </p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Even more advanced are paths including "hidden" objects. Normally, the existence of such paths doesn't mean that an application has a leak. Some of the paths are "low level" paths, equivalent to their JavaScript shortcuts. E.g., every object has  and  internal arrays, thus a property value can be displayed as held directly by an object (this is how a JavaScript programmer sees it), or as an element of the  array (this is how the JavaScript virtual machine actually accesses it.) Knowing these details might help in getting an understanding of how the virtual machine works. However, for most of web application developers it is safe to ignore them. Below are some examples of "internal" paths:       — this is equivalent to a JavaScript path:     </p>
<p><strong> - "E.g" -> Eng,Erg,Egg,EEG</strong></p>
<br/>
<p>Q&A</p>
<p><strong> - "Q&A" -> QUA,QA</strong></p>
<br/>
Processing ../devtools-docs/docs/integrating.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>Third-party applications, such as IDEs, editors, continuous integration  harnesses, and test frameworks can integrate with the Chrome debugger in order  to debug code, live-preview code and CSS changes, and control the browser.  Clients use the Chrome debugging  protocol to interact with an  instance of Chrome, which can be running on the same system or remotely. </p>
<p><strong> - "IDEs" -> Ides,IDE,IDs,ID Es,ID-Es,IDE s,Dies,Odes,Idea,Ids,Sides,Ideas,Aides,Rides</strong></p>
<br/>
<p>Applications that run in Chrome (such as web-based IDEs) can create a Chrome  extension using the debugger module,  chrome.debugger. This  module lets the extension interact with the debugger directly, bypassing the  DevTools UI. See Using the debugger extension  API for more  information.</p>
<p><strong> - "IDEs" -> Ides,IDE,IDs,ID Es,ID-Es,IDE s,Dies,Odes,Idea,Ids,Sides,Ideas,Aides,Rides</strong></p>
<p><strong> - "chrome.debugger" -> Mercurochrome</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/javascript-debugging.html file...
<p>In this section, we will walk through how to use these tools by debugging the Google Closure hovercard demo and other dynamic examples in this page.</p>
<p><strong> - "hovercard" -> hover card,hover-card,overheard,hardcover</strong></p>
<br/>
<p>Open a site such as the Google Closure hovercard demo page or the TodoMVC Angular app.</p>
<p><strong> - "hovercard" -> hover card,hover-card,overheard,hardcover</strong></p>
<p><strong> - "TodoMVC" -> Dodoma</strong></p>
<br/>
<p>For a walkthrough of other keyboard shortcuts supported, see Shortcuts.</p>
<p><strong> - "walkthrough" -> walk through,walk-through,breakthrough</strong></p>
<br/>
<p>In the Sources panel, open a JavaScript file for debugging. In the example below, we are debugging the todoCtrl.js file from the AngularJS version of TodoMVC.</p>
<p><strong> - "todoCtrl.js" -> postdoctoral</strong></p>
<p><strong> - "AngularJS" -> Angular</strong></p>
<p><strong> - "TodoMVC" -> Dodoma</strong></p>
<br/>
<p>Once you have one or more breakpoints set, return to the browser window and interact with your page. In the example below, a breakpoint was added within . Now any attempts to delete a todo item in the TodoMVC app will trigger a breakpoint pause:</p>
<p><strong> - "todo" -> too,dodo,to do,to-do,Todd,Tod</strong></p>
<p><strong> - "TodoMVC" -> Dodoma</strong></p>
<br/>
<p>Further information and examples using async call stacks can be found in Debugging Asynchronous JavaScript with Chrome DevTools on HTML5Rocks.com.</p>
<p><strong> - "HTML5Rocks.com" -> </strong></p>
<br/>
<p>In the Sources panel select "dynamicScript.js" from scripts drop-down and set breakpoint on line 2</p>
<p><strong> - "dynamicScript.js" -> microhydrodynamics</strong></p>
<br/>
<p>Note: Notice the  line at the end of dynamicScript.js file. This technique gives a name to a script created with eval, and will be discussed in more detail in the Source Maps section. Breakpoints can be set in dynamic JavaScript only if it has a user supplied name.</p>
<p><strong> - "dynamicScript.js" -> microhydrodynamics</strong></p>
<p><strong> - "eval" -> veal,vela,val,evals,vale,evil,oval,e val,Vale</strong></p>
<br/>
<p>You should stop in raiseAndCatchException function</p>
<p><strong> - "raiseAndCatchException" -> exceptionalness</strong></p>
<br/>
<p>You should not stop in raiseAndCatchException function since exception is caught</p>
<p><strong> - "raiseAndCatchException" -> exceptionalness</strong></p>
<br/>
<p>Type "data.txt" in text input and hit enter</p>
<p><strong> - "data.txt" -> dataset</strong></p>
<br/>
<p>Retrieve data.txt by XHR</p>
<p><strong> - "data.txt" -> dataset</strong></p>
<br/>
<p>Set a mouseout Event Listener breakpoint by clicking on the checkbox near the mouseout entry</p>
<p><strong> - "mouseout" -> mouse out,mouse-out,mousse,titmouse,mouse,outhouse</strong></p>
<br/>
<p>Note: Following events are supported   Keyboard: keydown, keypress, keyup, textInput   Mouse: click, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout, mousewheel   Control: resize, scroll, zoom, focus, blur, select, change, submit, reset   Clipboard: copy, cut, paste, beforecopy, beforecut, beforepaste   Load: load, unload, abort, error   DOM Mutation: DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified, DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded   Device: deviceorientation, devicemotion</p>
<p><strong> - "keydown" -> key down,key-down,Downey</strong></p>
<p><strong> - "keypress" -> key press,key-press,cypress</strong></p>
<p><strong> - "keyup" -> key up,key-up,keypad</strong></p>
<p><strong> - "textInput" -> text Input,text-input,textile</strong></p>
<p><strong> - "dblclick" -> dbl click,dbl-click,keyclick</strong></p>
<p><strong> - "mousedown" -> mouse down,mouse-down,moused own,moused-own,dormouse</strong></p>
<p><strong> - "mouseup" -> mouse up,mouse-up,mouse,mousse</strong></p>
<p><strong> - "mouseover" -> mouse over,mouse-over,moreover,mouser,overuse</strong></p>
<p><strong> - "mousemove" -> mouse move,mouse-move,mousse,venomous</strong></p>
<p><strong> - "mouseout" -> mouse out,mouse-out,mousse,titmouse,mouse,outhouse</strong></p>
<p><strong> - "mousewheel" -> mouse wheel,mouse-wheel,wheelhouse</strong></p>
<p><strong> - "beforecopy" -> before copy,before-copy,beforehand</strong></p>
<p><strong> - "beforecut" -> before cut,before-cut,before</strong></p>
<p><strong> - "beforepaste" -> before paste,before-paste,foretaste</strong></p>
<p><strong> - "DOMActivate" -> Dom Activate,Dom-activate,Activated,Activate</strong></p>
<p><strong> - "DOMFocusIn" -> Defocussing</strong></p>
<p><strong> - "DOMFocusOut" -> Defocussing</strong></p>
<p><strong> - "DOMAttrModified" -> Modification</strong></p>
<p><strong> - "DOMCharacterDataModified" -> Characterized</strong></p>
<p><strong> - "DOMNodeInserted" -> Inserted</strong></p>
<p><strong> - "DOMNodeInsertedIntoDocument" -> </strong></p>
<p><strong> - "DOMNodeRemoved" -> Underemployed</strong></p>
<p><strong> - "DOMNodeRemovedFromDocument" -> </strong></p>
<p><strong> - "DOMSubtreeModified" -> Modifiableness</strong></p>
<p><strong> - "DOMContentLoaded" -> Malcontentedness</strong></p>
<p><strong> - "deviceorientation" -> device orientation,device-orientation,decentralization</strong></p>
<p><strong> - "devicemotion" -> device motion,device-motion,demonetization</strong></p>
<br/>
<p>Quick protip: When "refresh" is initiated from DevTools (Ctrl+R while focused in DevTools), all pauses are disabled until the new page load is commenced (or as a plan B, until the user presses the "Pause" button).  However, if you initiate refresh from the browser button (or Ctrl+R while focus is outside the DevTools), any remaining breakpoints will actually be hit. This fact could be used for those who are  interested in page unloading process.</p>
<p><strong> - "Ctrl+R" -> Ctrl</strong></p>
<br/>
<p>Navigate to the Google Closure hovercard demo</p>
<p><strong> - "hovercard" -> hover card,hover-card,overheard,hardcover</strong></p>
<br/>
<p>In the Sources panel, open up "mouse.js" and use the Ctrl/Cmd + Shift + O to navigate to the onMouseOut() function</p>
<p><strong> - "mouse.js" -> mouses</strong></p>
<p><strong> - "onMouseOut" -> Monmouth</strong></p>
<br/>
<p>Modify the function, adding a console.log('Moused out') to the end</p>
<p><strong> - "console.log('Moused" -> consolidated</strong></p>
<br/>
<p>When something goes wrong, you can open the DevTools console (Ctrl+Shift+J / Cmd+Option+J) and find a number of JavaScript error messages there. Each message has a link to the file name with the line number you can navigate to.</p>
<p><strong> - "Ctrl+Shift+J" -> Shiftlessness</strong></p>
<p><strong> - "Cmd+Option+J" -> Consumption</strong></p>
<br/>
<p>You may also want to pause JavaScript execution next time exception is thrown and inspect its call stack, scope variables and state of your app. A tri-state stop button (   ) at the bottom of the Scripts panel enables you to switch between different exception handling modes: you can choose to either pause on all exception or only on the uncaught ones or you can ignore exceptions altogether.</p>
<p><strong> - "tri-state" -> tree-state,tr-state,ti-state,trio-state,tori-state,trig-state,trim-state,trip-state,try-state,Ari-state,Uri-state,Fri-state,tr i-state,tristate,testatrices</strong></p>
<br/>
<p>Error.stack</p>
<p><strong> - "Error.stack" -> Terroristic</strong></p>
<br/>
<p>console.trace()</p>
<p><strong> - "console.trace" -> contraception</strong></p>
<br/>
<p>You can instrument your code with console.trace() calls that would print current JavaScript call stacks:</p>
<p><strong> - "console.trace" -> contraception</strong></p>
<br/>
<p>console.assert()</p>
<p><strong> - "console.assert" -> inconsolableness</strong></p>
<br/>
<p>There is also a way to place assertion in your JavaScript code. Just call console.assert() with the error condition as the first parameter. Whenever this expression evaluates to false you will see a corresponding console record:</p>
<p><strong> - "console.assert" -> inconsolableness</strong></p>
<br/>
<p>Handling exceptions at runtime using window.onerror</p>
<p><strong> - "window.onerror" -> windowpane</strong></p>
<br/>
<p>Chrome supports setting a handler function to window.onerror. Whenever a JavaScript exception is thrown in the window context and is not caught by any try/catch block, the function will be invoked with the exception's message, the URL of the file where the exception was thrown and the line number in that file passed as three arguments in that order. You may find it convenient to set an error handler that would collect information about uncaught exceptions and report it back to your server.</p>
<p><strong> - "window.onerror" -> windowpane</strong></p>
<br/>
<p>You need to use a minifier that's capable of creating source maps. Closure  Compiler and UglifyJS 2.0 are two such tools but there are also tools available  that create source maps for CoffeeScript, SASS and many others. See the Source maps: languages, tools and other info  wiki page.</p>
<p><strong> - "UglifyJS" -> Ugliness</strong></p>
<br/>
<p>Take a look at the special build of the font dragr tool in Chrome, with source mapping enabled, and you'll notice that the JavaScript isn't compiled and you can see all the individual JavaScript files it references. This is using source mapping, but behind the scenes actually running the compiled code. Any errors, logs and breakpoints will map to the dev code for awesome debugging! So in effect it gives you the illusion that you're running a dev site in production.</p>
<p><strong> - "dragr" -> drag,drags,drag r,Agra</strong></p>
<p><strong> - "dev" -> Dev,deb,div,den,rev,deg,def,dew,Nev,Rev,Lev,Kev</strong></p>
<br/>
<p>@sourceURL and displayName in action</p>
<p><strong> - "sourceURL" -> source URL,source-URL,sourceless,source</strong></p>
<p><strong> - "displayName" -> display Name,display-name,displayed</strong></p>
<br/>
<p>This helper looks very similar to the  property and is actually mentioned in the source map V3 specifications. By including the following special comment in your code, which will be evaled, you can name evals and inline scripts and styles so they appear as more logical names in your dev tools.</p>
<p><strong> - "V3" -> V,3,Vi,Va,Vt,VI,VA,VT,VD,VG,VM,VP,VF,Vs</strong></p>
<p><strong> - "dev" -> Dev,deb,div,den,rev,deg,def,dew,Nev,Rev,Lev,Kev</strong></p>
<br/>
<p>Working with sourceURL</p>
<p><strong> - "sourceURL" -> source URL,source-URL,sourceless,source</strong></p>
<br/>
<p>NetTuts: Source Maps 101</p>
<p><strong> - "NetTuts" -> Net Tuts,Net-tuts,Netts</strong></p>
<br/>
Processing ../devtools-docs/docs/javascript-memory-profiling.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>Is my page using too much memory? - the Timeline memory view and Chrome task manager can help you identify if you're using too much memory. Memory view can track the number of live DOM nodes, documents and JS event listeners in the inspected render process. As a rule of thumb: avoid holding references to DOM elements you no longer need to use, unbind unneeded event listeners and take care when storing large chunks of data you aren't going to use. </p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>Is my page using too much memory? - the Timeline memory view and Chrome task manager can help you identify if you're using too much memory. Memory view can track the number of live DOM nodes, documents and JS event listeners in the inspected render process. As a rule of thumb: avoid holding references to DOM elements you no longer need to use, unbind unneeded event listeners and take care when storing large chunks of data you aren't going to use.</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>Is my page free of memory leaks? - the Object allocation tracker can help you narrow down leaks by looking at JS object allocation in real-time. You can also use the heap profiler to take JS heap snapshots, analyze memory graphs and compare snapshots to discover what objects are not being cleaned up by garbage collection. </p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>Is my page free of memory leaks? - the Object allocation tracker can help you narrow down leaks by looking at JS object allocation in real-time. You can also use the heap profiler to take JS heap snapshots, analyze memory graphs and compare snapshots to discover what objects are not being cleaned up by garbage collection.</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>How frequently is my page forcing garbage collection? - if you are GCing frequently, you may be allocating too frequently. The Timeline memory view can help you identify pauses of interest. </p>
<p><strong> - "GCing" -> Going,Icing,Acing</strong></p>
<br/>
<p>How frequently is my page forcing garbage collection? - if you are GCing frequently, you may be allocating too frequently. The Timeline memory view can help you identify pauses of interest.</p>
<p><strong> - "GCing" -> Going,Icing,Acing</strong></p>
<br/>
<p>Renderer memory is all memory of the process where an inspected page is rendered: native memory + JS heap memory of the page + JS heap memory of all dedicated workers started by the page. Nevertheless, even a small object can hold a large amount of memory indirectly, by preventing other objects from being disposed of by the automatic garbage collection process.</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>Document DOM tree consisting of all native DOM nodes reachable by traversing the document. Not all of them may have JS wrappers but if they have the wrappers will be alive while the document is alive. </p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>Document DOM tree consisting of all native DOM nodes reachable by traversing the document. Not all of them may have JS wrappers but if they have the wrappers will be alive while the document is alive.</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>Sometimes objects may be retained by debugger context and DevTools console (e.g. after console evaluation). </p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Sometimes objects may be retained by debugger context and DevTools console (e.g. after console evaluation).</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>The memory graph starts with a root, which may be the  object of the browser or the  object of a Node.js module. You don't control how this root object is GC'd.</p>
<p><strong> - "Node.js" -> NodeJS</strong></p>
<p><strong> - "GC'd" -> Rec'd</strong></p>
<br/>
<p>Nodes (or objects) are labelled using the name of the constructor function that was used to build them </p>
<p><strong> - "labelled" -> labeled,la belled,la-belled,label led,label-led,belled,belabored,blabbed,belated</strong></p>
<br/>
<p>Nodes (or objects) are labelled using the name of the constructor function that was used to build them</p>
<p><strong> - "labelled" -> labeled,la belled,la-belled,label led,label-led,belled,belabored,blabbed,belated</strong></p>
<br/>
<p>Edges are labelled using the names of properties. </p>
<p><strong> - "labelled" -> labeled,la belled,la-belled,label led,label-led,belled,belabored,blabbed,belated</strong></p>
<br/>
<p>Edges are labelled using the names of properties.</p>
<p><strong> - "labelled" -> labeled,la belled,la-belled,label led,label-led,belled,belabored,blabbed,belated</strong></p>
<br/>
<p>Dominators</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<br/>
<p>Dominator objects are comprised of a tree structure because each object has exactly one dominator. A dominator of an object may lack direct references to an object it dominates, that is, the dominators tree is not a spanning tree of the graph.</p>
<p><strong> - "dominators" -> dominator,dominator's,nominators,dominator s,dominates,terminators,nominator,indoctrinators</strong></p>
<br/>
<p>Numbers (e.g 3.14159..)</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Strings (e.g 'Werner Heisenberg')</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>an immediate 31-bit integer values called small integers (SMIs), or </p>
<p><strong> - "SMIs" -> Sm Is,S Mis,Sis,Mis,Semis,Miss,Isms,Skis,Sims,Sm's,Sm-is,Ism</strong></p>
<br/>
<p>an immediate 31-bit integer values called small integers (SMIs), or</p>
<p><strong> - "SMIs" -> Sm Is,S Mis,Sis,Mis,Semis,Miss,Isms,Skis,Sims,Sm's,Sm-is,Ism</strong></p>
<br/>
<p>heap objects, referred to as heap numbers. Heap numbers are used for storing values that do not fit into the SMI form, such as doubles, or when a value needs to be boxed, such as setting properties on it. </p>
<p><strong> - "SMI" -> MI,SEMI,MIS,ISM,SCI,SKI,AMI,S MI,SIM,SM,SI,SUI,SM I,SMITH</strong></p>
<br/>
<p>heap objects, referred to as heap numbers. Heap numbers are used for storing values that do not fit into the SMI form, such as doubles, or when a value needs to be boxed, such as setting properties on it.</p>
<p><strong> - "SMI" -> MI,SEMI,MIS,ISM,SCI,SKI,AMI,S MI,SIM,SM,SI,SUI,SM I,SMITH</strong></p>
<br/>
<p>Memory for new JavaScript objects is allocated from a dedicated JavaScript heap (or VM heap).These objects are managed by V8's garbage collector and therefore, will stay alive as long as there is at least one strong reference to them.</p>
<p><strong> - "heap).These" -> heap). These,parentheses</strong></p>
<p><strong> - "V8's" -> V's,Vi's,Va's,Vt's</strong></p>
<br/>
<p>Arrays - An Array is an Objectwith numeric keys. They are used extensively in the V8 VM for storing large amounts of data. Sets of key-value pairs used like dictionaries are backed up by arrays.</p>
<p><strong> - "Objectwith" -> Object with,Object-with,Objectivity</strong></p>
<br/>
<p>Each wrapper object holds a reference to the corresponding native object, for redirecting commands to it. In its own turn, an object group holds wrapper objects. However, this doesn't create an uncollectable cycle, as GC is smart enough to release object groups whose wrappers are no longer referenced. But forgetting to release a single wrapper will hold the whole group and associated wrappers.</p>
<p><strong> - "uncollectable" -> noncollectable,uncorrectable,uncollected,uncontrollable</strong></p>
<br/>
<p>To read more about how to isolate problems that might be causing leaks during your memory profiling sessions, see Memory profiling with the Chrome DevTools by Zack Grossbart.</p>
<p><strong> - "Grossbart" -> Crossbar</strong></p>
<br/>
<p>Remember to check and nullify variables that contain references to DOM elements which may be getting updated/destroyed during the lifecycle of your app. Check object properties which may reference other objects (or other DOM elements). Be sure to keep an eye on variable caches which may accumulate over time.</p>
<p><strong> - "lifecycle" -> life cycle,life-cycle,Wycliffe,Felicle</strong></p>
<br/>
<p>Snapshots can be removed (both from DevTools and renderers memory) by pressing the Clear all profiles icon ():</p>
<p><strong> - "renderers" -> renderer,renderer's,renderer s,renders,prependers,tenderer,surrender</strong></p>
<br/>
<p>Note: Closing the DevTools window will not delete collected profiles from the renderers memory. When reopening DevTools, all previously taken snapshots will reappear in the list of snapshots.</p>
<p><strong> - "renderers" -> renderer,renderer's,renderer s,renders,prependers,tenderer,surrender</strong></p>
<br/>
<p>The Dominators view, which can be enabled via the Settings panel — shows the dominators tree. and can be useful to find accumulation points.</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<p><strong> - "dominators" -> dominator,dominator's,nominators,dominator s,dominates,terminators,nominator,indoctrinators</strong></p>
<br/>
<p>a: property — a regular property with a name, accessed via the . (dot) operator, or via [ ] (brackets) notation, e.g. ["foo bar"]; </p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<p><strong> - "foo" -> few,goo,fop,foot,fool,food,foe,for,fro,too,fol,coo,fog,moo,fob</strong></p>
<br/>
<p>a: property — a regular property with a name, accessed via the . (dot) operator, or via [ ] (brackets) notation, e.g. ["foo bar"];</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<p><strong> - "foo" -> few,goo,fop,foot,fool,food,foe,for,fro,too,fol,coo,fog,moo,fob</strong></p>
<br/>
<p>Objects designated as do not have a corresponding JavaScript type. They are part of JavaScript VM's object system implementation. V8 allocates most of its internal objects in the same heap as the user's JS objects. So these are just v8 internals.</p>
<p><strong> - "VM's" -> V's,M's,VMS's,Vi's,Va's,Vt's,V M's,Vim's,Em's,Sm's,Am's</strong></p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<p><strong> - "v8" -> V8,v,8,vs,vi,vb,F8</strong></p>
<br/>
<p>This view is used to compare multiple snapshots to each other so that you can see what the difference between them are in order to find leaked objects. To verify that a certain application operation doesn't create leaks (e.g. usually a pair of direct and reverse operations, like opening a document, and then closing it, should not leave any garbage), you may follow the scenario below:</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>DOMWindow** objects** — these are objects considered as "global" objects for JavaScript code; </p>
<p><strong> - "DOMWindow" -> Dom Window,Dom-window,Downwind,Windows,Window</strong></p>
<br/>
<p>DOMWindow** objects** — these are objects considered as "global" objects for JavaScript code;</p>
<p><strong> - "DOMWindow" -> Dom Window,Dom-window,Downwind,Windows,Window</strong></p>
<br/>
<p>GC roots — actual GC roots used by VM's garbage collector; </p>
<p><strong> - "VM's" -> V's,M's,VMS's,Vi's,Va's,Vt's,V M's,Vim's,Em's,Sm's,Am's</strong></p>
<br/>
<p>GC roots — actual GC roots used by VM's garbage collector;</p>
<p><strong> - "VM's" -> V's,M's,VMS's,Vi's,Va's,Vt's,V M's,Vim's,Em's,Sm's,Am's</strong></p>
<br/>
<p>Native objects — browser objects that are "pushed" inside the JavaScript virtual machine to allow automation, e.g. DOM nodes, CSS rules (see the next section for more details.) </p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Native objects — browser objects that are "pushed" inside the JavaScript virtual machine to allow automation, e.g. DOM nodes, CSS rules (see the next section for more details.)</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>     Examples:     Try out this example of why eval is evil to analyze the impact of closures on memory. You may also be interested in following it up with this example that takes you through recording heap allocations. </p>
<p><strong> - "eval" -> veal,vela,val,evals,vale,evil,oval,e val,Vale</strong></p>
<br/>
<p> maintains a reference to it's parent (parentNode) and recursively up to , so only when leafRef is nullified is the WHOLE tree under  a candidate for GC.</p>
<p><strong> - "parentNode" -> parent Node,parent-node,parenthood,godparent</strong></p>
<p><strong> - "leafRef" -> leaf Ref,leaf-ref,leaflet</strong></p>
<br/>
<p>To read more about DOM leaks and memory analysis fundamentals checkout Finding and debugging memory leaks with the Chrome DevTools by Gonzalo Ruiz de Villa.</p>
<p><strong> - "de" -> DE,ed,De,d,e,die,den,doe,ode,due,deg,deb,dye,def,dew</strong></p>
<br/>
<p>Dominators view</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<br/>
<p>The Dominators view shows the dominators tree for the heap graph. The Dominators view looks similar to the Containment view, but lacks property names. This is because a dominator of an object may lack direct references to it, that is, the dominators tree is not a spanning tree of the graph. But this only serves for good, as helps us to identify memory accumulation points quickly.</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<p><strong> - "dominators" -> dominator,dominator's,nominators,dominator s,dominates,terminators,nominator,indoctrinators</strong></p>
<br/>
<p>Note: In Chrome Canary, Dominators view can be enabled by going to Settings > Show advanced heap snapshot properties and restarting the DevTools.</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<br/>
<p>     Examples:     Try this demo (opens in a new tab) to train yourself in finding accumulation points. Follow it up with this example of running into retaining paths and dominators. </p>
<p><strong> - "dominators" -> dominator,dominator's,nominators,dominator s,dominates,terminators,nominator,indoctrinators</strong></p>
<br/>
<p>Note:At the time of writing, we are planning on avoiding this GC to reduce the drop in used heap size when taking heap snapshots. This has yet to be implemented but garbage would still be out of the snapshot.</p>
<p><strong> - "Note:At" -> Notate</strong></p>
<br/>
<p>It's the rate of increase in the steepness of this curve that you need to keep an eye on.There is also a DOM node counter, Document counter and Event listener count in the Memory view which can be useful during diagnosis. DOM nodes use native memory and do not directly affect the JavaScript memory graph.</p>
<p><strong> - "on.There" -> on. There,thereon,Theron,hereon</strong></p>
<br/>
<p>Yellow nodes (with a yellow background) however do have direct references from JavaScript. Look for yellow nodes in the same detached DOM tree to locate references from your JavaScript. There should be a chain of properties leading from the DOM window to the element (e.g ).</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Q: What's the difference between the different Summary, Comparison, Dominators and Containment views?</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<br/>
<p>Containment view provides a better view of object structure, helping us analyse objects referenced in the global namespace (i.e. window) to find out what is keeping them around. It lets you analyse closures and dive into your objects at a low level. </p>
<p><strong> - "analyse" -> analyses,analyst,analyze,analysis,analysand,Anallese,Analise</strong></p>
<p><strong> - "namespace" -> name space,name-space,names pace,names-pace,spacemen</strong></p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<br/>
<p>Containment view provides a better view of object structure, helping us analyse objects referenced in the global namespace (i.e. window) to find out what is keeping them around. It lets you analyse closures and dive into your objects at a low level.</p>
<p><strong> - "analyse" -> analyses,analyst,analyze,analysis,analysand,Anallese,Analise</strong></p>
<p><strong> - "namespace" -> name space,name-space,names pace,names-pace,spacemen</strong></p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<br/>
<p>Dominators view helps confirm that no unexpected references to objects are still hanging around (i.e that they are well contained) and that deletion/garbage collection is actually working. </p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<br/>
<p>Dominators view helps confirm that no unexpected references to objects are still hanging around (i.e that they are well contained) and that deletion/garbage collection is actually working.</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<br/>
<p>(global property) – intermediate objects between a global object (like 'window') and an object referenced by it. If an object is created using a constructor Person and is held by a global object, the retaining path would look like [global] > (global property) > Person. This contrasts with the norm, where objects directly reference each other. We have intermediate objects for performance reasons. Globals are modified regularly and property access optimisations do a good job for non-global objects aren't applicable for globals. </p>
<p><strong> - "optimisations" -> optimizations,optimization,improvisations,minimizations,improvisation</strong></p>
<br/>
<p>(global property) – intermediate objects between a global object (like 'window') and an object referenced by it. If an object is created using a constructor Person and is held by a global object, the retaining path would look like [global] > (global property) > Person. This contrasts with the norm, where objects directly reference each other. We have intermediate objects for performance reasons. Globals are modified regularly and property access optimisations do a good job for non-global objects aren't applicable for globals.</p>
<p><strong> - "optimisations" -> optimizations,optimization,improvisations,minimizations,improvisation</strong></p>
<br/>
<p>(array, string, number, regexp) – a list of object types with properties which reference an Array, String, Number or regular expression </p>
<p><strong> - "regexp" -> reg exp,reg-exp,Regen</strong></p>
<br/>
<p>(array, string, number, regexp) – a list of object types with properties which reference an Array, String, Number or regular expression</p>
<p><strong> - "regexp" -> reg exp,reg-exp,Regen</strong></p>
<br/>
<p>(compiled code) – simply, everything related to compiled code. Script is similar to a function but corresponds to a script body. SharedFunctionInfos (SFI) are objects standing between functions and compiled code. Functions are usually have a context, while SFIs do not. </p>
<p><strong> - "SharedFunctionInfos" -> Contradistinctions</strong></p>
<p><strong> - "SFI" -> IFS,SF,SCI,SKI,SF I,SI,SUFI,SUI</strong></p>
<p><strong> - "SFIs" -> Sf Is,Sis,Skis,Sf-is,Misfit</strong></p>
<br/>
<p>(compiled code) – simply, everything related to compiled code. Script is similar to a function but corresponds to a script body. SharedFunctionInfos (SFI) are objects standing between functions and compiled code. Functions are usually have a context, while SFIs do not.</p>
<p><strong> - "SharedFunctionInfos" -> Contradistinctions</strong></p>
<p><strong> - "SFI" -> IFS,SF,SCI,SKI,SF I,SI,SUFI,SUI</strong></p>
<p><strong> - "SFIs" -> Sf Is,Sis,Skis,Sf-is,Misfit</strong></p>
<br/>
<p>HTMLDivElement, HTMLAnchorElement, DocumentFragment etc – references to elements or document objects of a particular type referenced by your code. </p>
<p><strong> - "HTMLDivElement" -> Dishevelment</strong></p>
<p><strong> - "HTMLAnchorElement" -> Enfranchisement</strong></p>
<p><strong> - "DocumentFragment" -> Document Fragment,Document-fragment,Documentation</strong></p>
<br/>
<p>HTMLDivElement, HTMLAnchorElement, DocumentFragment etc – references to elements or document objects of a particular type referenced by your code.</p>
<p><strong> - "HTMLDivElement" -> Dishevelment</strong></p>
<p><strong> - "HTMLAnchorElement" -> Enfranchisement</strong></p>
<p><strong> - "DocumentFragment" -> Document Fragment,Document-fragment,Documentation</strong></p>
<br/>
<p>Many of the other objects you may see were likely generated during the lifecycle of your code and can include event listeners as well as custom objects, like the controllers below:</p>
<p><strong> - "lifecycle" -> life cycle,life-cycle,Wycliffe,Felicle</strong></p>
<br/>
<p>Example 7: Eval is evil (almost always)</p>
<p><strong> - "Eval" -> Eva,Eal,Val,Elva,Evan,Oval,E val,Eva l,Veal,Vela,Evals,Vale,Evil</strong></p>
<br/>
<p>Memory Management Masterclass with Addy Osmani gives you a crash-course in debugging memory issues. The slides for the presentation are available as well as the example code.</p>
<p><strong> - "Osmani" -> Osman,Osman i,Tasmania</strong></p>
<br/>
<p>Effective memory management at GMail scale </p>
<p><strong> - "GMail" -> G Mail,Gail,Grail,GM ail,GM-ail,Mail,Email,Gm ail,Gm-ail</strong></p>
<br/>
<p>Effective memory management at GMail scale</p>
<p><strong> - "GMail" -> G Mail,Gail,Grail,GM ail,GM-ail,Mail,Email,Gm ail,Gm-ail</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/memory-analysis-101.html file...
<p>The heap is a network of interconnected objects. In the mathematical world, this structure is called a graph. A graph is constructed from nodes connected by means of edges. Both nodes and edges have labels: nodes (objects) are labelled using the name of the constructor function that was used to build them, edges are labelled using the names of properties.</p>
<p><strong> - "labelled" -> labeled,la belled,la-belled,label led,label-led,belled,belabored,blabbed,belated</strong></p>
<br/>
<p>The sequence of edges that needs to be traversed in order to reach one object from another, is called a path. Usually, we are only interested in simple paths, i.e. paths that do not go through the same node twice.</p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<br/>
<p>Dominators</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<br/>
<p>Dominator objects comprise a tree structure, because each object has exactly one dominator. A dominator of an object may lack direct references to an object it dominates, that is, the dominators tree is not a spanning tree of the graph.</p>
<p><strong> - "dominators" -> dominator,dominator's,nominators,dominator s,dominates,terminators,nominator,indoctrinators</strong></p>
<br/>
<p>Numbers can be presented either as immediate 31-bit integer values (they are called small integers, or SMIs for short), or as heap objects (called heap numbers). The latter are used for values that can't fit into the SMI form, e.g. doubles, or for cases when a value needs to be boxed, e.g. for setting properties on it.</p>
<p><strong> - "SMIs" -> Sm Is,S Mis,Sis,Mis,Semis,Miss,Isms,Skis,Sims,Sm's,Sm-is,Ism</strong></p>
<p><strong> - "SMI" -> MI,SEMI,MIS,ISM,SCI,SKI,AMI,S MI,SIM,SM,SI,SUI,SM I,SMITH</strong></p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>String content can be either stored in the VM heap, or externally in the renderer's memory. Content received from the Web (e.g. scripts sources) doesn't get copied onto the VM heap, instead, a wrapper object is created and used to access external storage.</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>When two strings are concatenated, their contents are initially stored separately, and are joined only logically, using an object called cons string. Joining of the cons string contents is performed only when it's needed, e.g. when a substring of a joined string needs to be constructed.</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Arrays are used extensively in the V8 VM for storing large amounts of data. Dictionaries (sets of key-value pairs) are backed up by arrays. Thus, arrays are the basic building block for JavaScript objects.  A typical JavaScript object posesses two arrays: one for storing named properties, another for storing numeric elements. In the case when the number of properties is very small, they can be stored internally in the JavaScript object itself.</p>
<p><strong> - "posesses" -> possesses,possessed,possess,poetesses,poornesses</strong></p>
<br/>
<p>Each native objects group is made up from objects that hold mutual references to each other. Consider for example a DOM subtree, where every node has a link to its parent and links to the next child and next sibling, thus forming a connected graph. Note that native objects are not represented in the JavaScript heap — that's why they have zero size. Instead, wrapper objects are created. Each wrapper object holds a reference to the corresponding native object, for redirecting commands to it. In its own turn, an object group holds wrapper objects. However, this doesn't create an uncollectable cycle, as GC is smart enough to release object groups whose wrappers are no longer referenced. But forgetting to release a single wrapper will hold the whole group and associated wrappers.</p>
<p><strong> - "uncollectable" -> noncollectable,uncorrectable,uncollected,uncontrollable</strong></p>
<br/>
Processing ../devtools-docs/docs/network.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>Each timestamp is in microseconds, following the High Resolution Time specification. This API is available in Chrome as the  method.</p>
<p><strong> - "timestamp" -> timestamps,time stamp,time-stamp,times tamp,times-tamp,timestamped,pastime</strong></p>
<br/>
<p>Response Time — Sorts by each request's response time.</p>
<p><strong> - "request's" -> requests,bequest's,re quest's,re-quest's,requesters,requester,request,reconquest's</strong></p>
<br/>
<p>To filter the Network table to only show certain types of resources, click one of the content types along the bottom of the panel: Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, and Other. In the following screenshot only CSS resources are shown. To view all content types, click the All filter button.</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<br/>
<p>Take note of the following behaviour:</p>
<p><strong> - "behaviour" -> behavior</strong></p>
<br/>
<p>The filter type gives you autocomplete suggestions. Use the arrows keys to form a selection and press Tab to select it.</p>
<p><strong> - "autocomplete" -> auto complete,auto-complete,complete</strong></p>
<br/>
<p>The filter value has autocomplete which shows you values present in the current network recording.</p>
<p><strong> - "autocomplete" -> auto complete,auto-complete,complete</strong></p>
<br/>
<p>Quickly preview the results of your query, use the Up / Down arrow keys to cycle through the autocomplete suggestions. The results appear immediately even you do not press enter or tab to complete the selection.</p>
<p><strong> - "autocomplete" -> auto complete,auto-complete,complete</strong></p>
<br/>
<p>To negate a filter query, prepend the query with a dash (), for example .</p>
<p><strong> - "prepend" -> perpend,prepends,pretend,prep end,prep-end,prepender,reprehend,prepped,depend</strong></p>
<br/>
<p>   Domain   The domain portion from the URL of the resource. E.g. .   HasResponseHeader   Checks the resource has a response header, regardless of the value. E.g. .   Is   Shows requests running at the current point in time. Current available value:    Method   The HTTP method used. E.g. .   MimeType   Also known as  - the identifier for the type of resource. E.g. .   Scheme   The scheme portion in a URL. E.g. .   SetCookieName   The name of the cookie as set by the server. E.g.  (assuming a cookie like ).   SetCookieValue   The value of the cookie set by the server. E.g.  (assuming a cookie like ).   StatusCode   The status code in the HTTP response. E.g. . </p>
<p><strong> - "E.g" -> Eng,Erg,Egg,EEG</strong></p>
<p><strong> - "HasResponseHeader" -> Hardheadedness</strong></p>
<p><strong> - "MimeType" -> Mime Type,Mime-type,Mistype</strong></p>
<p><strong> - "SetCookieName" -> </strong></p>
<p><strong> - "SetCookieValue" -> Evaluational</strong></p>
<p><strong> - "StatusCode" -> Status Code,Status-code,Statuesque</strong></p>
<br/>
<p>To use a query shown in the above list, construct it in the format of: . You will almost always want to use the autocomplete suggestions which ensures your query is valid.</p>
<p><strong> - "autocomplete" -> auto complete,auto-complete,complete</strong></p>
<br/>
<p>You can change the default set of columns displayed by the Network table. To show or hide a column, Right+click or Control+click (Mac only) in the table header and select or deselect column names from the list.</p>
<p><strong> - "Right+click" -> Nightstick</strong></p>
<p><strong> - "Control+click" -> Controlling</strong></p>
<p><strong> - "deselect" -> reselect,deselected,selected,selectness,selects</strong></p>
<br/>
<p>In the following screenshot, the Network table is viewed with small resource rows and just the Timeline column.</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<br/>
<p>The waterfall view in the Network panel graphs the time it took to load each resource, from the start of the HTTP request to the receipt of the final byte of the response. Each resource loading time is represented as a bar, color-coded according to the resource type. The length of the lighter-shaded part of each bar represents the request's latency, while the length of the darker-shaded part represents the time spent receiving the response data.</p>
<p><strong> - "request's" -> requests,bequest's,re quest's,re-quest's,requesters,requester,request,reconquest's</strong></p>
<br/>
<p>When you hover your mouse over a row (but not over an actual bar) the request's latency and receipt time are displayed above the corresponding bar's light- and dark-shaded areas, respectively, as shown below.</p>
<p><strong> - "request's" -> requests,bequest's,re quest's,re-quest's,requesters,requester,request,reconquest's</strong></p>
<br/>
<p>If you hover your mouse over the bar itself, the complete timing data for the resource is presented in a tooltip. This is the same information that's presented in the Timing details tab for a given resource.</p>
<p><strong> - "tooltip" -> tool tip,tool-tip,toolkit</strong></p>
<br/>
<p>Right-clicking or Ctrl + Click (Mac only) within the Network table a context menu appears with several actions. Some of these actions apply to the resource row under the mouse click (like copying HTTP request headers), while others apply to the entire network recording (such as saving a Network recording as a HAR file).</p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<br/>
<p>Copy as cURL — Copies the network request as a cURL command string to the system clipboard. See Copying requests as cURL commands.</p>
<p><strong> - "cURL" -> curl,URL,c URL,cur,curls,churl,curly,cure,curs,curt,cull,curd,purl,hurl,curb</strong></p>
<br/>
<p>Replay XHR — If the associated request is an XMLHTTPRequest, re-sends the original XHR.</p>
<p><strong> - "XMLHTTPRequest" -> Frequentest</strong></p>
<br/>
<p>Copying requests as cURL commands</p>
<p><strong> - "cURL" -> curl,URL,c URL,cur,curls,churl,curly,cure,curs,curt,cull,curd,purl,hurl,curb</strong></p>
<br/>
<p>cURL is a command line tool for making HTTP transactions. The Network panel's Copy as cURL command recreates an HTTP request (including HTTP headers, SSL certificates, and query string parameters) and copies it as a cURL command string to the clipboard. You can then paste the string into a terminal window (on a system with cURL) to execute the same request.</p>
<p><strong> - "cURL" -> curl,URL,c URL,cur,curls,churl,curly,cure,curs,curt,cull,curd,purl,hurl,curb</strong></p>
<p><strong> - "SSL" -> ISL,SOL,SSH,SAL,SLY</strong></p>
<br/>
<p>Below is an example cURL command line string taken from a XHR request on the Google News home page.</p>
<p><strong> - "cURL" -> curl,URL,c URL,cur,curls,churl,curly,cure,curs,curt,cull,curd,purl,hurl,curb</strong></p>
<br/>
<p>You can save the data from a network recording as a HAR (HTTP Archive) file, or copy the records as a HAR data structure to your clipboard. A HAR file contains a JSON data structure that describes the network "waterfall". Several third-party tools can reconstruct the network waterfall from the data in the HAR file.</p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<br/>
<p>Right+click or Control+click on the Network table.</p>
<p><strong> - "Right+click" -> Nightstick</strong></p>
<p><strong> - "Control+click" -> Controlling</strong></p>
<br/>
<p>In the context menu that appears, choose one of the following actions: Copy All as HAR — Copies the network recording to the system clipboard in the HAR format. Save as HAR with Content — Saves all network data to a HAR file along with each page resource. Binary resources, including images, are encoded as Base64-encoded text. </p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<p><strong> - "Base64-encoded" -> Base-encoded,Encoded</strong></p>
<br/>
<p>Copy All as HAR — Copies the network recording to the system clipboard in the HAR format.</p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<br/>
<p>Save as HAR with Content — Saves all network data to a HAR file along with each page resource. Binary resources, including images, are encoded as Base64-encoded text.</p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<p><strong> - "Base64-encoded" -> Base-encoded,Encoded</strong></p>
<br/>
<p>For more information, Web Performance Power Tool: HTTP Archive (HAR).</p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<br/>
<p>The Response tab contains the resource's unformatted content. Below is a screenshot of a JSON data structure that was returned as the response for a request.</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<br/>
<p>The message payload. If the message is plain text, it's displayed here. For binary opcodes, this field displays the opcode's name and code. The following opcodes are supported:        Continuation Frame     Binary Frame     Connection Close Frame     Ping Frame     Pong Frame    </p>
<p><strong> - "Pong" -> Song,Tong,Long,Dong,Gong,Hong,Bong,Cong,Yong,Kong,Wong,Ping,Prong,Pone</strong></p>
<br/>
<p>     Continuation Frame     Binary Frame     Connection Close Frame     Ping Frame     Pong Frame   </p>
<p><strong> - "Pong" -> Song,Tong,Long,Dong,Gong,Hong,Bong,Cong,Yong,Kong,Wong,Ping,Prong,Pone</strong></p>
<br/>
<p>   Stalled/Blocking        Time the request spent waiting before it could be sent.     This time is inclusive of any time spent in proxy negotiation.     Additionally, this time will include when the browser is waiting for an already established connection to become available for re-use, obeying Chrome's maximum six TCP connection per origin rule.      Proxy Negotiation   Time spent negotiating with a proxy server connection.   DNS Lookup        Time spent performing the DNS lookup.     Every new domain on a page requires a full roundtrip to do the DNS lookup.      Initial Connection / Connecting   Time it took to establish a connection, including TCP handshakes/retries and negotiating a SSL.   SSL   Time spent completing a SSL handshake.   Request Sent / Sending        Time spent issuing the network request.     Typically a fraction of a millisecond.      Waiting (TTFB)        Time spent waiting for the initial response, also known as the Time To First Byte.     This time captures the latency of a round trip to the server in addition to the time spent waiting for the server to deliver the response.      Content Download / Downloading   Time spent receiving the response data. </p>
<p><strong> - "DNS" -> DENS,DINS,DONS,DUNS,ENS,DIS,INS,ANS,DOS,ONS,D'S,DANS,DES</strong></p>
<p><strong> - "roundtrip" -> round trip,round-trip,roundup</strong></p>
<p><strong> - "SSL" -> ISL,SOL,SSH,SAL,SLY</strong></p>
<p><strong> - "TTFB" -> TTY</strong></p>
<br/>
<p>Use PageSpeed Insights to identify performance best practices that can be applied to your site, and PageSpeed optimization tools to automate the process of applying those best practices.</p>
<p><strong> - "PageSpeed" -> Page Speed,Page-speed,Pages peed,Pages-peed,Passaged</strong></p>
<br/>
<p>How gzip compression works provides a high level overview gzip compression and why it's a good idea.</p>
<p><strong> - "gzip" -> zip,grip,g zip</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/profiles.html file...
Processing ../devtools-docs/docs/remote-debugging-legacy.html file...
<p>The  Android Developer Tools (ADT) bundle  provides you with the Android SDK out of the box. Once you've downloaded the ADT, unzip it to a directory on your system (e.g "Downloads").</p>
<p><strong> - "ADT" -> AFT,AD,AT,ADVT,TAD,ADS,ANT,ART,ADO,ALT,ACT,ADD,AMT,APT,ADV</strong></p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>You will initially see two sub-directories in the extracted folder - eclipse and sdk. To communicate with an Android device, you use the Android Debug Bridge (adb), a command-line tool included in Platform Tools ().</p>
<p><strong> - "sdk" -> SDK</strong></p>
<p><strong> - "adb" -> ADB,dab,adv,ad,ab,db,bad,ads,ado,alb,add,adz,a db,ad b</strong></p>
<br/>
<p>On your development machine, open Chrome and navigate to localhost:9222.</p>
<p><strong> - "localhost:9222" -> localhost</strong></p>
<br/>
Processing ../devtools-docs/docs/remote-debugging.html file...
<p>On your desktop Chrome browser, navigate to chrome://inspect. Confirm that Discover USB devices is checked:</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>Tip: You can also get to chrome://inspect by selecting Chrome menu > More tools > Inspect Devices.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>Viewing connected devices from the chrome://inspect page.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>If you have problems finding your device on the chrome://inspect page, see the Troubleshooting section.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>From the chrome://inspect page, you can launch DevTools and debug your remote browser tabs.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>Use F5 (or Cmd+r on Mac) to reload a remote page from the DevTools window.</p>
<p><strong> - "Cmd+r" -> Cmd</strong></p>
<br/>
<p>WebView debugging must be enabled from within your application. To enable WebView debugging, call the static method setWebContentsDebuggingEnabled on the WebView class.</p>
<p><strong> - "setWebContentsDebuggingEnabled" -> </strong></p>
<br/>
<p>The chrome://inspect page displays a list of debug-enabled WebViews on your device.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>Tips: To simulate a pinch gesture, hold Shift while dragging. To scroll, use your trackpad or mouse wheel or fling with your pointer.</p>
<p><strong> - "trackpad" -> track pad,track-pad,tracked</strong></p>
<br/>
<p>Open chrome://inspect on your development machine.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>The port status indicators on chrome://inspect are green when port forwarding is successful.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>For example, suppose you're using a third party JavaScript SDK that only works on whitelisted domains. So you added an entry, such as , to your hosts file. Or maybe you configured a customized domain using virtual hosts on your web server (MAMP).</p>
<p><strong> - "whitelisted" -> white listed,white-listed,whisted,whistled</strong></p>
<br/>
<p>In a Chrome browser, navigate to chrome://inspect.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>I can't see my device on the chrome://inspect page.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>On your desktop browser, navigate to chrome://inspect and verify that Discover USB devices is checked.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>I can't see my browser tabs on the chrome://inspect page.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>On your device, open the Chrome browser and navigate to the web page you want to debug. Then, refresh the chrome://inspect page.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>I can't see my WebViews on the chrome://inspect page.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>On your device, open the app with the WebView you want to debug. Then, refresh the chrome://inspect page.</p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>Note: The direct USB connection between Chrome and the device might interrupt your  connection. Before establishing your  connection, uncheck Discover USB devices on chrome://inspect. Then, disconnect and reconnect the device.</p>
<p><strong> - "uncheck" -> unchecked,check</strong></p>
<p><strong> - "chrome:" -> chrome,chromes,chromed,chromosome</strong></p>
<br/>
<p>For information about the remote debugging interaction protocol, refer to the Debugger Protocol documentation and chrome.debugger.</p>
<p><strong> - "chrome.debugger" -> Mercurochrome</strong></p>
<br/>
Processing ../devtools-docs/docs/rendering-settings.html file...
<p>     When this is enabled you be able to see the regions where Chrome paints. This can help diagnose and ultimately avoid unnecessary paints on a page. You can also use this to study painting behaviors just by hovering over links, popups, or some content which dynamically updates.   </p>
<p><strong> - "popups" -> pop ups,pop-ups,pops</strong></p>
<br/>
<p>Enabling Show paint rectangles and Show layer borders together can also be useful for finding any unnecessary paints which occur and cause a relayout on the Timeline panel.</p>
<p><strong> - "relayout" -> re layout,re-layout,relay out,relay-out,layout</strong></p>
<br/>
<p>Shows area of the page that slow down scrolling. Touch and mousewheel event listeners can delay scrolling. Some areas need to repaint their content when scrolled. Additional details on causes in this ticket.</p>
<p><strong> - "mousewheel" -> mouse wheel,mouse-wheel,wheelhouse</strong></p>
<br/>
Processing ../devtools-docs/docs/resource-panel.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>The Resources panel lets you inspect your application's local data sources, including IndexedDB or Web SQL databases, local and session storage, cookies, and Application Cache resources. You can also quickly inspect your application's visual resources, including images, fonts and and style sheets.</p>
<p><strong> - "IndexedDB" -> Indexed Db,Indexed DB,Indexed-DB,Indexed-db,Indexer</strong></p>
<br/>
<p>The Resources panel reveals your application's local data stores, including IndexedDB and WebSQL databases, local and session storage, cookies and Application Cache resources. </p>
<p><strong> - "IndexedDB" -> Indexed Db,Indexed DB,Indexed-DB,Indexed-db,Indexer</strong></p>
<p><strong> - "WebSQL" -> Web SQL,Web-SQL,Website</strong></p>
<br/>
<p>IndexedDB</p>
<p><strong> - "IndexedDB" -> Indexed Db,Indexed DB,Indexed-DB,Indexed-db,Indexer</strong></p>
<br/>
<p>You can inspect IndexedDB databases and object stores, page through an object store's records, and clear an object store of its records.</p>
<p><strong> - "IndexedDB" -> Indexed Db,Indexed DB,Indexed-DB,Indexed-db,Indexer</strong></p>
<br/>
<p>To view a list of available database, expand the IndexedDB category.</p>
<p><strong> - "IndexedDB" -> Indexed Db,Indexed DB,Indexed-DB,Indexed-db,Indexer</strong></p>
<br/>
<p>Right+click (or Ctrl+click) a cookie in the table from the target domain.</p>
<p><strong> - "Right+click" -> Nightstick</strong></p>
<p><strong> - "Ctrl+click" -> Clicker</strong></p>
<br/>
<p>From the context menu, seect Clear All from domain, where  domain is the target domain. </p>
<p><strong> - "seect" -> sect,select,see ct,see-ct</strong></p>
<br/>
<p>You can examine resources that Chrome has cached according to the Application Cache manifest file specified by the current document. You can view the current status of the Application Cache (idle or downloading, for  example), and the browser's connection status (online or offline).  </p>
<p><strong> - "online" -> inline,on line,on-line,line</strong></p>
<p><strong> - "offline" -> off line,off-line,lifeline</strong></p>
<br/>
<p>Type — The type of cached resource, which can have one of the following  values: Master — The resource was added to the cache because it's  manifest  attribute indicated that this was its cache. Explicit — The resource was explicitly listed in the application's  cache manifest file. Network — The resources was listed in the application's cache manifest  file as a network entry.  Fallback — The resource was specified as a fallback if a resource is inaccessible. </p>
<p><strong> - "Fallback" -> Callback,Fullback,Fall back,Fall-back,Blackball</strong></p>
<p><strong> - "fallback" -> callback,fullback,fall back,fall-back,blackball</strong></p>
<br/>
<p>Fallback — The resource was specified as a fallback if a resource is inaccessible.</p>
<p><strong> - "Fallback" -> Callback,Fullback,Fall back,Fall-back,Blackball</strong></p>
<p><strong> - "fallback" -> callback,fullback,fall back,fall-back,blackball</strong></p>
<br/>
<p>UPDATEREADY </p>
<p><strong> - "UPDATEREADY" -> UPDATE READY,UPDATE-READY,UPDATER</strong></p>
<br/>
<p>You can view and edit local and session storage key/value pairs you've created using the Web Storage APIs. You can edit, delete, and create both local and session storage data.</p>
<p><strong> - "APIs" -> A Pis,API,API s,Pis,Apsis,Apish,Apes,Apps,Apia,Alis,Avis,Pisa</strong></p>
<br/>
<p> {{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/resources.html file...
<p>Open the Google Closure Hovercard demo page.</p>
<p><strong> - "Hovercard" -> Hover card,Hover-card,Overheard,Hardcover</strong></p>
<br/>
<p>Click the hovercard.html resource in the sidebar.      This lets you see the resource loaded for the page.</p>
<p><strong> - "hovercard.html" -> hovercraft</strong></p>
<br/>
<p>You can directly access individual resources from within the Developer   Tools. Drag-and-drop demo.css from the sidebar into a   Chrome window.</p>
<p><strong> - "demo.css" -> demotics</strong></p>
<br/>
<p>Using Google Chrome, open the Webkit demo of HTML storage.</p>
<p><strong> - "Webkit" -> WebKit,Web kit,Web-kit</strong></p>
<br/>
<p>Click the triangle to the left of the NoteTest database to show the tables in the database.   This   shows there is a single table, WebKitStickyNotes, in the   NoteTest database. </p>
<p><strong> - "NoteTest" -> Note Test,Note-test,Notedness</strong></p>
<p><strong> - "WebKitStickyNotes" -> </strong></p>
<br/>
<p>To see the table's contents, click the table in the sidebar. You can also run a SQL query at the chevron prompt in the main window. Type select * from WebKitStickyNotes. The input in this console has auto-completion and tab-completion for common SQL words and phrases along with table names for the database.   The   note column is empty if you have not entered any text in   the sticky note on the demo page. </p>
<p><strong> - "WebKitStickyNotes" -> </strong></p>
<br/>
<p>Return to the Webkit demo page and type some text in the sticky note - you can also add another note if you like. Return to the Developer Tools window and double click the WebKitStickyNotes table in the sidebar.    </p>
<p><strong> - "Webkit" -> WebKit,Web kit,Web-kit</strong></p>
<p><strong> - "WebKitStickyNotes" -> </strong></p>
<br/>
<p>Select the webkit.org cookie in the sidebar.      Cookies view allows you browsing cookies associated with the selected domain,   as well as deleting them. </p>
<p><strong> - "webkit.org" -> WebKit</strong></p>
<br/>
Processing ../devtools-docs/docs/sample-extensions.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>AngularJS Batarang</p>
<p><strong> - "AngularJS" -> Angular</strong></p>
<p><strong> - "Batarang" -> Bataan</strong></p>
<br/>
<p>AngularJS Batarang is a swiss-army knife for the AngularJS framework,  providing panels for inspecting models, analysing dependencies, and  instrumenting performance, among other things. </p>
<p><strong> - "AngularJS" -> Angular</strong></p>
<p><strong> - "Batarang" -> Bataan</strong></p>
<p><strong> - "analysing" -> analyzing,analysis,signaling</strong></p>
<br/>
<p>The  README on GitHub provides a good overview.</p>
<p><strong> - "README" -> REAMED,REMADE,READ ME,READ-ME,READE,REREAD,READ</strong></p>
<br/>
<p>The Ember Inspector helps you debug Ember.js  applications, with easy inspection of controllers, insights into models and  their attributes, layers, and more.</p>
<p><strong> - "Ember.js" -> Embers</strong></p>
<br/>
<p>For more information, see the Ember Inspector  screencasts from  Yehuda Katz. </p>
<p><strong> - "screencasts" -> screencast,screen casts,screen-casts,screencast s,screenwriters</strong></p>
<p><strong> - "Yehuda" -> Yehudi</strong></p>
<br/>
<p>For more information, see the Ember Inspector  screencasts from  Yehuda Katz.</p>
<p><strong> - "screencasts" -> screencast,screen casts,screen-casts,screencast s,screenwriters</strong></p>
<p><strong> - "Yehuda" -> Yehudi</strong></p>
<br/>
<p>KnockoutJS Context Debugger</p>
<p><strong> - "KnockoutJS" -> Knockouts,Knockout's,Knockout</strong></p>
<br/>
<p>This extension helps you debug your KnockoutJS application by showing the  Knockout context data for the selected DOM node in a sidebar of the elements  panel. </p>
<p><strong> - "KnockoutJS" -> Knockouts,Knockout's,Knockout</strong></p>
<br/>
<p>Rails Panel adds a new tab that shows information about requests to the Rails  backend. The panel provides insights into view rendering, DB, total request  times and more. </p>
<p><strong> - "backend" -> backed,back end,back-end,backhand</strong></p>
<br/>
<p>See the README file for  information on setting up and using Rails Panel.</p>
<p><strong> - "README" -> REAMED,REMADE,READ ME,READ-ME,READE,REREAD,READ</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/settings.html file...
<p>Shadow DOM Polyfill</p>
<p><strong> - "Polyfill" -> Polyvinyl</strong></p>
<br/>
<p>Enable JS source maps</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>Log XMLHttpRequests</p>
<p><strong> - "XMLHttpRequests" -> Equestriennes</strong></p>
<br/>
<p>To use this feature it open the Workspaces tab via the Settings pane. Here you will see an Add Folder link allowing you to add local directories for editing (eg: project root directories).</p>
<p><strong> - "eg" -> eh,e,g,neg,erg,reg,ego,leg,deg,egg,peg,beg,veg,keg,Reg</strong></p>
<br/>
<p>In addition to adding a file system for your Workspace, you are also able to add file Mappings individual file urls to the path of the file on your local machine.</p>
<p><strong> - "urls" -> curls,purls,hurls,burls,furls,urns</strong></p>
<br/>
Processing ../devtools-docs/docs/shortcuts.html file...
<p> F12, Ctrl + Shift + I </p>
<p><strong> - "F12" -> F2,F11</strong></p>
<br/>
<p> Inspect the Inspector (undock first one and press) </p>
<p><strong> - "undock" -> unlock,undo ck,undo-ck,undo</strong></p>
<br/>
<p> To open up the General Settings dialog type ? or F1 when the Developer Tools window is open. Press Esc to close the settings dialog.</p>
<p><strong> - "F1" -> F,1,Fe,Fr,Fm,FL,FD,FM,FY,Fa,Ft,Fl,Ff</strong></p>
<br/>
<p> ?, F1 </p>
<p><strong> - "F1" -> F,1,Fe,Fr,Fm,FL,FD,FM,FY,Fa,Ft,Fl,Ff</strong></p>
<br/>
<p> Open Device Mode (v38+)                     </p>
<p><strong> - "v38" -> V8</strong></p>
<br/>
<p> Force element psuedo states: (, , , ) </p>
<p><strong> - "psuedo" -> pseudo</strong></p>
<br/>
<p> PgUp, PgDown </p>
<p><strong> - "PgUp" -> Pg Up,Pup,Pg-up,Guppy</strong></p>
<p><strong> - "PgDown" -> Pg Down,Pg-down,PageDown</strong></p>
<br/>
<p> PgUp, PgDown </p>
<p><strong> - "PgUp" -> Pg Up,Pup,Pg-up,Guppy</strong></p>
<p><strong> - "PgDown" -> Pg Down,Pg-down,PageDown</strong></p>
<br/>
<p> Shift + PgUp, Shift + PgDown </p>
<p><strong> - "PgUp" -> Pg Up,Pup,Pg-up,Guppy</strong></p>
<p><strong> - "PgDown" -> Pg Down,Pg-down,PageDown</strong></p>
<br/>
<p> Shift + PgUp, Shift + PgDown </p>
<p><strong> - "PgUp" -> Pg Up,Pup,Pg-up,Guppy</strong></p>
<p><strong> - "PgDown" -> Pg Down,Pg-down,PageDown</strong></p>
<br/>
<p> XMLHTTPRequest logging: Turn on to view the XHR log </p>
<p><strong> - "XMLHTTPRequest" -> Frequentest</strong></p>
<br/>
<p> Filter: Hide and unhide messages from script files </p>
<p><strong> - "unhide" -> unhidden</strong></p>
<br/>
<p> Alt + Scroll,Ctrl + Cick and drag with two fingers  </p>
<p><strong> - "Scroll,Ctrl" -> Scrollbar</strong></p>
<p><strong> - "Cick" -> Crick,Chick,Sick,Nick,Rick,Tick,Lick,Pick,Hick,Kick,Wick,Dick,Mick</strong></p>
<br/>
<p> Opt + Scroll, Cmd + Cick and drag with two fingers </p>
<p><strong> - "Cick" -> Crick,Chick,Sick,Nick,Rick,Tick,Lick,Pick,Hick,Kick,Wick,Dick,Mick</strong></p>
<br/>
<p> F6, Ctrl + L, Alt + D </p>
<p><strong> - "F6" -> F,6,Fe,Fr,Fm,FL,FD,FM,FY,Fa,Ft,Fl,Ff</strong></p>
<br/>
Processing ../devtools-docs/docs/timeline.md file...
<p>{{+bindTo:partials.standard_devtools_article}}</p>
<p><strong> - "bindTo:partials.standard_devtools_article" -> </strong></p>
<br/>
<p>The Timeline has three primary sections: an overview section at the top, a records view, and a toolbar.</p>
<p><strong> - "toolbar" -> tool bar,tool-bar,barstool</strong></p>
<br/>
<p>When you hover over a Timeline record, a pop-up appears with details about the associated event. For example, the screenshot below shows details for a Finish Loading record associated with an image resource. The Timeline event reference explains the details available for each record type.</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<br/>
<p>Frames mode provides insight into the rendering performance of your application. A "frame" represents the work the browser must do to render a single frame of content to the display—run JavaScript, handle events, update the DOM and change styles, layout and paint the page. The goal is for your app to run at 60 frames per second (FPS), which corresponds to the 60Hz refresh rate of most (but not all) video displays. Consequently, your application has approximately 16.6 ms (1000 ms / 60) to prepare for each frame.</p>
<p><strong> - "display—run" -> displayed</strong></p>
<p><strong> - "60Hz" -> </strong></p>
<br/>
<p>The frames in the recording below show both un-instrumented activity and idle time.</p>
<p><strong> - "un-instrumented" -> UN-instrumented,nu-instrumented,in-instrumented,um-instrumented,u-instrumented,n-instrumented,sun-instrumented,nun-instrumented,urn-instrumented,run-instrumented,tun-instrumented,dun-instrumented,gun-instrumented,mun-instrumented,pun-instrumented</strong></p>
<br/>
<p>Want more details on the empty white space within the bars? Read Chrome Engineer Nat Duca's explanation, which describes how you can evaluate if you were bottlnecked by the GPU. </p>
<p><strong> - "Duca's" -> Luca's,Ducat's,Duce's,Ducats,Duct's,Duck's</strong></p>
<p><strong> - "bottlnecked" -> bottlenecked,bottleneck</strong></p>
<br/>
<p>Press the keyboard shortcut Ctrl+E, or Cmd+E on Mac.         </p>
<p><strong> - "Ctrl+E" -> Ctrl</strong></p>
<p><strong> - "Cmd+E" -> Cmd</strong></p>
<br/>
<p>Open the Timeline and press Cmd+E (Mac) or Ctrl+E (Windows/Linux) to start recording.</p>
<p><strong> - "Cmd+E" -> Cmd</strong></p>
<p><strong> - "Ctrl+E" -> Ctrl</strong></p>
<br/>
<p>Quickly press Cmd+R or Ctrl+R to reload the browser page.</p>
<p><strong> - "Cmd+R" -> Cmd</strong></p>
<p><strong> - "Ctrl+R" -> Ctrl</strong></p>
<br/>
<p>DOMContentLoaded and Load event markers</p>
<p><strong> - "DOMContentLoaded" -> Malcontentedness</strong></p>
<br/>
<p>The Timeline annotates each recording with a blue and a red line that indicate, respectively, when the DOMContentLoaded and load events were dispatched by the browser. The DOMContentLoaded event is fired when all of the page's DOM content has been loaded and parsed. The load event is fired once all of the document's resources (images and CSS files, and so forth) have been fully loaded.</p>
<p><strong> - "DOMContentLoaded" -> Malcontentedness</strong></p>
<br/>
<p>The following screenshot shows an example of nested synchronous events. In this case, Chrome was parsing some HTML (the Parse HTML event) when it found several external resources that needed to be loaded. Those requests were made before Chrome has finished the parsing, so the Send Request events are displayed as children of the Parse HTML event.</p>
<p><strong> - "screenshot" -> screen shot,screen-shot,screens hot,screens-hot,screencast</strong></p>
<br/>
<p>Used JS Heap size at this point in the recording, and what this operation's effect was to the heap size.</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>While looking at all the events, you may want to hunt for one, but maintain context of what's around it. In this case, you can find without filtering. Press Ctrl+F (Window/Linux) or Cmd+F (Mac), while the Timeline has focus to show those that contain the search term.</p>
<p><strong> - "Ctrl+F" -> Ctrl</strong></p>
<p><strong> - "Cmd+F" -> Cmd</strong></p>
<br/>
<p>Trackpad users: Swiping left or right with two fingers moves the current Timeline selection. Swiping up or down with two fingers expands or contracts the current Timeline selection, respectively. </p>
<p><strong> - "Trackpad" -> Track pad,Track-pad,Tracked</strong></p>
<br/>
<p>Trackpad users:</p>
<p><strong> - "Trackpad" -> Track pad,Track-pad,Tracked</strong></p>
<br/>
<p>Right+click or Ctrl+click (Mac only) inside the Timeline and select Save Timeline Data…, or press the Ctrl+S keyboard shorcut.</p>
<p><strong> - "Right+click" -> Nightstick</strong></p>
<p><strong> - "Ctrl+click" -> Clicker</strong></p>
<p><strong> - "Ctrl+S" -> Ctrl</strong></p>
<p><strong> - "shorcut" -> shortcut,shortcrust</strong></p>
<br/>
<p>Right-click or Ctrl+click inside the Timeline and select Load Timeline Data..., or press the Ctrl+O keyboard shortcut.</p>
<p><strong> - "Ctrl+click" -> Clicker</strong></p>
<p><strong> - "Ctrl+O" -> Ctrl</strong></p>
<br/>
<p>Applications can add their own events to Timeline recordings. You can use the console.timeStamp() method to add an atomic event to a recording, or the console.time() and console.timeEnd() methods to mark a range of time that code was executing. For example, in the following recording the  was used to display an "Adding result" event. See Marking the Timeline in Using the Console for more information.</p>
<p><strong> - "console.timeStamp" -> Constantinople</strong></p>
<p><strong> - "console.time" -> consolation</strong></p>
<p><strong> - "console.timeEnd" -> consolidation</strong></p>
<br/>
<p>You will see ight gray bars appearing above the Timeline records, indicating when the CPU was busy. Hovering over a CPU bar highlights the Timeline region during which the CPU was active (as shown below). The length of a CPU bar is typically the sum of all the (highlighted) events below it in the Timeline. If these don't match, it may be due to one of the following:</p>
<p><strong> - "ight" -> it,eight,sight,night,right,tight,light,might,hight,bight,fight,wight,Right</strong></p>
<br/>
<p>Un-instrumented activity.</p>
<p><strong> - "Un-instrumented" -> UN-instrumented,U-instrumented,N-instrumented,Una-instrumented,En-instrumented,In-instrumented,An-instrumented,Ur-instrumented,Tn-instrumented,On-instrumented,Kn-instrumented,US-instrumented,Sn-instrumented,UI-instrumented,Instrumented</strong></p>
<br/>
<p>Duration (at time-stamp) :   How long it took the event with all of its children to complete; timestamp is the time at which the event occurred, relative to when the recording started.</p>
<p><strong> - "timestamp" -> timestamps,time stamp,time-stamp,times tamp,times-tamp,timestamped,pastime</strong></p>
<br/>
<p>DOMContentLoaded</p>
<p><strong> - "DOMContentLoaded" -> Malcontentedness</strong></p>
<br/>
<p>The DOMContentLoaded was fired by the browser. This event is fired when all of the page's DOM content has been loaded and parsed.</p>
<p><strong> - "DOMContentLoaded" -> Malcontentedness</strong></p>
<br/>
<p>A JavaScript event ("mousedown", or "key", for example).</p>
<p><strong> - "mousedown" -> mouse down,mouse-down,moused own,moused-own,dormouse</strong></p>
<br/>
<p>A top-level JavaScirpt function call was made (only appears when browser enters JavaScript engine).</p>
<p><strong> - "JavaScirpt" -> JavaScript,Javanese</strong></p>
<br/>
<p>A timer was created with setInterval() or setTimeout().</p>
<p><strong> - "setInterval" -> set Interval,set-interval,subinterval,interval,interstitial</strong></p>
<p><strong> - "setTimeout" -> set Timeout,set-timeout,timeout</strong></p>
<br/>
<p>A requestAnimationFrame() call scheduled a new frame</p>
<p><strong> - "requestAnimationFrame" -> metropolitanization</strong></p>
<br/>
<p>A script called console.time())</p>
<p><strong> - "console.time" -> consolation</strong></p>
<br/>
<p>A script called console.timeEnd()</p>
<p><strong> - "console.timeEnd" -> consolidation</strong></p>
<br/>
<p>A timer fired that was scheduled with setInterval() or setTimeout().</p>
<p><strong> - "setInterval" -> set Interval,set-interval,subinterval,interval,interstitial</strong></p>
<p><strong> - "setTimeout" -> set Timeout,set-timeout,timeout</strong></p>
<br/>
<p>The ready state of an XMLHTTPRequest changed.</p>
<p><strong> - "XMLHTTPRequest" -> Frequentest</strong></p>
<br/>
<p>An XMLHTTPRequest finished loading.</p>
<p><strong> - "XMLHTTPRequest" -> Frequentest</strong></p>
<br/>
<p>Nodes that need layout :   For Layout records, the number of nodes that were marked as needing layout before the relayout started. These are normally those nodes that were invalidated by developer code, plus a path upward to relayout root.</p>
<p><strong> - "relayout" -> re layout,re-layout,relay out,relay-out,layout</strong></p>
<br/>
<p>Layout tree size :   For Layout records, the total number of nodes under the relayout root (the node that Chrome starts the relayout).</p>
<p><strong> - "relayout" -> re layout,re-layout,relay out,relay-out,layout</strong></p>
<br/>
<p>{{/partials.standard_devtools_article}}</p>
<p><strong> - "partials.standard_devtools_article" -> </strong></p>
<br/>
Processing ../devtools-docs/docs/tips-and-tricks.html file...
<p>When in the console's multi-line editing mode, you can treat blocks of text as if you were using a standard text editor. Shift + Enter allows you enter multi-line mode in the console.</p>
<p><strong> - "console's" -> consoles,consoler's,consolers,console,consolable,Constable's,consonance's</strong></p>
<br/>
<p>For a multi-line console which supports persistence, read about Snippets - a feature which can save and execute custom snippets of JavaScripts which are always available inside the DevTools.</p>
<p><strong> - "JavaScripts" -> Java Scripts,JavaScript,JavaScript s,Java-scripts,Transcripts</strong></p>
<br/>
<p>Support for the console.table command</p>
<p><strong> - "console.table" -> consolable,noncollectable,constable,Constable</strong></p>
<br/>
<p>There is also an optional 'columns' parameter which takes the form of an array of strings. Below, we define a family object containing many "Person"s and can then choose which columns we would like displayed using it:</p>
<p><strong> - "Person"s" -> Persons,Person's,Person,Peterson</strong></p>
<br/>
<p>More: Support for the console.table command has landed | G+.</p>
<p><strong> - "console.table" -> consolable,noncollectable,constable,Constable</strong></p>
<br/>
<p>Objects logged using console.log() can be previewed directly inside the DevTools without further work on your part.</p>
<p><strong> - "console.log" -> consolable</strong></p>
<br/>
<p>As we've documented you can add style to your console logs via , just like you can in Firebug. e.g</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>With the console open you can easily clear your console history using the Ctrl + L or Cmd + L  shortcut. A clear() command is also available at the shell prompt as is the console.clear() method via the Console API from JavaScript.</p>
<p><strong> - "console.clear" -> consolable</strong></p>
<br/>
<p>Select an element and type  in the console, it will be used by the script. If you have jQuery on the page, you can then use  to reselect the element in the page.</p>
<p><strong> - "jQuery" -> j Query,query,equerry</strong></p>
<br/>
<p>However, the function also accepts an optional second argument for the path context - i.e . This lets us select a specific context (e.g an iframe) and run an XPath query against it.</p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Using console.dir</p>
<p><strong> - "console.dir" -> consoler</strong></p>
<br/>
<p>The console.dir(object) command lists out all of the properties of a provided object as an expandable JavaScript object. Below is an example displaying an expandable object representing the properties found under document.body.</p>
<p><strong> - "console.dir(object" -> objectionableness</strong></p>
<p><strong> - "document.body" -> documentary</strong></p>
<br/>
<p>Running the JS console in a specific iframe</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>console.time() begins a new timer using a specific label. When console.timeEnd() is called using the same label the time is stopped and the elapsed time between both is logged to the console. This is particularly useful for benchmarking loops or code which doesn't call a function.</p>
<p><strong> - "console.time" -> consolation</strong></p>
<p><strong> - "console.timeEnd" -> consolidation</strong></p>
<br/>
<p>With the DevTools open, calling console.profile() begins a JavaScript CPU profile. A label for the profile can be optionally passed, as seen below in console.profile("Processing"). To complete a profile run, call console.profileEnd().</p>
<p><strong> - "console.profile" -> inconsolableness</strong></p>
<p><strong> - "console.profile("Processing" -> teleprocessing</strong></p>
<p><strong> - "console.profileEnd" -> inconsolableness</strong></p>
<br/>
<p>This record button will turn from gray to red and the Timeline will begin to capture the timelines for your page. Complete a few actions inside your app and after a few seconds, click the button again to stop recording.</p>
<p><strong> - "timelines" -> timeline,timeliness,time lines,time-lines,timeline s,timelessness,timberlines,timeless,smelliness</strong></p>
<br/>
<p>For example, say your first frame takes 15ms to execute and the next takes 30ms. A common situation is that frames are synchronized to refresh rate and in this case, the second frame took slightly longer than 15ms to render. Here, frame 3 missed the "true" hardware frame and was rendered upon the next frame, hence, the length of the second frame was effectively doubled.</p>
<p><strong> - "15ms" -> </strong></p>
<p><strong> - "30ms" -> </strong></p>
<br/>
<p>When we target 60fps, we have a max of 16.66ms to do everything. That's not a lot of time and so squeezing as much performance out of your animations as possible is important.</p>
<p><strong> - "60fps" -> fps</strong></p>
<p><strong> - "16.66ms" -> </strong></p>
<br/>
<p>You can view and share Timelines with other developers thanks to a useful import/export feature. Use Ctrl + E  or Cmd + E to start & stop recording then right-click inside the Timeline and use Save Timeline data. The same menu supports Load Timeline data for loading an exported file back in for viewing.</p>
<p><strong> - "Timelines" -> Timeline,Timeliness,Time lines,Time-lines,Timeline s,Timelessness,Timberlines,Timeless,Smelliness</strong></p>
<br/>
<p>Your code can add annotations to Timeline recordings using the console.timeStamp() method. This helps correlate code in your web app to other activity going on or browser events.</p>
<p><strong> - "console.timeStamp" -> Constantinople</strong></p>
<br/>
<p>Your application can add annotations to Timeline recordings by calling the console.timeStamp() method. This lets you easily correlate code in your application to other activity in your application or browser events. In the following recording, the Timeline is annotated with the string "Adding result". See Marking the Timeline in Using the Console for example code.</p>
<p><strong> - "console.timeStamp" -> Constantinople</strong></p>
<br/>
<p>A useful tool for visualizing frame rate and jank is the real-time FPS counter. This can be enabled in the DevTools by going to the Settings menu and checking “Show FPS meter”.</p>
<p><strong> - "jank" -> hank,sank,rank,tank,lank,jack,dank,junk,bank,yank,Hank,Bank,Yank,Janka</strong></p>
<br/>
<p>More: Profiling Long Paint Times with DevTools' Continuous Painting Mode | HTML5Rocks</p>
<p><strong> - "HTML5Rocks" -> Shamrocks</strong></p>
<br/>
<p>Keep in mind that just tracking the FPS counter may lead to you not noticing frames with intermittent jank. Be careful when using the content. It is also worth noting that FPS on desktop does not equal FPS on devices and special care should be taken to profile the performance there too.</p>
<p><strong> - "jank" -> hank,sank,rank,tank,lank,jack,dank,junk,bank,yank,Hank,Bank,Yank,Janka</strong></p>
<br/>
<p>Take a new heap snaphot</p>
<p><strong> - "snaphot" -> snapshot,snap hot,snap-hot</strong></p>
<br/>
<p>Take a new heap snaphot</p>
<p><strong> - "snaphot" -> snapshot,snap hot,snap-hot</strong></p>
<br/>
<p>More: BloatBusters - Eliminating Memory Leaks In GMail</p>
<p><strong> - "BloatBusters" -> Bloat Busters,Bloat-busters,Blockbusters,Blockbuster,Bloaters,Blusterers</strong></p>
<p><strong> - "GMail" -> G Mail,Gail,Grail,GM ail,GM-ail,Mail,Email,Gm ail,Gm-ail</strong></p>
<br/>
<p>Yellow nodes indicate a detached DOM node reference from an object's property or an array element - there should be a chain of properties leading from the DOM window to the element (e.g window.foo.bar[2].baz).</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<p><strong> - "window.foo.bar[2].baz" -> </strong></p>
<br/>
<p>Dominators view helps confirm that no unexpected references to objects are still hanging around (i.e that they are well contained) and that deletion/garbage collection is actually working.</p>
<p><strong> - "Dominators" -> Nominators,Dominator,Dominator's,Dominator s,Dominates,Terminators,Nominator,Indoctrinators</strong></p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<br/>
<p>Containment view provides a better view of object structure, helping us analyze objects referenced in the global namespace (i.e. window) to find out what is keeping them around. It lets you analyze closures and dive into your objects at a low level.</p>
<p><strong> - "namespace" -> name space,name-space,names pace,names-pace,spacemen</strong></p>
<p><strong> - "i.e" -> ire,ice,IE</strong></p>
<br/>
<p>More: Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome | AddyOsmani.com</p>
<p><strong> - "AddyOsmani.com" -> </strong></p>
<br/>
<p>Right-click an element and enable ‘Break on Subtree Modifications': whenever a script traverses that element childs and modifies them, the debugger rolls in automatically to let you inspect what's happening:</p>
<p><strong> - "childs" -> child,childes,child's,chills,child s</strong></p>
<br/>
<p>Conditional breakpoint actions with console.log</p>
<p><strong> - "console.log" -> consolable</strong></p>
<br/>
<p>You then right-click the line and "Edit Breakpoint" where you are presented with an expression field. Define your condition here (e.g if the expression evaluates as truthy execution will break here).</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<p><strong> - "truthy" -> truth,truths,truth y,Truth,Ruthy</strong></p>
<br/>
<p>A normal expression may be of the form , however console.log statements are also completely valid input in the field.</p>
<p><strong> - "console.log" -> consolable</strong></p>
<br/>
<p>This approach works well and we can easily see the console.log statements being fired in the console on breakpoints:</p>
<p><strong> - "console.log" -> consolable</strong></p>
<br/>
<p>As console.log doesn't have a real return value, undefined means the conditional breakpoint won't result in execution being paused and your code will continue to run. It's much like a hard-coded console.log statement without the need to modify your code directly.</p>
<p><strong> - "console.log" -> consolable</strong></p>
<br/>
<p>More: Breakpoint Actions In JavaScript | randomthink.net</p>
<p><strong> - "randomthink.net" -> randomization</strong></p>
<br/>
<p>Easily debug XHRs</p>
<p><strong> - "XHRs" -> X Hrs,XHR,XHR s,Hrs</strong></p>
<br/>
<p>You can write and execute JavaScript in this console as expected, but what's even better is if you're paused at a breakpoint, JS executed will be within the currently paused context.</p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>Watch Expressions (in the sidebar to the right) will keep an eye on expressions so you don't have to keep switching back to the console (e.g X === Y). Call Stack (under it) displays function calls the system has gone through to achieve where it is at present.</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>DOM Breakpoints display any "Break on" modifications taken by right-clicking on a node in the Elements panel. This is helpful for debugging whether listeners have been correctly attached to nodes and what occurs when they are invokved.</p>
<p><strong> - "invokved" -> involved,invoked,invoke</strong></p>
<br/>
<p>The XHR Breakpoints panel is also useful as it can setup a breakpoint for XMLHttpRequests. Specify a breakpoint by typing in a substring of the URL you wish to inspect.</p>
<p><strong> - "XMLHttpRequests" -> Equestriennes</strong></p>
<br/>
<p>Cmd + Opt + F (Max OSX)</p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>Cmd + Opt + F (Max OSX)</p>
<p><strong> - "OSX" -> OX,OS,OS X</strong></p>
<br/>
<p>When analyzing code generated for production, it is often minified (and in the case of a language that tranpiles to JavaScript, compiled) making it difficult to locate where the lines map to your originally authored code.</p>
<p><strong> - "tranpiles" -> transpires</strong></p>
<br/>
<p>Compile your CoffeeScript to JavaScript running: coffee -c myexample.coffee</p>
<p><strong> - "myexample.coffee" -> counterexample</strong></p>
<br/>
<p>Compile your CoffeeScript to JavaScript running: coffee -c myexample.coffee</p>
<p><strong> - "myexample.coffee" -> counterexample</strong></p>
<br/>
<p>Install CoffeeScript Redux</p>
<p><strong> - "Redux" -> Reduced</strong></p>
<br/>
<p>Install CoffeeScript Redux</p>
<p><strong> - "Redux" -> Reduced</strong></p>
<br/>
<p>Create a Source map file example.js.map which will hold the mapping information: </p>
<p><strong> - "example.js.map" -> exampled</strong></p>
<br/>
<p>Create a Source map file example.js.map which will hold the mapping information: </p>
<p><strong> - "example.js.map" -> exampled</strong></p>
<br/>
<p>Make sure the generated JavaScript file, example.js, has the source mapping url at the end as follows: </p>
<p><strong> - "example.js" -> examples</strong></p>
<p><strong> - "url" -> URL,curl,purl,hurl,burl,furl,Burl,urn,Erl</strong></p>
<br/>
<p>Make sure the generated JavaScript file, example.js, has the source mapping url at the end as follows: </p>
<p><strong> - "example.js" -> examples</strong></p>
<p><strong> - "url" -> URL,curl,purl,hurl,burl,furl,Burl,urn,Erl</strong></p>
<br/>
<p>You could then take this source map and during your optimization/minification phase use a tool like UglifyJS2 to reference this first source map (CS to JS) and have it map the minified JavaScript back to the CoffeeScript and not the compiled JavaScript output. This allows you to debug production code straight back to your source CoffeeScript code.</p>
<p><strong> - "minification" -> magnification,indemnification,mummification,ramification</strong></p>
<p><strong> - "UglifyJS2" -> Ugliness</strong></p>
<p><strong> - "JS" -> DIS,KS,J,S,J'S,ES,IS,AS,RS,TS,LS,CS,US,JG,GS</strong></p>
<br/>
<p>More: NetTuts - Source Maps 101</p>
<p><strong> - "NetTuts" -> Net Tuts,Net-tuts,Netts</strong></p>
<br/>
<p>   A place to learn how to optimize your development workflow to save time achieving common tasks, such as locating files or functions, persisting edits to scripts or stylesheets or simply rearranging the layout to better suit your needs.   Learning about new features such as Snippets which can be used to save and execute custom snippets of JavaScripts which are always available inside the DevTools.    </p>
<p><strong> - "JavaScripts" -> Java Scripts,JavaScript,JavaScript s,Java-scripts,Transcripts</strong></p>
<br/>
<p>Learning about new features such as Snippets which can be used to save and execute custom snippets of JavaScripts which are always available inside the DevTools.</p>
<p><strong> - "JavaScripts" -> Java Scripts,JavaScript,JavaScript s,Java-scripts,Transcripts</strong></p>
<br/>
<p>Autocompletion of CSS properties</p>
<p><strong> - "Autocompletion" -> Auto completion,Auto-completion,Complementation,Completion</strong></p>
<br/>
<p>The DevTools support autocompletion of known CSS properties and values (including those requiring a prefix), which is a useful way to determine which properties can be set for the current element.</p>
<p><strong> - "autocompletion" -> auto completion,auto-completion,complementation,completion</strong></p>
<br/>
<p>Colors can be defined within the Styles pane using named (e.g ‘red'), HSL, HEX or RGB values. You can shift/click to iterate through these if required.</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>The list of suggestions is context-specific and in certain cases (e.g font) numeric, named and prefixed values supported will also be displayed.</p>
<p><strong> - "e.g" -> erg,egg,EEG</strong></p>
<br/>
<p>Clicking anywhere within the opening and closing brackets for a CSS rule (including within "element.style"), allows you to add a new CSS property which will similarly be instantly applied.</p>
<p><strong> - "element.style" -> elementariness</strong></p>
<br/>
<p>Note: To use Sass debugging in Chrome you need to have version 3.3.0 (pre-release) of the Sass compiler, which is the only version that currently supports source map generation.</p>
<p><strong> - "pre-release" -> per-release,ore-release,pee-release,pr-release,re-release,pres-release,pare-release,pore-release,pure-release,prep-release,prey-release,pyre-release,pref-release,rep-release,ere-release</strong></p>
<br/>
<p>Working with a page containing pre-processed CSS can be a challenge as modifications made to your CSS styles within the DevTools typically won't apply them back to your Sass source files. This means if making changes to your styles on the fly, you would need to go back and manually apply them to your source files using an external editor if you wanted to maintain them.</p>
<p><strong> - "pre-processed" -> per-processed,ore-processed,pee-processed,pr-processed,re-processed,pres-processed,pare-processed,pore-processed,pure-processed,prep-processed,prey-processed,pyre-processed,pref-processed,rep-processed,ere-processed</strong></p>
<br/>
<p>Check to ensure you have Developer Tools experiments enabled in about:flags.</p>
<p><strong> - "about:flags" -> layabouts</strong></p>
<br/>
<p>Check to ensure you have Developer Tools experiments enabled in about:flags.</p>
<p><strong> - "about:flags" -> layabouts</strong></p>
<br/>
<p>If the setup worked as expected, you can go to the Elements panel. The first thing you'll notice is that the filename for your styles will now display the corresponding .scss source file as well as the line number reflecting the line number in your source. </p>
<p><strong> - "scss" -> SCSS,sass</strong></p>
<br/>
<p>If the setup worked as expected, you can go to the Elements panel. The first thing you'll notice is that the filename for your styles will now display the corresponding .scss source file as well as the line number reflecting the line number in your source.</p>
<p><strong> - "scss" -> SCSS,sass</strong></p>
<br/>
<p>   A place to learn how to view the real underlying structure of the page. For example, you may be curious if an image has an HTML id attribute, and what that attribute's value is.   Discovery how to see everything in one DOM tree, including inspection and on-the-fly editing of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page.    </p>
<p><strong> - "attribute's" -> attributes,attributer's,at tribute's,at-tribute's,attributer,attribute,attribution's,attributives</strong></p>
<br/>
<p>A place to learn how to view the real underlying structure of the page. For example, you may be curious if an image has an HTML id attribute, and what that attribute's value is.</p>
<p><strong> - "attribute's" -> attributes,attributer's,at tribute's,at-tribute's,attributer,attribute,attribution's,attributives</strong></p>
<br/>
<p>Replay XHRs</p>
<p><strong> - "XHRs" -> X Hrs,XHR,XHR s,Hrs</strong></p>
<br/>
<p>As you probably know, the Network panel shows a list of all the requests your page has made including XHRs. You can replay any XHR (POST or GET) by right-clicking on the request to display the context-menu then selecting “Replay XHR”.</p>
<p><strong> - "XHRs" -> X Hrs,XHR,XHR s,Hrs</strong></p>
<br/>
<p>Export request meta-data: right click, "Copy Entry as HAR"</p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<br/>
<p>Export request meta-data: right click, "Copy Entry as HAR"</p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<br/>
<p>Export entire waterfall: right click, "Copy All as HAR"</p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<br/>
<p>Export entire waterfall: right click, "Copy All as HAR"</p>
<p><strong> - "HAR" -> HEIR,RAH,GAR,JAR,HAT,HA,HR,HARE,HEAR,HAIR,HART,HOAR,CHAR,HARD,HARM</strong></p>
<br/>
<p>More: Wait, DevTools Could Do That? | Igvita.com</p>
<p><strong> - "Igvita.com" -> Commutativity</strong></p>
<br/>
<p>What is the time to first byte (TTFB) for each request?</p>
<p><strong> - "TTFB" -> TTY</strong></p>
<br/>
<p>What is the time to first byte (TTFB) for each request?</p>
<p><strong> - "TTFB" -> TTY</strong></p>
<br/>
<p>For example, navigate to the Echo demo, select the "WebSockets" filter from the bottom of the Network panel then click the "Connect" button. Any messages you send by clicking the 'Send' button can be inspected using the 'Frames' subpanel.</p>
<p><strong> - "subpanel" -> sub panel,sub-panel,subpage</strong></p>
<br/>
<p>More: Wait, DevTools Could Do That? | Igvita.com</p>
<p><strong> - "Igvita.com" -> Commutativity</strong></p>
<br/>
<p>More: WebSocket inspection with DevTools | Kaazing</p>
<p><strong> - "Kaazing" -> Amazing</strong></p>
<br/>
<p>Find and filter XHRs from the Network panel</p>
<p><strong> - "XHRs" -> X Hrs,XHR,XHR s,Hrs</strong></p>
<br/>
<p>When inspecting network requests in the Network panel you often need to narrow down to a specific request based on a specific keyboard. This can be easily done using theCtrl + F or Cmd + F keyboard shortcut.</p>
<p><strong> - "theCtrl" -> the Ctrl,the-Ctrl,hectare</strong></p>
<br/>
<p>The "about:net-internals" page is a special URL that dumps a view of the network stack's internal state. This data can be helpful when debugging performance or connectivity problems. It includes information on request performance, proxy settings and DNS cache.</p>
<p><strong> - "about:net-internals" -> turnabout-internals,internationalists</strong></p>
<p><strong> - "DNS" -> DENS,DINS,DONS,DUNS,ENS,DIS,INS,ANS,DOS,ONS,D'S,DANS,DES</strong></p>
<br/>
<p>Emulating UA Strings & Device Viewports</p>
<p><strong> - "Viewports" -> Viewport,View ports,View-ports,Viewport s,Viewpoints</strong></p>
<br/>
<p>The DevTools support both overriding position values for navigator.geolocation and simulating geolocation not being available via the overrides menu.</p>
<p><strong> - "navigator.geolocation" -> circumnavigational</strong></p>
<br/>
<p>Dock-to-right mode is also useful for previewing how your pages look when viewed on screens with smaller viewports. To use this:</p>
<p><strong> - "viewports" -> viewport,view ports,view-ports,viewport s,viewpoints</strong></p>
<br/>
<p>Should you require it, you can also run Chrome with the “-disable-javascript” flag to achieve the same effect.</p>
<p><strong> - "disable-javascript" -> disable-JavaScript,JavaScript</strong></p>
<br/>
<p>However, if you have a very wide screen and would like to disable this, simply uncheck the “Split panels vertically when docked to right” option in the Settings panel.</p>
<p><strong> - "uncheck" -> unchecked,check</strong></p>
<br/>
<p>Preview all inspectable pages</p>
<p><strong> - "inspectable" -> inspect able,inspect-able,respectable,injectable,indispensable,installable</strong></p>
<br/>
<p>If you find yourself regularly using remote debugging, you might enjoy “about:inspect” which displays all inspectable tabs/extensions in Chrome. Click 'inspect' to switch to a page & launch the DevTools for it in one go.</p>
<p><strong> - "about:inspect" -> inspectorate</strong></p>
<p><strong> - "inspectable" -> inspect able,inspect-able,respectable,injectable,indispensable,installable</strong></p>
<br/>
<p>Get insights into which sites have appcache'd</p>
<p><strong> - "appcache'd" -> AppCache</strong></p>
<br/>
<p>You can see information about appcached sites by visiting “about:appcache-internals”. This allows you to see which sites have appcached, when they were last modified, and how much space they're using. You can also remove appcaches here.</p>
<p><strong> - "appcached" -> app cached,app-cached,AppCache,approached,cached,chapped</strong></p>
<p><strong> - "about:appcache-internals" -> AppCache-internals,internationalizations</strong></p>
<p><strong> - "appcaches" -> app caches,app-caches,AppCache,approaches,Apaches,apaches</strong></p>
<br/>
<p>Note: This is currently only available on Windows and ChromeOS</p>
<p><strong> - "ChromeOS" -> Ch Romeos,Chrome OS,Chrome-OS,Chromes,Chrome's,Ch-romeos,Chromosome,Chrome,Romeos</strong></p>
<br/>
<p>Click the Chrome menu on the browser toolbar.</p>
<p><strong> - "toolbar" -> tool bar,tool-bar,barstool</strong></p>
<br/>
<p>Click the Chrome menu on the browser toolbar.</p>
<p><strong> - "toolbar" -> tool bar,tool-bar,barstool</strong></p>
<br/>
<p>PonyDebugger is a client library and gateway server combination that uses Chrome Developer Tools on your browser to debug your application's network traffic and managed object contexts.</p>
<p><strong> - "PonyDebugger" -> Jitterbugger</strong></p>
<br/>
<p>JSRunTime: DevTools Extension For Grepping JavaScript Objects</p>
<p><strong> - "JSRunTime" -> Runtime</strong></p>
<p><strong> - "Grepping" -> Prepping,Gripping,Pepping,Remapping,Recapping,Pipping</strong></p>
<br/>
<p>Andrei Kashcha wrote a very useful extension for DevTools that can grep a reachable graph of JavaScript objects in memory and find matches by their value or name.</p>
<p><strong> - "Kashcha" -> Katuscha</strong></p>
<p><strong> - "grep" -> rep,grip,prep,grew,g rep,Greg</strong></p>
<br/>
<p>More: JSRuntime - A DevTools Extension For Grepping Objects | G+.</p>
<p><strong> - "JSRuntime" -> Runtime</strong></p>
<p><strong> - "Grepping" -> Prepping,Gripping,Pepping,Remapping,Recapping,Pipping</strong></p>
<br/>
<p>The DevTools Cheatsheet</p>
<p><strong> - "Cheatsheet" -> Cheat sheet,Cheat-sheet,Cheetahs</strong></p>
<br/>
<p>TextMate-like features in Chrome DevTools</p>
<p><strong> - "TextMate-like" -> Text Mate-like,Text-mate-like,Teammate-like,Statesmanlike</strong></p>
<br/>
Processing ../devtools-docs/docs/videos.html file...
<p> Become a Javascript Console Power-User </p>
<p><strong> - "Javascript" -> JavaScript,Java script,Java-script</strong></p>
<br/>
<p>Level up on the Javascript console in the Chrome DevTools. Look at XHR requests, learn console helper functions to monitor events or explore objects better. Paul Irish from the Chrome team gives you a rundown.</p>
<p><strong> - "Javascript" -> JavaScript,Java script,Java-script</strong></p>
<br/>
<p>Follow Pavel Feldman and Sam Dutton in a review of the newest Developer Tools features: mobile debugging, editing, new Timeline "Frame Mode" and much more.</p>
<p><strong> - "Dutton" -> Mutton,Button,Sutton,Hutton</strong></p>
<br/>
Processing ../devtools-docs/docs/workspaces.html file...
<p> You can now edit any of the source files in that folder or its subfolders in Chrome.  “Source files” in this case is not limited to HTML and CSS and Javascript, but can be anything, including markdown and JSON. </p>
<p><strong> - "subfolders" -> subfolder,sub folders,sub-folders,subfolder s,suborders</strong></p>
<p><strong> - "Javascript" -> JavaScript,Java script,Java-script</strong></p>
<br/>
<p>In the Sources panel, right-click or Control+click on a file on the website.</p>
<p><strong> - "Control+click" -> Controlling</strong></p>
<br/>
<p> You can also duplicate a file by selecting Duplicate File.  The new file shows up in the Sources panel and you can enter a new name for it (it doesn't just create “Copy of myfile.txt”). </p>
<p><strong> - "myfile.txt" -> </strong></p>
<br/>