Don't forget local overrides

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.

Permalink to heading Local servers vs. remote servers 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 or 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.

Permalink to heading How to enable local overrides How to enable local overrides

On Google Chrome (and other Webkit browsers such as Brave):

  1. go to the dev tools
  2. open the source tab
  3. right-click on a javascript or stylesheet file and select “save for overrides.”
  4. A popup appears to authorize the browser to save the file on your machine
  5. 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.

Permalink to heading Super convenient Super convenient

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.

Permalink to heading And in Firefox? 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.

Permalink to heading Wrap up Wrap up

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