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.
- Go to the
sourcestab and click on
overrides. If you don't see
overridesright 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 overridesand 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 overrideswill appear, Check that.
Editing styles: Go to
elementstab 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
sourcestab 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.
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.
- As you could edit the styles in
elements. You cannot edit the HTML the same way. You have to search that particular file in
sourcesand edit it there.
- You cannot edit the styles to be persistent in
Now that you know about this feature. Go out there and have fun debugging :) :)
Photo by Priscilla Du Preez on Unsplash