对于使用 Web Essentials 2013 (2.5.3) 的 ASP.Net MVC 项目,如何配置 LESS 源映射以与 Chrome 一起使用?
How do I configure LESS source mapping to work with Chrome for a ASP.Net MVC project that uses Web Essentials 2013 (2.5.3)?
在Visual Studio2013年Tools > Options > Web Essentials > Less
下设置如下:
在Visual Studio2013 中查看Web Essentials 2013 提供的并排视图的.less
文件,编译后的版本在底部有一个源映射link:
但是,当 运行 解决方案和加载 Chrome 时,我所看到的只是 .less
文件的编译版本:
Chrome 开发者工具设置显示正确:
所以不要认为这是问题所在。根据 Rob Dodson,选择元素后单击行号的预期结果是看到未编译的 .less
,如下所示:
这可能是捆绑问题吗?也没有运气调查过。
也许您应该在 WebEssential 扩展中启用 BrowserLink 功能。在我的工作区中,此设置位于“Start debug”按钮和“Configuration manager”
之间的标准栏中
我遇到了与您类似的问题,以下是我发现的问题,包括解决方法:
Web Essentials 2013 (WE2013) 生成文件名格式为 $filename$.map 的地图文件。因此,如果说您的文件名为 global.less,WE2013 将生成一个 global.css.map 文件。
Chrome Dev Tools 在您生成的 css 文件末尾查找引用映射文件的注释。例如:/*# sourceMappingURL=global.css.map */
不幸的是,Chrome Dev Tools 在包含与生成的 css 文件(在本例中为 global.css)同名的地图文件上阻塞。如果您手动将地图文件名从 global.css.map 更改为 global.less.map,这将正常工作。您必须记住将生成的 global.css 文件中的注释行修改为 /*# sourceMappingURL=global.less.map */
这显然不是解决 chrome 开发工具中 less 文件故障的理想工作流程,但我希望 WE2013 的人会发布一个补丁,允许地图文件名由用户指定,或自动生成格式为 filename.less.map 的格式。不过,在此之前,如果您仍然投资于 WE2013,那么您可以使用上面的解决方法来解决这个问题。
在Visual Studio2013年Tools > Options > Web Essentials > Less
下设置如下:
在Visual Studio2013 中查看Web Essentials 2013 提供的并排视图的.less
文件,编译后的版本在底部有一个源映射link:
但是,当 运行 解决方案和加载 Chrome 时,我所看到的只是 .less
文件的编译版本:
Chrome 开发者工具设置显示正确:
所以不要认为这是问题所在。根据 Rob Dodson,选择元素后单击行号的预期结果是看到未编译的 .less
,如下所示:
这可能是捆绑问题吗?也没有运气调查过。
也许您应该在 WebEssential 扩展中启用 BrowserLink 功能。在我的工作区中,此设置位于“Start debug”按钮和“Configuration manager”
之间的标准栏中我遇到了与您类似的问题,以下是我发现的问题,包括解决方法:
Web Essentials 2013 (WE2013) 生成文件名格式为 $filename$.map 的地图文件。因此,如果说您的文件名为 global.less,WE2013 将生成一个 global.css.map 文件。
Chrome Dev Tools 在您生成的 css 文件末尾查找引用映射文件的注释。例如:/*# sourceMappingURL=global.css.map */
不幸的是,Chrome Dev Tools 在包含与生成的 css 文件(在本例中为 global.css)同名的地图文件上阻塞。如果您手动将地图文件名从 global.css.map 更改为 global.less.map,这将正常工作。您必须记住将生成的 global.css 文件中的注释行修改为 /*# sourceMappingURL=global.less.map */
这显然不是解决 chrome 开发工具中 less 文件故障的理想工作流程,但我希望 WE2013 的人会发布一个补丁,允许地图文件名由用户指定,或自动生成格式为 filename.less.map 的格式。不过,在此之前,如果您仍然投资于 WE2013,那么您可以使用上面的解决方法来解决这个问题。