Chrome Developer Tools
The Chrome Developer Tools (DevTools for short), are a set of web
authoring and debugging tools built into Google Chrome. The DevTools
provide web developers deep access into the internals of the browser and
their web application. Use the DevTools to efficiently track down layout
Sections: Elements, Resources, Network, Sources, Timeline, Profiles,
Latest version of Chrome Canary:
The DevTools has several built-in shortcut keys that developers can use to
save time in their day to day workflow. Outlined below is each shortcut and
the corresponding key for each on Windows/Linux and Mac. While some
shortcuts are globally available across all of the DevTools, others are
specific to a single panel, and are broken up based on where it can be
Categories: Opening DevTools, All Panels, Elements Panel, Styles Sidebar,
Sources Panel, Code Editor Shortcuts, Timeline Panel, Profiles Panel,
Console, Screencasting, Emulation, Other Chrome Shortcuts
Open / switch from inspect element
mode and browser window
Ctrl + Shift + C Cmd + Shift + C
Text search across all sources Ctrl + Shift + F Cmd + Opt + F
Toggle edit as HTML (Elements) F2 -
Step out of current function
Shift + F11, Ctrl + Shift + ; Shift + F11, Cmd + Shift + ;
Go to member (Sources) Ctrl + Shift + O Cmd + Shift + O
Go to matching bracket (Sources) Ctrl + M -
Clear Console (Console) Ctrl + L Cmd + K, Opt + L
Select an element in the page to inspect it
Right-click any element on the page the page and select Inspect Element.
Press Ctrl + Shift + C (or Cmd + Shift + C on mac) to open DevTools in
Inspect Element mode, then click on an element.
Click the Inspect Element button Inspect icon at the top of the DevTools
window to go into Inspect Element Mode, then click on an element.
Use the inspect() method in the console, such as inspect(document.body).
See the Command-Line API for information on using inspect.
Navigate the DOM
You can navigate through the DOM structure using either mouse or
To expand a collapsed node , double-click the node or press Right
To collapse an expanded node , double-click the node or press Left
As you navigate, the Elements panel shows a breadcrumb trail in the
powerful debugging tools to help quickly discover the cause of an issue and
fix it efficiently. The Chrome DevTools include a number of useful tools to
such as timer and XHR events, check the Async checkbox.
Further information and examples using async call stacks can be found in
The Long Resume
When paused, click and hold the resume button to "Resume with all
pauses blocked for 500 ms". This makes all breakpoints disabled for half a
second, naturally. Use this to get to the next event loop, so you can avoid
hitting breakpoints continually exiting a loop, for example.
While at a breakpoint, it's also possible to live edit scripts by clicking into
the main editor panel and making local modifications.
Pause on Exceptions.
Pause on Uncaught Exceptions.
Breakpoints on DOM Mutation Events.
Breakpoints on XHR.
In addition to the detailed Records view, you can inspect recordings in one of
Events mode shows all recorded events by event category.
Frames mode shows your page's rendering performance.
Memory mode shows your page's memory usage over time.
Tips for making recordings
Keep recordings as short as possible. Shorter recordings generally make
Avoid unnecessary actions. Try to avoid actions (mouse clicks, network loads,
and so forth) that are extraneous to the activity you want to record and analyze.
For instance, if you want to record events that occur after you click a “Login”
button, don’t also scroll the page, load an image and so forth.
Disable the browser cache. When recording network operations, it’s a good
idea to disable the browser’s cache in the DevTools Settings panel.
Disable extensions. Chrome extensions can add unrelated noise to Timeline
recordings of your application. You can do one of the following:
Open a Chrome window in incognito mode (Ctrl + Shift + N).
Create a new Chrome user profile for testing.
The Profiles panel lets you profile the execution time and memory usage of a
web app or page. These help you to understand where resources are being
spent, and so help you to optimize your code. The provided profilers are:
The CPU profiler shows where execution time is spent in your page's
objects and related DOM nodes. Read more
Managing application storage
The Resources panel lets you inspect your application's local data sources,
including IndexedDB, 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 stylesheets.
The Audit panel can analyze a page as it loads. Then provides suggestions
and optimizations for decreasing page load time and increase perceived
(and real) responsiveness.
For further insight, it is recommended to use PageSpeed Insights.
Working with the Console
testing web pages and applications. It is a place to:
Log diagnostic information in the development process.
A shell prompt which can be used to interact with the document and
console.log(object [, object, ...])
Format Specifier Description
%s Formats the value as a string.
%d or %i Formats the value as an integer.
%f Formats the value as a floating point value.
%o Formats the value as an expandable DOM element (as in
the Elements panel).
%c Formats the output string according to CSS styles you