«   Previous tip Next tip   »

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

Introduction

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.

How to use this feature

To try this feature, follow these steps:

  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.

Worth knowing

Extra resources

«   Previous tip Next tip   »

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