/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(161) A Modern Front-End Workflow with DevTools Revamped Accessibility Debugging (163)

Chrome DevTools: Edit production websites with Network Overrides

24th October 2017
Edit production websites with Network Overrides

Use the Local Overrides feature to map remote network resources to local filesystem resources.

This powerful workflow enables you to quickly prototype changes on production websites. To try this feature out:

  1. Open up the Overrides pane from the Sources Panel.
  2. Select Select folder for Overrides and configure a folder where your overridden resources will live on the filesystem.
  3. In the Network Panel, right click on a resource you wish to override and select Save for overrides.
  4. DevTools creates a local resource which you can edit. Reloads to the webpage now serve your local asset rather than a remote resource.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.