Modifying and Saving Static Resources in Chrome Developer Mode

There’s a scenario where we open Chrome developer mode to modify frontend resources of a webpage to achieve a certain effect, but the changes are lost upon refresh. Is there a way to save them? Yes! Chrome 65 introduced a feature called local overrides.

See the Effect

Procedure

Add Override Folder

Save to Override

For example, when visiting Baidu search, select the baidu HTML webpage, right-click, and choose “Save for overrides.” You’ll see this HTML file in the overrides section and in the physical disk folder you selected.

Modify the File

You can modify it in Chrome - you’ll notice that this file is editable in browsing state, essentially functioning as an editor. You can also directly modify the file in your local system. After modification, when you refresh the page with developer mode open, you’ll see the changes successfully applied.

Currently, this only works for modifying static resources. XHR asynchronous requests cannot be modified.

Final Thoughts

Chrome’s Local Overrides feature is incredibly useful for developers who need to test modifications to static resources without deploying changes to a server. This feature allows you to persist CSS, JavaScript, and HTML changes across page refreshes, making it perfect for debugging and testing UI modifications. While it only works for static resources and not XHR requests, it’s still a powerful tool in the developer’s arsenal. Remember that these overrides are local to your browser and won’t affect other users or the actual production website.