Track Your HTML, CSS, And JavaScript Changes - Chrome Developers

Sofia Emelianova GitHub

Use the Changes panel to track code changes made within DevTools.

Overview

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

• HTML in Sources with enabled Local overrides
• CSS in Elements > Styles or Sources
• JavaScript in Sources

The Changes panel shows only the changes you make 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 panel

To open the Changes panel:

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.

   

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

By default, DevTools displays the Changes panel 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:

   • HTML: First, enable Local overrides, then make changes in Sources
   • CSS in Elements > Styles or Sources
   • JavaScript in Sources

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

4. Observe a diff output that highlights the following:

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

Copy CSS changes

If you made changes to CSS in Elements > Styles, you can copy all of them with a single button:

1. Open the Changes panel and, in the right-hand side of the panel, select the CSS file you made changes to.

   

2. Click the Copy button at the bottom of the Changes panel.

Revert all changes made to a file

To revert changes made to a file:

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