CODEWITHSUNDEEP
google-chromefirefoxinspectcode-inspection
saicode
saicode

Reputation: 327

'Inspect Element' in Chrome is showing LESS but Firefox is showing CSS

When I am tring to inspect an element of html in Chrome it's showing the LESS file whereas Firefox is showing CSS file. (I am using Bootstrap framework)

How can I see the css reference in Chrome?

Please see the attached screenshot below for what I mean:

CSS in FF but LESS in

Upvotes: 3

Views: 2076

Answers (3)

Hakan Fıstık
Hakan Fıstık

Reputation: 19421

The answer by @Sergey is pretty old, and Chrome has some modifications since that time, here is an update

  1. Open DevTools -> Settings (Press F12 then Press F1)

enter image description here

  1. Disable the option Enable CSS sources maps

enter image description here

Upvotes: 2

Sergey
Sergey

Reputation: 51

Disabling CSS source maps

CSS source maps are enabled by default. You can choose to enable automatic reloading of generated CSS files. (Or Disable source maps)

To disable CSS source maps : Open DevTools Settings (small wheel button in the right corner) and click General. Turn off Enable CSS source maps.

References:

Google Chrome Working with CSS Preprocessors

Upvotes: 5

Steve
Steve

Reputation: 20469

Just encountered the same thing.

Turns out it is a feature in chrome to help those using SASS or LESS.

If you are not using one of these preprocessors, you can delete the bootstrap.css.map file and chrome will show the css file directly, same as firefox

Upvotes: 1

Related Questions