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 onoverrides
. If you don't seeoverrides
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 onselect 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 presscmd + p
(Mac OS) orctrl + 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 insources
and edit it there. - You cannot edit the styles to be persistent in
elements
atelement.style
Now that you know about this feature. Go out there and have fun debugging :) :)
Photo by Priscilla Du Preez on Unsplash
Top comments (2)
great introduction, thanks!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.