Earlier today I was tasked with finding and fixing broken images on a retailer’s website, where there were of course thousands of images to go through. Here’s what I did to see and fix all the broken images (and the links pointing to them)…
In this case all image links were stored in a database that I was able to access via phpMyadmin. As I could see all the field names I was able to create a “background” webpage on the site that just looped through all the results found when the image link field name was queried. So one webpage that spat out all 8500+ images on one page. Yes it was massive in file size and took about two minutes to render them all.
I was right away able to see all the images on one page and scroll down through them all to find the missing links images. But even doing this quickly, the scrolling still would have taken an hour or more. Fortunately I remembered a setting in the Web Developer Toolbar I use from time to time.
That’s right… with the seemingly never-ending page loaded in front of me, I was able to right-click and choose Web Developer > Images > Find Broken Images. The plugin whirred away for a moment and then beautifully displayed the information I was looking for.
I suspect web developers all ready know of the Web Developer Tools by Chris Pederick. I’m just posting this today as reminder so that one day you may be faced with a gargantuan task which can be reduced to a few clicks. Thanks Chris!
If anyone knows if the above task can be accomplished in the regular browser dev tools please let me know below in the comments. I’m most familiar with Chrome and Firefox dev tools.