The Developer Tools, bundled and available in Chrome, allows web developers and programmers deep access into the internals of the browser and their web application. The Developer Tools are heavily based on the WebKit Web Inspector, a part of the open source WebKit project. This overview of the Developer Tools points out its most popular and useful features. The target audience are web developers who don't know of, or have not yet investigated, the Developer Tools. However, we are sure that even if you are an experienced web developer, you will pick up a tip or two.
Note: If you are a web developer and want to get the latest version of Developer Tools, you should use the Google Chrome release from the Developer Channel.
Contents
How to Access the Developer Tools
To access the developer tools, open a web page or web app in Google Chrome. Then take one of the following actions:
- Select the Wrench menu
at the top-right of your browser window, then
select Tools ->
Developer tools. - Right-click on any page element and select Inspect element.
- On Windows and Linux, press
-
- Control - Shift - I keys to open Developer Tools
- Control - Shift - J to open Developer Tools and bring focus to the Console.
- Control - Shift - C to toggle Inspect Element mode.
- On Mac, press
-
- ⌥⌘I (Command - Option - I) keys to open Developer Tools
- ⌥⌘J (Command - Option - J) to open Developer Tools and bring focus to the Console.
- ^⌘C (Control - Option - C) to toggle Inspect Element mode.
See Keyboard Shortcuts section for the complete list of shortcuts supported within the Developer Tools.
The Developer Tools Window
The Developer Tools are organized into task-oriented groups that are represented by icons in the toolbar at the top of the window. Each toolbar item and corresponding panel lets you work with a specific type of page or app information, including DOM elements, resources, and scripts. Toolbar also provides a search field that enables you to search the current panel.
You can use Control - [ and Control - ] shortcuts to iterate over the panels.
Elements
The Elements panel allows you to see the web page as the browser sees it. That is, using the Elements panel, you can see the raw HTML, raw CSS styles, the Document Object Model, and manipulate either in real time. [more]
Resources
The Resources panel lets you inspect resources that are loaded / available to the inspected page. It lets you interact with Frame trees containing frame resources (HTML, JavaScript, CSS, Images, Fonts, etc.), HTML5 Databases, Local Storage, Cookies and AppCache. [more]
Network
Use the Network panel to learn what components your web page or application is requesting from web servers, how long these requests take, and how much bandwidth is required. You can also view the HTTP request and response headers for each of your resources. The Network panel is perfect for helping you speed up page load times. [more]
Scripts
To peer inside the JavaScript for a page, you will use the Scripts panel. Here you can find a list of scripts required by the page plus a full featured script debugger. You can even change the JavaScript on the fly! [more]
Timeline
For advanced timing and speed analysis, the Timeline panel offers in-depth visibility into the various Chrome behind-the-scenes activities. You can learn how long the browser takes to handle DOM events, rendering page layouts, and paint the window. [more]
Profiles
The Profiles tool helps you capture and analyze the performance of JavaScript scripts. For example, you can learn which functions take the most time to execute and zoom in on exactly where to optimize. [more]
Audits
The Audit panel is like having your own web optimization consultant sitting next to you. This panel can analyze a page as it loads and provide suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness.
Console
Last but definitely not least, the Developer Tools offers a full featured Console. From the Console, you can enter arbitrary JavaScript to programmatically interact with your page. [more]
The lower part of the developer tools window lets you dock to the main window, and to toggle the Console. You can also toggle the Console using the Escape key.
What's next?
Here are some choices for where to go next:
Go through the panel overviews:
Read our blog posts
Watch our videos
More Information
For more information, follow the links below:
- If you are using Developer Tools to debug Chrome extensions, you can watch this video or go to this page.
- To submit a bug or a feature request on Developer Tools, please use issue tracker at http://crbug.com. Please also mention "DevTools" in the bug summary.
- If you know for sure that the bug or a feature should be implemented as a part of WebKit Web Inspector, please submit it at http://webkit.org/new-inspector-bug.