Why does Chrome devtools show these folders in orange and in italics?

Question

I\'m looking at the \"Sources\" tab in Chrome developer tools. Some of the folders are orange and in italics. How are those different from the \"regular\" folders (shown i

Answer 1

Fonts seem to be in Green. At least .woff2

Answer 2

Folder color

• Blue - Regular folder, not contains any source maps files
• Orange - Folder contains files having source maps attached (.less/.css or .ts/.js)

Resource color

• Yellow - JS
• Violet - CSS & Fonts
• Green - Images
• Grey - HTML