Search code examples
cssfirebug

Determining the Problematic CSS File in Firebug

I have this displayed in my Firebug console

"NetworkError: 404 Not Found - http://********.com/images/slider-img/ajax-loader.gif"

So it's telling me it can't find a background image. But can it pinpoint which CSS file this image has been declared as a background-image property?

I have about 4-5 CSS files being referenced in the document and the manual way of finding it out would to open each of the files and find for this image. So I was wondering if this could be avoided and have Firebug tell me which CSS file is the culprit...

Solution

  • Firebug currently (as of version 2.0.x) doesn't directly show you the initiator of a network request. This requires platform support, which is requested in bug 563623.

    So, as a workaround you can do this:

    1. Switch to the CSS panel.
    2. Click into the search field at the right side of Firebug.
    3. Ensure that the option Multiple Files is checked.
    4. Enter ajax-loader.gif

    => The CSS panel will switch to the CSS source containing the rule containing the image value.

    Notes: There may be several properties referring to different images named ajax-loader.gif. So you should also check whether the path to the image corresponds to the one shown in the error message. (Within the search field you can hit Enter to get to the next match.)

    It's not sure that the request comes from CSS. It may also come from JavaScript, e.g. through an AJAX request or by appending an <img> tag dynamically.