Chrome Developer Tools

The DevTools docs have moved! For the latest tutorials, docs and updates head over to the new home of Chrome DevTools.

Styles & the DOM

Editing Styles and the DOM

Use DevTools to do real-time editing of your web page. Edit the DOM directly or the CSS styles and see your changes rendered immediately.

Learn more

Elements Panel

Mobile DevTools

Remote Debugging on Android

You can now access your Android device directly in DevTools on your dev machine. Just plug it in over USB and you can view and debug!

Learn more

Remote Debugging

Learn Basics

DevTools Overview

A starting place if you haven't used DevTools before - this page will tell you everything you need to get started with the Chrome DevTools, from how to access the tools to a brief explanation of what the various menus and panels are used for.

Learn more

Command-line debugging

Using the console

Use the Javascript console in DevTools to debug your Javascript code and log diagnostics, or you can also just use it as a shell to try out Javascript commands and interact with pages.

Learn more

DevTools Console

Mobile DevTools

Mobile Emulation

Need to debug for a device but don't have the device on hand? DevTools can emulate many devices -- screen dimensions, touch events, geolocation, and user spoofing.

Learn more

Mobile Emulation

Learn Basics

Keyboard Shortcuts

Save more time in your development workflow -- here is a page full of keyboard shortcuts that will make things quicker when you are using DevTools.

Learn more

Keyboard Shortcuts

Performance and Profiling

Javascript Memory Profiling

Does your page use too much memory or have a memory leak? Find out how to get and analyze a heap profile.

Learn more

Memory Profiling

Performance and Profiling

Performance Profiling: Timelines

Is your site running slow? Analyze times for events, scripting, rendering, and painting using the Timeline.

Learn more

Timelines

Performance and Profiling

Javascript CPU Profiler

Find out how much CPU is being spent on your various Javascript functions with the Javascript CPU Profiler.

Learn more

CPU Profiler

Debugging Tools

Javascript Debugging

Need to debug your Javascript? DevTools has a suite of tools to let you step through code, set breakpoints, handle exceptions, and so on.

Learn more

Javascript Debugging

Learn Basics

Authoring and Development Workflow

Do you find that DevTools saves you some time and you wonder how to save more? This page guides you through some ways to make your workflow more efficient, both in editing files and styles but also with your Javascript and how you use the DevTools in general.

Learn more

Learn Basics

Workspaces

Do you hate switching between DevTools and your external editor to make your changes persist to disk? Workspaces allows you to map pages to local resources and edit and save them right inside DevTools.

Learn more

Command-line debugging

Console API reference

Javascript functions you can call within the console or within your programs to log various results to the console.

Learn more

Command-line debugging

Command Line API reference

Functions that you can call in the console for performing common tasks within the DevTools.

Learn more

Learn Basics

Tips and Tricks

Various tips and tricks on things within the DevTools.

Learn more

DevTools Reference

Settings

Let's learn some more about what you can control in the Settings panel.

Learn more

Styles & The DOM

Working with CSS Preprocessors

Are you using a CSS preprocessor such as Sass, Less, or Stylus? You can live-edit your preprocessor source files in DevTools as easily as editing straight CSS, and enable CSS source maps.

Learn more

Mobile DevTools

Remote Debugging Protocol

Although we encourage you to use the new Screencast for debugging your Android devices, we do have Javascript runtime bindings for allowing DevTools to interact with mobile Chrome devices.

Learn more

Contribute

Integrating with DevTools

Write new extensions and protocol clients to make new features for Chrome DevTools!

Learn more

Learn Basics

Videos

Videos to get you started learning about Chrome DevTools.

Learn more

Further Resources

Code School

Explore and master the DevTools with our free "discover DevTools" courses.

Learn more

Get Involved

Summit a bug or a feature request on DevTools, and help the community get better.

Learn more

Debug Extensions

Looking to use the DevTools to debug Chrome extensions? Watch our videos for more info.

Learn more