CSS imports do not show in the network inspector
Categories
(DevTools :: Netmonitor, defect, P2)
Tracking
(Not tracked)
People
(Reporter: randomrandom12-ads, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(1 file)
|
15.73 KB,
image/png
|
Details |
no.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0
Steps to reproduce:
HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">@\import "test.css";</style>
</head>
<body>
</body>
CSS in 'test.css':
body {
background-color: red;
}
The whole page should be red if test.css is used
Actual results:
test.css does not appear in the network inspector
Expected results:
In the network inspector, test.css should show as one of the entries. This worked in prior versions of FireFox.
|
||
Comment 1•5 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
||
Updated•5 years ago
|
|
||
Comment 2•5 years ago
•
|
||
Thanks for reporting!
I can reproduce.
Important Note:
- It seems to only happen on localhost.
- Also it only happens for requests from the cache, (With
Disable cacheon, it works.)
|
|
||
Updated•5 years ago
|
|
|
||
Updated•5 years ago
|
I can reproduce this on other websites too,not just localhost. Here is a demo. https://ffxdemo.azurewebsites.net/
It doesn't always happen, but if you refresh enough times, sometimes it won't show. As you mentioned, disabling the cache will make it show.
|
|
||
Comment 4•5 years ago
|
||
Hi Daragana,
Wondering if you could help out with this.
I had quick look into it, we do not seem to get an event from the platform when the CSS request is from the cache.
https://searchfox.org/mozilla-central/rev/9b282b34b5aa0f836beb735656c55efb2cc4c617/devtools/server/actors/network-monitor/network-observer.js#472
Thanks
|
||
Comment 5•5 years ago
|
||
Can it be that this is speculatively loaded early and that is why you do not get the notification? That it is served from cssloader (I do not know all the details about this)
|
||
Comment 6•3 years ago
|
||
I would like to try working on this. I was thinking of trying to see where the css is loaded from and seeing if I can try firing an event when it is loaded from cache. I don't know the details about how the whole file loading/caching process works but I would like to give it a go. If anyone has any recommended starting points they would be much appreciated.
I can reproduce this bug also using <link> tag, when the page is loaded form cache.
Example:
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
Description
•