Tracking down missing image

[Lawrence San]

I just spent many hours tracking down an error -- I finally solved it but I'm wondering if there was a more efficient approach.

It started when Firebug's Net panel alerted a missing GiF on the dev server. The link in the Net panel pointed to the HTML file, but a quick search revealed there was no image by that name being requested. Then I methodically went through all the JS and CSS files linked into that HTML page, and finally I searched the whole site, and there was no image by that name in any of the code.

Then I looked in the site's graphics folder, and I saw that a lot of the image filenames were somewhat similar, occuring in semi-irregular series or patterns (like FormDev_01_up.gif, FormDev_02_over.gif, etc.). Most of those filenames didn't exist anywhere in the code, yet the images were loading, so I finally realized that many of the filenames in the requests were being generated _dynamically_ by the JS. That's why I couldn't find the missing filename by searching all the code.

Eventually I discovered, inside one of the linked JS files, that a loop inside a function was using multiple regular expressions to generate and then concatenate parts of the filenames, and there was a problem in one of the regexps, so it was requesting a nonexistent gif. When I finally deciphered the regexp and added just a couple of characters, the problem went away. But it took forever because I had to figure it all out manually -- even after I realized that the filenames were being generated dynamically, I still had no idea which function or loop or regexp I should be looking at. (There was a lot of JS.)

Was there some more efficient way to do this, rather than just poking around for hours as I did? I didn't use Firebug's debugger because I wouldn't have even known where to put the breakpoint, or even which JS file was the culprit. This all started with that error in Firebug's Net panel, which I don't know very well -- is there some way to have it tell you more precisely where the request is actually coming from, not just what HTML file is supposedly requesting it?

[Sebastian Zartner]

Firefox unfortunately doesn't expose this information yet, so Firebug can't display it. Though there's already bug 563623 asking to add an API for the request's origin.

Sebastian