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?
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.
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.
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.
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==");
}
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.
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.
Related
I am currently trying to use CSS to stylize my application in Apex 5. The problem I am having is that when I write my CSS code in the "inline" section of any page in the application, then the CSS code works, but if I write the CSS code on Notepad and then upload the file and reference the file within my application, then the CSS code does not work. I have written several lines of CSS code, so I'll just post one small section of it as a sample so that you all can see my format:
body{
font: bold 12px/16px "Times New Roman";
}
I have uploaded the file in the Static Application Files section of the Shared Components page of the application. I have then tried referencing the file in different places, such as at the page level and user interface level, but nothing has worked so far. I'm very new to CSS, so any insight would be greatly appreciated. Thank you in advance!
After uploading the file have to be displayed in the list of static files. The list of files have a column Reference, which contain a string like this: #APP_IMAGES#test.css. Copy this string and put it, for example, on the page in the section CSS - File URLs. This should work.
Then make sure that file reference works. Open your page and take a look on a list of CSS files. The same functionality is present in all browsers, but it is accessible by different ways. In IE:
Press F12.
Open Network tab.
Press "Enable network traffic capturing" (a green triangle in the left top corner).
Reload the page. A list of files appears.
Find your file in a list:
If the file is not present, then you copied an incorrect link, or you copied it into an incorrect place, etc.
If the file is present, normally it should have status 200 (the Result column). If a status is not 200, there could be a lot of reasons (depending on the status).
If the file is present with the status 200, your CSS property doesn't work, because it is overridden with another CSS. To define with which one, go to the Dom Explorer tab.
You can try this approach:
On server, go to ORACHE_HOME/apex/images/css (path can be different, but you can find it by .css extension)
Put you file here
Id editor, in page properties, go to the CSS -> File URLs section
Write path like this: /i/css/new.css (i - in general, alias for your images directory)
I'm working on a complicated site that has a lot of css files and js files that load on every page. I'm working on a single css using Chrome's developer tools. Once the css is mostly correct in developer tools, (Element tab, Styles side bar), the css is copied to a local css file and then uploaded to the web server. Since only a single css file has been modified it would be faster to reload a single css file instead of hard refreshing and reloading the entire site including images, js, and css, etc.
The site has an option to minify the css file and combine it with the other css files, creating one single very large css file. That option is turned off while in development mode. Adding a version number to the css file name isn't the trick I'm looking for.
Is it possible in Chrome Developer tools to click on a source file and refresh only that file?
This is a bit of a hack, but I think it'll work for your scenario.
When I initially load an example page, you can see three CSS requests:
I want to refresh the devsite-googler-buttons.css file, so I find it in my DOM Tree:
(Command+F on Mac or Control+F on Windows / Linux opens up that search panel at the bottom of the Elements panel... makes it easier to find stuff in a big DOM)
Right-click, select Edit as HTML, and then append a random query string to the end of the link:
And in the Network panel, you can see that the file was re-downloaded:
See also: Konrad's answer provides some handy code for automating this via a Snippet.
It might be handy, in your situation, to automate it a bit:
function reloadCSS() {
const links = document.getElementsByTagName('link');
Array.from(links)
.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
.forEach(link => {
const url = new URL(link.href, location.href);
url.searchParams.set('forceReload', Date.now());
link.href = url.href;
});
}
reloadCSS();
What this function does is it forces all CSS files to be reloaded by appending current time to their URLs.
You can modify it to target a specific file. You can run it from console, via DevTools 'snippets' functionality or make it into an extension.
If you don't mind refreshing the page, but don't want to re-download all resources, try the following.
Open the css file in a new tab. (You can right click css files from the Chrome developer tools and choose "open in new tab");
Hard-refresh this tab (ctrl/cmd + f5);
Soft-refresh the page (f5 or ctrl/cms + r).
According to me only Live editing is the only possible way what you are looking for I suppose. There is no way to refresh a single css file.
I have just started exploring the possibility of saving changes made to a page and it's styling in Chrome Dev Tools on the fly.
I've followed this short video tutorial on mapping the project files on disk to the Dev Tools via the Sources tab. Everything works fine until around the 5:17 point where he selects an element in the Elements tab and makes several CSS style changes which automatically persist to the file on disk.
This doesn't work for me. The changes won't save to the file and when I refresh the page reverts to the original styles. I have checked to see if there is an asterisk beside the corresponding CSS file in the Sources panel, to denote changes have been made, but there is nothing there.
I have also tried the solution posted in this SO question but I don't see the link to the stylesheet after editing the style in the Elements tab that will redirect back to the file in the Sources tab allowing the changes to be saved.
Can anyone tell me what I am missing? Thanks!
You need to make sure you map your Workspace to a Network Resource to persist changes automatically. I have produced the steps below to get this working correctly.
Select the folder in Sources and click 'Add Folder to Workspace'
If you open up our stylesheet in Sources and go to the Elements panel to make changes, upon coming back you will see a separate instance of the stylesheet opened with pending changes. The reason is that Chrome doesn't know how to map the URL to the file on your system yet.
Select 'Map to Network Resource...'. You will notice that 'top' disappears.
Make a change in the Elements panel now. When you go back to the Sources panel, the changes will automatically be shown without requiring any explicit save.
You can see exactly what was done by going to the Workspaces section of the DevTools settings panel. We've added a local Workspace, and then mapping the URL, which in my case is on my computer and accessed with the file:// protocol, to the relative path on the system.
When i did inspect Element on one of the website logo. Image src is as follow.
src="/WSDNPortalTest/Content/themes/images/THP_img.jpg"
Now, I want to try different logo, that i have in my local machine folder.
Is it possible to do that? Advice me. Thanks
It is not possible to inspect and put up your local image. However, you can follow the following steps to achieve the desired result:
Put your image on Google Drive or any other storage server
Generate a sharable link for that image
Inspect the element in your browser
Change image src from src="/WSDNPortalTest/Content/themes/images/THP_img.jpg to src = "sharable-url-here.jpg"
This is how you can achieve the same effect
You can't, but the change will only be valid in that Inspect-session on your local machine. The www would like quite different if it was that easy to change a website! ;-)
see also: How to display local images placed on client machine in HTML webpages
BUT: you could save the entire page using File/Save As and then edit the code locally and replace the downloaded image with your own.
My asp.net project has several .png (and a few .gif) files in the \Content\Images folder.
Two are not found; Chrome Dev Tool's Console tells me: "Failed to load resource: the server responded with a status of 404 (Not Found)"
...and sure enough, if I click the links that it shows (e.g., http://localhost/#System.Configuration.ConfigurationManager.AppSettings[%22ThisApp%22]/Content/Images/PlatypusorangeSprite.png) it takes me to GDT's Resources tab, and although the Images folder shows that file as being there, but there is a "broken image" representation of it.
The same thing happens with just one other image file (they are all in the same location, and the references to them, in CSS file declarations, is indeed pointing to where they exist, such as:
background:#E5EDFE url('/#System.Configuration.ConfigurationManager.AppSettings["ThisApp"]/Content/Images/PlatypusorangeSprite.png') repeat-x 0 -369px;
I can 2-click those files in the VS2010 IDE, and they open up and seem to look fine.
So why are they not being found at browsetime/seen as broken images?
UPDATE
Well, apparently it's got someting to do with my moving all the style declarations out of the cshtml file into a separate stylesheet/CSS file that is referenced in the page (I went back to the bad old way and it works fine - the pngs are found again (I even imagined that I heard them singing "Amazing Grace")). Since it is not a relative path to those pngs, why would it matter that the style info is in a .css file in the Content folder as opposed to being "inline"?
I hate it when you do the "right" thing and it makes things worse.
Some clients accidentally transform suffixes to big letters like .JPG or .PNG. If you call them by .jpg or .png, it will not match.
Render your template by compiling in Visual Studio, open your browser, look into your HTML and check the rendered path of your image:<image src="..." />. Alternatively, try to call the image direcly via ftp by url in browser like ftp://www.mysite/pics/ for example and click on link, that shows the image. Then you get the correct path in the url.
Also check if the suffix ist accidentally doubled like mypic.jpg.jpg.
Any case sensitivity discrepancies,perhaps?