Search code examples
htmlgoogle-chrome-devtoolsfirefox-developer-tools

Finding source of second call to own page in devtools

Debugging a page where I see that there are two calls made to the page, one is the initial call and one is made when the first has been recieved and the browser parses the document. I am however having trouble finding the source of the second call. I have built the javascript i dev mode so I have sourcemaps but the call seems to be originating from the html code itself. Looking in the Network tab of devtools I see this Chrome devtools in Chrome and this

enter image description here in Firefox

Firefox seems to identify the Initiator as image but no more details as to what image.

What should I look for in the code to find the source of the call? Is there something else I can do to get more details of where the call is made from?

Update: Clicking the initator item in Chrome marks the first Doctype line in the document enter image description here

Solution

  • That the request is recognized as an image is an indication for either an <img> HTML element or a url() CSS function that has a URL that references the document itself instead of an image.

    Check the HTML

    From my tests, this does not happen when the src attribute is empty but it happens when you set it to an anchor on the page.

    So, in order to find the culprit, go to the Inspector (Firefox) or Elements (Chrome) panel, press Ctrl+F (Windows, Linux) or Cmd+F (macOS) and search for img[src^="#"]. That finds all <img> elements that have a src attribute with a value starting with a hash.

    Check the CSS

    Browsers (incorrectly) send a network request when the CSS url() function is set to an empty string, i.e. url(), url(''), or url("").

    To check whether it is set within the style attribute of one of the HTML elements, search for url('') and url() within the Inspector as described above.

    If it cannot be found there, you need to search within the style sheets.

    Chrome

    In Chrome this is possible by pressing Ctrl+Shift+F (Windows, Linux) or Cmd+Shift+F (macOS) while the focus is within the DevTools. Doing so opens a search tool that allows to search across all loaded sources. Type url('') in there and hit Enter. If nothing is found, try it again with url("") and url().

    Firefox

    In Firefox there's no such global search yet (as of Firefox 85), unfortunately. Though there are two ways other ways to search through the style sheets.

    1. Via the Style Editor
      The Style Editor allows you to inspect the style sheets, though you have to search in each one separately by selecting it at the left side and then pressing Ctrl+F (Windows, Linux) or Cmd+F (macOS), typing url(), url(''), or url("") and hitting Enter.

    2. Via the Network Monitor
      There's a feature that allows you to search through the network request reponses within the Network Monitor. Click the magnifying glass button, which opens the search tool. In the input field type url(), url(''), or url("") and hit Enter.