Test Local Background Image on Live Site with Chrome Dev Tools?

Asked 16/7, 2014 at 16:5 Answered 30/8, 2020 at 10:53

Solved css image google-chrome testing google-chrome-devtools

Is there any way to use Chrome dev tools to test different images? I have created a new background graphic and I would like to test it on a live site that already has a background graphic on the <body> tag. I don't want to change the live site yet, though. Just test it to see what the new image looks like. Is this possible?

Andorra answered 16/7, 2014 at 16:5 Comment(1)

Possible duplicate of Google Chrome Extensions - Can't load local images with CSS – Ocd 5/2, 2017 at 12:25

-1

~~You can replace the url of the background image in the Elements panel with the url of the image you wish to try. Check this link to see how that is done.~~

This change will show effect immediately in your browser window. As Johan Linder mentioned, you will have to host the image somewhere in case you have the image on your computer.

nate wilton's answer correctly points out how to do this using a Chrome extension.

Misconceive answered 17/7, 2014 at 8:58 Comment(3)

Hosting the image somewhere is not necessary, just use the file:// URL (unless the page has a strict content security policy in place.) – Voltaire 17/7, 2014 at 12:53

I couldn't get file:// to work. I opened the local image in Chrome and copied the url (file:///Users/mcarroll/Desktop/SLAM!/BBB/background.png) into the background image attribute, but it still wouldn't load. I ended up just uploading the file to another site, copying the URL, and then pasting it into the attribute. That worked fine. – Andorra 17/7, 2014 at 14:29

@mcography: you're right, Chrome's security policy does not allow you to load local resources. I don't think there's any way to change this. – Misconceive 17/7, 2014 at 15:43

Here is the answer, courtesy of Rob Donovan @ superuser (via https://superuser.com/a/839500/454034)

Since you mentioned 'Chrome', you could use Chrome extensions to do this, to enable local access to your files.

Follow these steps:

1) In the local folder where your image(s) are, create this file called 'manifest.json' and enter this:

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) Put this is your chrome address bar: chrome://extensions/

3) Make sure 'Developer mode' is checked (Top right of page)

4) Click the 'Load Unpacked Extension' button

5) Navigate to the local folder where the image(s) and the manifest.json file is, click ok

6) The extension 'File Exposer' should now be listed in the list, and have a check mark against 'Enabled'. If the folder is on a network drive or other slow drive or has lots of files in, it could take 10-20 seconds or more to appear in the list.

7) Note the 'ID' string that has been associated with your extension. This is the EXTENSION_ID

8) Now in your HTML you can access the file with the following, changing the 'EXTENSION_ID' to whatever ID your extension generated:

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

Note, that the *.jpg is recursive and it will automatically match files in the specified folder and all sub folders, you dont need to specify for each sub folder. Also note, its Case Sensitive.

In the 'img' tag you don't specify the original folder, its relative from that folder, so only sub folders need to be specified.

If you modify the manifest.json file, you will need to click the 'Reload (Ctrl+R)' link next to the extension.

Theorist answered 8/6, 2015 at 13:54 Comment(3)

Does this only work for foreground images? I'm trying to add to CSS but I can't see it working. I'm wondering if it will only work on the img tag? – Livingston 26/8, 2016 at 20:15

This is great thanks. I've used this technique to hook up local css. Is there anyway to see live updates or a way to refresh the css without loading the dom which reverts to the old reference? – Saavedra 8/3, 2017 at 0:4

@Livingston it works in the tag and in the CSS section of the dev tools. I didn't try to put that in the CSS file if that's what you mean. – Footstool 16/1, 2022 at 10:32

Another option would be to start a simple http server.

In your terminal (or command prompt), cd into the directory where your images are saved and then type python -m SimpleHTTPServer for Python 2.

For Python 3 use the following command: python -m http.server [<portNo>]

Now you can reference the images in dev tools using http://localhost:8000/filename.jpg.

Leopoldine answered 30/8, 2017 at 23:9 Comment(5)

Just used this. Very nice workaround. I wonder why it's now the policy (wasn't back when I started on the web). Also seems silly if it was a security fix to allow "localhost" – Schematism 4/4, 2018 at 13:17

smart, simple, and, above all, fast – Plataea 20/2, 2019 at 14:42

Wish i read this first. The chrome extension is a clever solution, but this is much simpler for those with a readily available http-server command. – Peterpeterborough 14/2, 2020 at 14:42

This is the real solution right here, wow, change my life forever. Takes literally 2 seconds. Bravo. – Sanferd 8/8, 2020 at 17:20

Wow, had no idea this was possible, so usefully quick and easy! Much obliged. – Shrew 4/6, 2022 at 6:32

This is not an exact answer to your question, but one way you could do it is to use something like dropbox public folder. Once the image is in the folder you can just right click and copy a public url to use in the dev tools.

Ahmednagar answered 16/7, 2014 at 19:42 Comment(4)

For the sake of usability/ease of finding a solution, this is a fantastic answer. Thanks. Far less effort than the extension hack. – Beech 18/5, 2017 at 21:29

I can't comment on the above because of stack-o's reputation system, but the dropbox method stated above no longer works. As of September 1, 2017 public links have been disabled for all users. – Sunshade 1/12, 2017 at 18:18

As the link in this answer now says, there are no more public Dropbox links. – Humor 1/12, 2017 at 18:32

imgur works too if you don't care about sharing publicly – Maguire 7/4, 2018 at 16:20

I think the best and simplest solution is to convert your image into Base64 (you can use any online/offline tool for that) and then just paste the output inside DevTools.

If you need it in an IMG tag, do it like that:

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

If you need it as a background image, you can do it like that:

.background {
  background-image: url("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==");
}

Carnivorous answered 7/1, 2020 at 17:19 Comment(0)

My, what a difference six years makes! Found this drop-dead-simple method at https://umaar.com/dev-tips/174-drag-drop-image-local-overrides/

Open the Chrome inspector preferences.
Check "Enable Local Overrides."
Locate the original image in the html.
Right-click the file path, and choose "Locate in Sources Panel."
With the image selected in the left panel of the Sources panel, drag the replacement image from your desktop and onto the preview panel on the right.
As you hover, you'll see a dotted outline with the text "Drop image file here." Drop image file there. ;-)
You may need to refresh the page for the new image to display. Yes, it will persist as long as the Inspector is open and "Local Overrides" is enabled.

NOTE: The file name will not change in the browser, but the new image will display where the original one displayed previously.

Replete answered 30/8, 2020 at 10:53 Comment(1)

Finally, This worked for me..!! Easy and Just drag & Drop thing 👍 – Olwen 2/4, 2021 at 11:25

-1