Chrome Local Overrides
Tags: javascript, devtools, productivity, webdev
Published: 2019-11-23 21:34:24

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.


![Sources tab](https://thepracticaldev.s3.amazonaws.com/i/uqag00n4bct341pp7h3n.jpg)

- 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.


![Select folder](https://thepracticaldev.s3.amazonaws.com/i/chyeb0cv97as1lhjr41u.png)



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


![Enable local overrides](https://thepracticaldev.s3.amazonaws.com/i/9jqdq7h1naazyrbaxheh.png)



### 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.


![Edit Styles](https://thepracticaldev.s3.amazonaws.com/i/bossxk58d5fqke0zwirg.png)


- *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 Header](https://thepracticaldev.s3.amazonaws.com/i/rlh0mmrny8byllo1tnd8.png)


- *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. 


![Edit Image](https://thepracticaldev.s3.amazonaws.com/i/x0t13pwl6bcimhwo9c7i.gif)



### 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.


![Changes](https://thepracticaldev.s3.amazonaws.com/i/f7w6jy3ulpj7ch9wceux.png)


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. 


![Changed files](https://thepracticaldev.s3.amazonaws.com/i/0ttot711juguawk0yzm2.png)


### 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`


![Element styles](https://thepracticaldev.s3.amazonaws.com/i/s7kharoqp1nvrxuaim2g.png)



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

 
Photo by Priscilla Du Preez on Unsplash