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?

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">