Local Overrides — A smart add-on to chrome
Chrome (65) DevTools has a great feature called Local Overrides. A self-explanatory term allows overriding CSS, JS and DOM on any live site. Changes are saved in local files and they override the live environment.
You must be thinking why we need local overrides as one can inspect an element, adjust some styling or modify some markup, and see results immediately. This can help with troubleshooting all kinds of issues, as well as experimenting with potential changes.
But the downside to inspecting and modifying an element is that your changes don’t persist if you go to a different page, or refresh the page.
So, the solution for it is the Local Overrides.
Let’s see the use cases where Local Overrides can be used.
Persistent local overrides
It allows you to make the changes made locally persistent. Now, you can try something out without losing it all the next time you refresh or leave the page.
Let’s get started.
Open the Sources tab and go to the Overrides sub tab.
Click on “ Select folder for overrides” and select the directory to save your changes.
At the top of your viewport, click Allow to give DevTools read and write access to the directory. Make your changes.
- Click on pages and select the related CSS file.
- Change the file and then it’ll show the * mark and then save it, it’ll persist after reloading also.
- After the changes, you can click on the override tab and check the related file changes.
- Changes can also be seen in the Change tab as below
After all the changes u can reload the page it loads the files from local copies instead of server.
Performance Tool
Local Overrides also has implications on performance-related development.
With local overrides set up, you now have the ability to make changes to the code on a non-local site, and then see what kind of performance impact those changes would have. If you’re working on a site locally, these new features may have limited value. But in those cases where you want to experiment on a site that isn’t local and do so quickly, these new features open up a lot of possibilities.
Advantages
The main advantage of this feature is that if at any time you are facing any deployment issues you can test your component with the help of local overrides to check how it behaves in higher environments.
Let’s enjoy a Quick demo !!!
Summary
“Local overrides” provide an add-on to the debugging capabilities of a developer where it helps to debug a faulty function that won’t reproduce the same issues locally as it does on the production or staging environment.
I hope that investing a little time on this article will help you to save a lot of time in debugging. 😊
Until we meet again Happy Coding!!!
