Chrome Local Overrides

Don't we all just love devtools. They make our lives so better. Recently I learned about a supercool chrome devtool feature. It's actually been available since chrome 65 release. If you haven't heard about it yet, well, you are in for a REAL TREAT.

Local Overrides lets you make code changes in devtools, which are persistent across page loads. 🤯 In short, it’s like having a devtools instance that doesn’t change when you reload.

This can be immensely useful to debug production errors, performance problems or style related issues. It can be also useful to all the freelancers who don't get the access to the actual codebase.

Let's get you set up!!

• Go to the sources tab and click on overrides. If you don't see overrides right away, you can click the two arrows icon and a dropdown will show, it might be hiding there.

• Create a folder on your local machine. Let's name it local-overrides. In devtools click on select folder for overrides and select the folder. This is the folder chrome will use to save and access your changes. Don't forget to allow devtools access to our folder.

• A new checkbox Enable local overrides will appear, Check that.

You are now ready to start playing around!!

• Editing styles: Go to elements tab and edit any style and reload. You will see that styles are persistent. You can also see that the source of the file is now changed.

• Editing Header: Go to sources tab and as the message suggests press cmd + p (Mac OS) or ctrl + p (Windows) a search dropdown will appear. Search for the file you want to edit. Edit the title and reload.

• Edit Image: Open the image you want to change from the webpage in sources. Now just drag the new image onto this and reload, and as you can see the changes are persistent.

Changes

If you look closely at one of the above changed files in sources tab, you will see all the changed lines are displayed with a purple mark to the left. You can also see all the changes at once using the changes panel. To open the panel you can press cmd + shift + p (Mac OS) or ctrl + shift + p (Windows) and type show changes thereby selecting that option from dropdown.

This is such a lightweight solution. If you go back to the ‘local-overrides’ folder you will see only those files are saved the one's you changed.

Limitations

• As you could edit the styles in elements. You cannot edit the HTML the same way. You have to search that particular file in sources and edit it there.
• You cannot edit the styles to be persistent in elements at element.style

Now that you know about this feature. Go out there and have fun debugging :) :)

Photo by Priscilla Du Preez on Unsplash