Any tool available to detect what's not HTTPS on an encrypted page?

Question

More often than I like when designers edit some of our sites' pages, they include javascript or an external image our SSL pages that are not encrypted. For example if we have a page like this:

https://www.example.com/cart/EnterCreditCard

And the designer includes some non-encrypted image like this:

<img src='http://www.cardprocessor.com/logo.gif' />

Of course, this creates errors in all browsers:

• IE: Do you want to view only the webpage content that was delivered securely?
• Firefox: Connection Partially Encrypted
• Chrome: (I forget this message)

What I'm looking for is a tool or plugin that lets me easily see what objects are not encrypted. A firefox extension or something along those lines would be great.

Edit: Ben pointed me in the right direction. If you're using Chrome, do a Ctrl-Shift-J to bring up the developer tools. Then click on Resources to see all the items on the page.

Answer 1

For completeness, since Firefox was mentioned:

If you use Firefox with firebug installed, you see all of the assets downloaded on the Net panel. Hovering over each line gives you the full URL, so you can quickly scan for those http: lines.