Chrome DevTools: 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

• Local Overrides is helpful during development and debugging.
• Local Overrides can be used with Performance Profiling since you can use the Performance Panel to profile different variations a page.
• While DevTools can pretty-print minified code, you can use Local Overrides to save the pretty-printed version of, for example, a JavaScript file, which makes debugging sessions a little easier.

Extra resources

• In this "Making images lazy load with Chrome DevTools" video, I demonstrate using Local Overrides to improve the performance of a website.
• Check out another video I made: Improving page performance with Chrome DevTools for a practical use case on Local Overrides.