Chrome DevTools (original) (raw)

DevTools

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools lets you edit pages on-the-fly and diagnose problems quickly, which helps you build better websites, faster.

DevTools Tips

A series of bite-size videos to help you to learn features in DevTools.

Commands and shortcuts

Quickly accomplish tasks.

Panels

Discover the power of each DevTools panel.

Console

Log messages and run JavaScript.

Sources

View and edit files, create snippets, debug JavaScript, and set up a workspace.

Memory

Find memory issues that affect page performance, including memory leaks, and more.

Application

Inspect, modify, and debug web apps, test cache, view storage, and more.

Recorder

Record, replay, measure user flows, and edit their steps.

Rendering

Discover a collection of options that affect web content rendering.

Autofill

Inspect and debug saved addresses.

Issues

Find and fix problems with your website.

Security

Make sure that a page is fully protected by HTTPS.

Memory inspector

Inspect an ArrayBuffer, TypedArray, or DataView in JavaScript, as well as WebAssembly and memory of C++ Wasm apps.

Media

View information and debug media players per browser tab.

Changes

Track changes to HTML, CSS, and JavaScript.

Coverage

Find and analyze unused JavaScript and CSS code.

Lighthouse

Optimize website speed with the Lighthouse panel.

Quick source

View and edit source files while having access to other panels.

Settings reference