Search code examples
google-chromegoogle-chrome-devtools

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

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 in blue)?

enter image description here

Solution

  • 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