Learn how to make and track persistent changes to your code when debugging in the Sources tab of Chrome DevTools.
The Sources panel in Chrome DevTools provides us with a lot of development and debugging features, from manipulating the HTML and CSS contents of web pages to persisting data with overrides and creating snippets. In this post, we are going to focus more on how we can make and track changes in the DevTools Sources panel.
Before we get started, let’s get you familiar with the Sources panel. Among the already mentioned features, the Sources panel allows you add breakpoints in your codebase for more efficient debugging processes. It also lets you set up a Workspace. Workspaces enable you to save those changes that you make in DevTools to your file system — therefore, DevTools can be used as a code editor.
To get started with the Sources panel, let’s demonstrate how to open it up in Chrome DevTools. There are a few ways we can do this, but I’ll go for the one I find convenient.
Open Google Chrome browser and open your DevTools with the shortcut:
Command + Options + J
on macOS orControl+Shift+J
on Windows to open the DevTools console.Now switch over to the Sources
tab:
Wonderful, now that we’ve opened the Sources panel, let’s go ahead and demonstrate how to track the changes we make in DevTools.
Before we get to the business of tracking changes, let’s first demonstrate how to make a change and then track it for practical purposes. The Sources panel provides us the Override
tab that gives us the ability to make changes in DevTools and persist those changes across page reloads. Let’s take a closer look at it.
Overrides let you make changes in DevTools and keep those changes across page loads. Ordinarily, you would lose any changes made in DevTools when you reload the browser page; however, with Overrides, you can persist these changes and retain them across multiple page reloads. These work for most file types, with a couple of exceptions.
How it works:
Set up overrides:
One of the unique things about modern browsers is that you can manipulate colors, inspect elements and save to immediately see the result of your changes on the browser. The problem here is that these changes don’t persist — hence, if you go to another page or probably even if you reload the current page, all your modifications are lost.
In the latest Chrome update, we have a new feature called “local overrides.” It allows us to make those modifications locally persistent, so that you don’t lose your changes on page reloads. Let’s see how it works from our last image.
Click on Select folder for overrides
to select a custom folder where overrides will persist changes.
Here we’ve added a folder called Overrides
to the Overrides tab. Notice that we now have Enable Local Overrides
checked. Now, let’s make a few changes to the google.com
homepage and persist it to our overrides
folder.
Now you can make changes to the web page, then reload the page and Chrome will continue making use of the changes you made.
Now that we have successfully made and persisted a change in DevTools, let’s see how we can track all our changes.
With the latest version of Chrome, we have the ability to use a new feature called the Changes tab
to track all the changes to our web page. Since we have set up persistence with overrides, let’s make a change to our custom web page and see how the change is tracked with the Changes tab
.
How it works is, we open up the Sources panel
and open up the file we intend to make changes on (under the Page tab). Then we make our change and save. Also we reload the page to ensure that our change has persisted. Then we open the Changes tab by right-clicking in the editor and selecting Local modifications
to open up our Changes tab where we can see the changes we’ve made. That is exactly what we have demonstrated in the gif above.
In this post, we have gone over the features of the Sources panel, demonstrated how to leverage the overrides feature to make and persist changes and also how we can track these changes using the Changes tab. There is a lot more we can do in DevTools and especially in the Sources panel. Feel free to check out the official documentation for more.
Chris Nwamba is a Senior Developer Advocate at AWS focusing on AWS Amplify. He is also a teacher with years of experience building products and communities.