Google Chrome "Failed parsing SourceMap" : css.map (Web Essential)

css google-chrome less source-maps web-essentials
Md. Alim Ul Karim picture Md. Alim Ul Karim · Mar 21, 2016 · Viewed 44.5k times · Source

Visual Studio 2013 UP5 + Web Essential's (v. 2.6.36) generated css.map files are invalid in "Google Chrome", however it is valid in "Firefox". Due to this it became impossible to debug less files in google chrome. Failed parsing SourceMap : css map files

Currently, I am using Web Essential 2.6.36 (+ Visual Studio 2013 Up5). I can disable the source map from google chrome's developer's setting. Which will remove those errors, however still we cannot debug less files and change the style. Which is a terrible problem.

Google Chrome Developers tools: disable source map parse

Any advice will be appreciated. Thank you in advance.

Answer

PeterMacko picture PeterMacko · Mar 22, 2016

Problem is that WebEssentials saves files in UTF8 with BOM, but Chrome is not able to open these files as .map files.

As a temporary fix, you can go to your .map file in Visual Studio and save it as a Unicode (UTF-8 without signature) or US-ASCII using 

File -> Advanced Save Options -> Unicode (UTF-8 without signature) or US-ASCII.

It is possible that on changing the associated .css file you will have to repeat this process. However, when I tested adding some rules to .css the correct format was preserved for the .map file.

I reported this on WebEssentials GitHub: Issue 1993

And there are some other reports:

Related questions

less.js not working in chrome

I noticed that less.js is working in firefox but not in Chrome, or is it because I made an error? <link rel="stylesheet/less" href="css/style.less" /> <script src="http://lesscss.googlecode.com/files/less-1.0.21.…

Read More
How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More