Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 743
John Wu Avatar asked Apr 25 '17 01:04

John Wu


People also ask

What is orange in Chrome DevTools?

The colors are the following: Orange is Margin. Yellow is Border. Green is Padding.

How do I fix dev tools in Chrome?

# Open the Issues tab Open DevTools. Click the Go to Issues button in the yellow warning bar. Alternatively, select Issues from the More tools menu. Once you're on the Issues tab, click the Reload page button if necessary.

How do I change DevTools color in Chrome?

Changing the color theme from SettingsOpen DevTools, and then select Settings (the gear icon). Select Preferences, and then in the Appearance section, select a theme from the Theme dropdown list.

How do I change the DevTools font in Chrome?

Go to Experiments Tab through Chrome DevTools. Check Enable New Font Editor Tools within Styles Pane. Close the DevTools window and open it again. Select the HTML element, which includes the font properties you want to change.


1 Answers

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
like image 56
Ninja Avatar answered Sep 21 '22 03:09

Ninja