The Changes tab in Google Chrome DevTools

Working as a web developer always involves checking various elements which can become overwhelming when you make many changes while inspecting website elements in a browser and then by a simple page reload, all of them disappear. Google Chrome has a related feature, the “Changes” tab available from Chrome 65 which can become helpful in this case. With this feature, you will be able to see the changes you have made even after reloading the page. In this article, you will read more about how to enable this feature in the Google Chrome browser.

What does the Changes tab in DevTools do?

The Changes tab in Google Chrome DevTools is a feature with which you will be able to track the changes that you make across the page loads. By using the Changes tab, you can see the changes that you made in the:

1. HTML in Sources with enabled Local Overrides
2. CSS in Elements, Styles column, or Sources
3. JavaScript in Sources

What is Local Overrides and how to enable it?

The Local Overrides feature in Google Chrome lets you keep the changes that you make across page loads. Therefore, there is no need to make changes every time after each page reloads. By enabling this option in DevTools, you make a local directory on your end where all the changes are saved. While DevTools is open, each time you reload a page, the browser uses the local file that has been already saved on your device instead of network resources to show you the changes made by you. To enable Local Overrides in the Google Chrome DevTools, you can follow the steps below:

1. Open the DevTools > Sources tab
   • Windows or Linux: F12 OR Ctrl + Shift + I
   • Mac: Fn + F12 OR Cmd + Option + I
2. Select Overrides from the left column.
3. Click on Select folders for overrides and choose a directory on your end to save files.
4. Click on the Allow in the message on the top of the page which shows the need to read and write access to your directory. It is now ready to make your changes in DevTools and keep them even after reloading a page.

How to enable the Changes tab in DevTools?

To enable the Changes tab in Google Chrome DevTools, there are two ways.
Method 1:

1. Open the DevTools > Sources tab
   • Windows or Linux: F12 OR Ctrl + Shift + I
   • Mac: Fn + F12 OR Cmd + Option + I
2. Open the Command menu by pressing:
   • Windows or Linux: Control+Shift+P
   • Mac: Command+Shift+P
3. Type changes to find the Changes option, then press enter to enable it

Method 2:

1. Open the DevTools > Sources tab
   • Windows or Linux: F12 OR Ctrl + Shift + I
   • Mac: Fn + F12 OR Cmd + Option + I
2. Click on the 3-dots icon on the right side > More tools > Changes

How to view changes in the Changes tab in DevTools?

To observe the changes that you make on the page through DevTools:

1. Open Chrome DevTools
2. Make a change (changes) in:
   • HTML in the Sources tab
   • CSS in the Elements tab, Styles column, or in Sources tab
   • JavaScript Sources tab
3. Open the Changes tab (you have earlier enabled it)

Now you can view the changes that have been made that are highlighted in red and green.

How to copy CSS changes in the Changes tab in DevTools?

To copy the CSS changes that you have made in the Elements > Styles column:

1. Open the Changes tab in DevTools
2. From the bottom of the tab, click on the Copy icon to copy CSS.

How to revert file changes from the Changes tab?

If you decide to revert changes that you have made whether in HTML, CSS, or JS, you can easily do it through the Changes tab. To do so, head over to the Changes tab in DevTools, then from the bottom of the tab, you will see a revert icon. By one time clicking on the icon, all changes will be reverted at once.