Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple GET requests for the same CSS file in Firefox Inspector

Tags:

html

There is only one place in my page that links to this css file:

<link rel="stylesheet" href="http://domain.com/css/23beac5f7ba9d3e94ba463892e86b2ff.0.1.css">

However, when viewing the network tab in Firefox's inspector, it is counting two requests for this file (which exists), and also counting the size of the css file twice in the total size of all files requested.

Two CSS requests

The request at the end in this screenshot loads last, and takes a while longer than the rest of the requests to appear. The only thing I notice different about the two is that the last one under "Cause" has a "JS" symbol next to where it says "stylesheet". I do not know what that means or why it's there.

Any suggestions as to what might be causing my css file to load twice like this?

like image 393
MultiDev Avatar asked Jan 08 '17 04:01

MultiDev


People also ask

How do I inspect CSS in Firefox?

An easy way to inspect a specific web element in Firefox is to simply right-click on that particular element and select the Inspect Element option. It will directly open Developer tools including the editor, Console, Sources, and other tools as shown below.

How do I find the CSS of a website in Firefox?

To view user-agent styles (i.e., browser-default CSS rules), enable “Inspector > Show Browser Styles” under the developer tool settings panel.

How do I fix CSS errors?

Replace broken CSS files with those ones that return 200 HTTP status codes or remove them. What else should be considered to fix the problem: Try to clear your browser's cache. If the page returns 5xx errors, the problem may be on the server: it's not handling the traffic because it's too slow or misconfigured.


1 Answers

Might be this bug : https://bugzilla.mozilla.org/show_bug.cgi?id=1306892

If you opened the Inspector or Style Editor before opening the Network Monitor, it triggers additional requests to CSS files that unfortunately show up in your requests list.

To verify this:

  • select Net Monitor in FF Devtools
  • close devtools
  • reload your site
  • open devtools

Devtools should open on the Net Monitor tab directly and you should not see any duplicate request.

like image 180
Julian Descottes Avatar answered Sep 25 '22 17:09

Julian Descottes