How to add a file from my filesystem to chrome inspect element dev tools?

Question

I'm trying to edit a webpage I have online access to using inspect element, and chrome developer web tools.

I would like to add an image from my local filesystem to the webpage. How might I do this?

Argonaut

Answer 1

Open inspect element, and head over to the Sources tab. Now click on the Filesystem tab (within Sources), next to Page.

As shown below, you'll see a button that says, Add folder to workspace. Click it, and add the folder containing the file you want to add to the page.

Now if you right-click on the image, you'll see that you can get a data URI representing it.

You could use that in place of a link in an img tag's src, like so: <img src="YOUR DATA URI">

Argonaut

Excellent answer! Just a hint: If you add the folder, chrome might ask you if you give permission to add it in a top bar (I didn't notice that and thought this answer doesn't work any longer). – Stabilizer

Update: The Filesystem tab no longer seems to exist: use the Workspace tab instead – Adiell

Answer 2

There is a newer chrome method called "Local Overrides" which enables persisting objects during inspector sessions described here: https://mcmap.net/q/466715/-test-local-background-image-on-live-site-with-chrome-dev-tools

Skirt