/dev tips

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

(173) Query Objects Pinned Console Expressions (175)

Chrome DevTools: Drag and drop new images to override them on a website

11th July 2018
Drag and drop new images to override them on a website

You can use the Local Overrides feature of DevTools to easily drag/drop images from your filesystem into DevTools. Doing this overrides the usual website image with your version. Subsequent page reloads use your new local image rather than the production version.

To try this, you must:

  1. Enable local overrides.
  2. Locate the original website image in the Sources Panel > Page Pane.
  3. Drag and drop your new image from the filesystem over the existing image in the Sources Panel.

Tip: Check out my video Improving page performance with Chrome DevTools for a practical use case for using the Local Overrides feature.

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