How to use Local Overrides to debug production sites?

The Local Overrides feature in developer tools allows you to replace files on a live site with your local versions directly in the browser. This is indispensable when you need to test a bug fix or layout change on a third-party resource or in a production environment without access to the source code on the server. To get started, you need to open the Sources tab, go to the Overrides subtab, and specify an empty folder on your computer that the browser will be granted write access to.

After setting up the folder, you can select any file from the Page tab, right-click it, and select Save for overrides. The browser will automatically save this file to your specified local folder and start using its copy instead of the original resource every time the page is refreshed. You can edit this file in an external editor or directly in the Sources panel, and the changes will be applied instantly to the page.

This capability opens up huge possibilities for rapid prototyping and hypothesis testing. If styles or scripts are minified, you can configure their formatting directly in the browser before saving them for local overrides. This approach allows for deep analysis and debugging of complex problems in real-world application operation conditions without the need to deploy intermediate bundlers on a local machine.