As developers, we use the inspector tool and the browser’s debugger every day.
It’s efficient and dev-friendly. We don’t have to reload the page to see our CSS modifications, for example.
However, what if you need to reload the page to fix some issues, such as the navigation? You cannot dot it with the classic debugger as it loses the modifications on page reload.
Local servers vs. remote servers
Let’s keep things simple by saying that with a local server, the computer calls itself. You often go to 127.0.0.1 or 0.0.0.0 with a specific port.
With modern frameworks and techniques, you get fantastic features such as hot reload or live reload. It’s pretty cool, but it may not fully reflect the final result.
Depending on the browser and the configuration, the page load may differ significantly on the remote server.
Local overrides can be an excellent debugging tool in this case.
How to enable local overrides
On Google Chrome (and other Webkit browsers such as Brave):
- go to the dev tools
- open the source tab
- A popup appears to authorize the browser to save the file on your machine
- After that, you only need to open the file in your text editor or IDE
Now, the website will take your version of the file.
Modifications you make in your version of the file apply, and changes you make in the debug panel are automatically saved in your local file.
Chrome adds a little purple circle before the name of your local file, so there’s no confusion between your version and the original:
You can quit the browser and reopen it. The modifications are still there. When done debugging, you can disable local overrides and delete your local version.
And in Firefox?
I prefer the firefox developer edition because I get unique features.
The good news is it has a similar feature as local overrides. The bad news is that only CSS files can have local diff.
Source: Mozilla support
Anyway, the style editor is excellent.
If you need to have persistent but still temporary modifications for a website, local overrides are an excellent way to save time.
It removes the hassle of multiple deploys and builds, or worse, like cow-boy coding (~ make modifications directly on a live production website).