Local Overrides in Chrome Devtools
What is Local Override ?
In Chrome DevTools, the “local override” feature allows you to make temporary modifications to the files of a website without actually changing the original files on the server. It enables you to override specific resources (HTML, CSS, JavaScript, images, etc.) with modified versions that are loaded and used only within your local browser.
When to Use ?
Local overrides are useful when you want to experiment with changes to a website without affecting the live version or when you want to test a fix for a bug without making permanent changes. It provides a convenient way to preview and iterate on modifications before applying them to the actual server files.
It’s important to note that local overrides are stored locally on your computer and do not affect the actual website or its files on the server. Additionally, local overrides are only active when DevTools is open, and the changes are specific to the browser profile you are using.
Remember to remove or disable local overrides when you no longer need them, as they can interfere with the normal behavior of the website if left active.
How to Use ?
To use local overrides in Chrome DevTools, follow these steps:
- Open DevTools by right-clicking on a web page and selecting “Inspect” or by using the keyboard shortcut (Ctrl+Shift+I or Cmd+Option+I on Mac).
2. In DevTools, navigate to the “Sources” panel. Then Click on the overrides.
3. Next select folder for overrides in your local environment.
4. Locate the file you want to override in the file tree on the left side or from the network tab. This can be any file like js, html, css etc. Right-click on the file and select “save for overrides” from the context menu.
5. Once you’ve set up local overrides, you can make modifications to the selected files. Right-click on a file and choose “Save” to save any changes you make locally.
I changed the background color of the body class to #ffc107 color code. Default it was #fff.
6. Now Refresh the page. The modified file will now be loaded by your browser whenever you visit the website. Other users will not see the changes since they are specific to your local environment.
By leveraging local overrides effectively, developers can confidently experiment, test fixes, and iterate on website changes before deploying them to the live server, ensuring a smoother and more controlled development workflow.
In addition I want to briefly introducr what is override headers also.
Override Headers:
“Override Headers” is a feature in Chrome DevTools that allows you to override or modify the headers of network requests without permanently changing the request configuration. It provides a quick way to test how your application responds to modified headers.
To use “Override Headers,” you need to open the Network panel, select a network request, and then open the “Headers” tab. In the Headers tab, you can modify or add headers to the request by clicking on the edit icon (pencil icon) next to each header. These modifications are applied temporarily and do not persist beyond the current browsing session.
The purpose of “Override Headers” is to allow you to quickly test different header configurations without altering the actual request setup permanently. This is an additional information for this article.
Summary
“Local overrides” are a helpful tool for developers to debug problematic functions that behave differently in local environments compared to production or staging environments. By investing time in understanding and using this feature, developers can save a significant amount of time when troubleshooting code issues.
