how to know what images used on current html page

Question

I remember that I ran into a browser plugin, but not sure which browser that was, that can tell the user what images being used and their details.

I believe firefox does this by page info feature, but is there a similar way using more accurate plugin on either chrome or even firefox...!!

any idea!!

Answer 1

The developer's console on Chrome can be used for this. Hit F12 when viewing a page and look in the "Frames" section in the left pane. If you expand the item representing the page you are looking at you should see listings for "Images", "Scripts" and "Stylesheets" used for the page. Note that some media items may be variably deep within the tree.

The "Network" section also lists these resources, as well as their individual load times, size, where they were called from, the method used to call them, etc. You can sort by type and look for the images' mime type. The only downside to this page is that it is less condensed.

P.S. The developer's console is not a browser plugin. It comes with Chrome, stock, and is actually a feature in all major browsers, including Firefox and IE, and can be accessed with F12 in each.

Answer 2

For Firefox - the best choice is the "Firebug". You can download it from here -> http://getfirebug.com/ After you have it installed - you need just to press F12 while browsing to open the Firebug. Via Firebug you can edit, debug, monitor CSS, HTML and Javascript. You can select the image of interest and inspect its properties. If you are using Chrome or IE - you can do the same using F12 again but I think Firebug is the best choice for debugging and inspecting web pages.

Hope it helps!