products

Local overrides

How to see a customized version of any website locally.

Recently Google Chrome has shown local overrides feature in Chrome Canary. Here is the video, the relevant feature starts at minute 4

Here is how to use this feature to change the background color of https://news.ycombinator.com/news for example.

  1. Open Chrome Canary (I have version 64)
  2. Load https://news.ycombinator.com/news and open DevTools
  3. Open "Sources" tab and then "Overrides" column.

Soures - Overrides

  1. Check "Enable Network Overrides" and select any folder on the local disk. This folder will keep changes files.
  2. Click "Allow" when asked to allow Chrome Canary browser to have full access to the new folder
  3. Select "Sources" - "Network" tab and find the "index.html" document. Edit whatever you want there, for example I changed <table bgcolor="ping"> in the HTML markup.
  4. Click "Ctrl-S" to save the update file. Notice a purple dot appears next to the file name.
  5. Reload the page and see the override making the page pink.

Pink Hacker News

Just as you can override HTML, you can add local modifications to CSS and JavaScript files.

Note: in order for local overrides to work, you must have DevTools opened and "Network enabled" which you can quickly trigger from the command palette

Enable network overrides using commands

On Mac press "Cmd + Shift + p" and start typing part of the command.