Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect JavaScript ArrayBuffer Network conditions: Override the user agent string Recorder: Record, replay and measure user flows Security: Understand security issues WebAuthn: Emulate authenticators
Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect JavaScript ArrayBuffer Network conditions: Override the user agent string Recorder: Record, replay and measure user flows Security: Understand security issues WebAuthn: Emulate authenticators

Changes: Track your HTML, CSS, and JavaScript changes

Published on

With the Changes tab, track the changes you make to:

The Changes tab shows changes you made within DevTools. If you reload either DevTools or your page, the changes disappear.

To make DevTools persist changes across page loads, follow the steps in Local overrides.

To make DevTools write changes to your local sources, follow the steps in Edit and save files with Workspaces.

Open the Changes tab

To open the Changes tab:

  1. Open DevTools.

  2. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, ChromeOS) to open the Command Menu.

  3. Start typing changes, select Show Changes, and press Enter.

    Run the Show Changes command

Alternatively, in the upper right corner, click More Customize and control DevTools > More tools > Changes.

More tools > Changes

By default, DevTools displays the Changes tab at the bottom of your DevTools window, in the Drawer.

View and understand your changes

To view your changes:

  1. Open DevTools.

  2. Make changes to your sources:

  3. Open the Changes tab and select a file in the right-hand side of the tab.

  4. Observe a diff output that highlights the following:

Highlighted diff in the Changes tab

The Changes tab pretty-prints the diff output automatically, so you don't have to scroll horizontally to see the changes in a single line.

Revert all changes made to a file

To revert changes made to a file:

  1. On left-hand side of the Changes tab, select a file with changes to revert.
  2. On the action bar at the bottom, click Undo Revert all changes to current file.
Revert button

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.