Menu
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?
224
Right-click on the element you want to change and left-click on “Inspect.” Double-click on the hyperlink in the piece of highlighted code. The hyperlink should end with an image file extension — like jpeg or svg. Replace the hyperlink with a link to your new image and hit Enter.
Locate the original website image in the Sources Panel > Page Pane. Drag and drop your new image from the filesystem over the existing image in the Sources Panel.
Setting up your local folder to store Overrides The Sources tool with insufficient space to display the Overrides tab: Selecting the Overrides tab: Select a folder on your local computer to store the resource files that you want to replace. To search for a folder, click + Select folder for overrides.
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.
87
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.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
