When I discovered this CRAZY feature of Chrome's DevTools I thought I was one of the few who didn't know about it but that wasn't the case! 😱

In this article I will tell you what the Override functionality of Chrome's DevTools is, how to use it and what it is used for.

I'll just tell you in advance that it will make your life easier in an incredible way! 🔥
Thanks to this feature you won't have to do all the steps to release the code every time! You'll be able to see your changes on the fly, directly in the browser. It's all super fast, a real game changer! 🚀

Override - What is it

Override is a feature of Chrome's DevTools that implements a real work tool for developers.

This tool is so powerful that it allows developers to overwrite resources loaded from a website with local files, directly in the browser. In practice, Chrome allows you to modify and test the files of a website (such as CSS, JavaScript, HTML) without modifying the server or deploying the changes.

Once activated, Override uses the local version of the files instead of the one loaded from the server. It's like creating a "copy" of the site on your computer, where you can make changes freely and see the results in real time. This does not affect end users, since the changes are visible only to you.

Override - What it is used for

Override is crucial for those who want to test new features, designs, or bug fixes without having to go through the code release process, which often requires numerous steps, such as committing, deploying, or setting up test environments. With Override, you can:

1. Experiment freely: You can try different styles, layouts, or JavaScript logic without changing your production site.

2. Debug on the fly: When you're trying to fix a bug, you can overwrite your site's files locally to see if your solution works. You can even overwrite your API responses to see how your code behaves in the event of a SUCCESS (status code 2xx) or ERROR (status code 4xx or 5xx).

3. Avoid the build-deploy cycle: Override saves you the hassle of having to go through the build-deploy cycle over and over again. You can see your changes on the fly, making your development process much faster.

4. Optimize your workflow: If you are working on a complex web application or a site that has a long deployment process, Override allows you to work much faster. This tool is ideal for both frontend and backend developers who want to experiment with design or functionality without blocking the official release.

5. Integrated environment: by editing files directly in the browser, you will have all the integrations with invocations of backend services or external APIs, with server-side processing (e.g. servlets) and with the configurations and contents of the Production or Test environment without having to replicate everything in a local environment. Isn't that awesome?! 🥳

Override - How to use

To use the Override feature of Chrome DevTools, follow these detailed steps:

1. Open Chrome DevTools:

• Right-click on any web page and select "Inspect" from the drop-down menu, or use the keyboard shortcut Ctrl+Shift+I on Windows/Linux or Cmd+Opt+I on macOS, or F12.

• This will open Chrome DevTools, the development tools panel.

2. Go to the "Sources" tab:

• Once you open DevTools, you will see several tabs at the top (Elements, Console, Network, etc.). Click on "Sources".
• Here you will see the file structure of the website, including CSS, JS, HTML files and other resources.

3. Enable Override:

• In the left sidebar, look for the section called "Overrides". If you don't see it right away, click the three vertical dots button at the top of the DevTools panel and select "Show Overrides".
• After enabling it, you will be asked to select a local folder on your computer where the overridden assets will be saved.

4. Select a local folder:

• Click "Select Folder for Overrides" and choose an empty folder on your computer. This folder will be where Chrome will store the overridden files locally.

• To enable this feature, Chrome will ask you to grant permission to access local files. Click "Allow".

5. Edit files:

• Now, whenever you inspect or edit a file like CSS, JavaScript or HTML, you can edit it directly in the "Sources" tab. The changes you make will be saved to your local folder and will automatically overwrite the version of the file uploaded from the server.

• For example, you can make changes to a CSS file to test different visual styles, or to a JavaScript file to fix bugs or test new features.

6. View changes in real time:

• Once you have modified the resources, use the keyboard shortcut Ctrl+S on Windows/Linux or Cmd+S on macOS to save. The changes will be visible immediately on the site without having to reload the page. Chrome will then use the modified version instead of the original one coming from the server.
• This allows you to see the results in real time, without waiting for compilation or deployment times. You can even reload the page and Chrome will continue to use the overwritten files until you disable the Override feature or delete the files from the local folder.

N.B. In case you have modified javscript code that is executed on page load, I recommend you always reload the page.

7. Disable or Manage Overrides:

• You can disable Override at any time by going back to the "Sources" tab and unchecking the option in the "Overrides" section. Resources will return to loading from the server as usual.

In summary

• Time saved: No more running full build cycles or waiting for deployment just to test small changes.
• Flexibility: You can quickly test changes on the frontend without touching the backend or disturbing the production environment.
• Collaboration: Great for working in teams where multiple developers can test and change things locally, avoiding conflicts on a shared server.

Ultimately, the Override feature makes the developer workflow smoother and faster, allowing for more agile testing and immediate feedback.

If you haven't tried it yet, you absolutely must, it will change the way you work! 😎

Follow me #techelopment

Official site: www.techelopment.it
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment

References

https://developer.chrome.com/docs/devtools/overrides