/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

Chrome DevTools: Edit production websites with Network Overrides

24th October 2017
Edit production websites with Network Overrides

Use the experimental Network Overrides feature in Canary 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. Enable the Override requests with workspace project experiment in DevTools experiments.
  2. Reload DevTools.
  3. Open up the Overrides tab from the Sources Panel.
  4. Select Setup overrides and configure a folder where your overridden resources will live on the filesystem.
  5. In the Network Panel, right click on a resource you wish to override and select Save for overrides.
  6. 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.