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

Ratan

You must have source-mapped those folders. Could also happen automatically if your bundler/compiler retains source maps. – Hexagram

To expand on wOxxOm's answer-- that means that the files are not actually being loaded/interpreted directly by the browser-- rather, there is some stylesheet that was "compiled" by these sources, and via the magic of sourcemaps the source files are being made available for your review in the dev tools-- however, if the dev tools were closed they wouldn't be loaded. – Augustaugusta

See Introduction to JavaScript Source Maps – Olein

Answer 1

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

Laster

Thanks. Can you provide a link to where these a documented by chance? – Historicism

Technically, the orange folder contains the original view of files contained in the blue folder for which a source map exists. – Pacheco

@MarkEdington, see my answer below for a documentation link. Chrome calls these "authored files". – Rusk

Answer 2

Chrome devs call these "authored files" (even when only the folders are colored this way):

Authored. Similar to the source files you view in your IDE. DevTools generates these files based on source maps provided by your build tools.

That's in contrast to "deployed files" (blue directories) -- what the browser actually uses.

From https://developer.chrome.com/docs/devtools/javascript/reference#group-authored-and-deployed

Meaning: Authored files are not really there. It's a tool used by developers to debug their websites and should probably not be visible in production... Only deployed files really matter for the browser to display the web page.

p.s. In the latest Chrome version, the color for source-mapped dirs seems to be more yellow, while .js files are more orange... ¯\_(ツ)_/¯

Entrust

Answer 3

Fonts seem to be in Green. At least .woff2

Intoxication