在现代web开发中，往往我们会借助类似sass,less之类的预处理器来加快开发进度，但是随着项目的增大，你可能无法清楚明确地知道一个css rule到底是从哪个less/scss文件中编译出来的，这反而会大大降低工作效率。

幸运的是google chrome的开发人员借助传统c/c++语言开发经验，使用sourcemap来完成less/scss源程序和最终输出的原生css之间的对应关系，这将大大方便开发人员直接找到对应的less文件进而做修正或者新功能开发。

在这种情况下，我们又会碰到另外一个问题，那就是：虽然上面的场景很好用，但是频繁地在场外编辑器中修改less文件，自动编译注入css，但是你却不能在chrome dev tools中在定位到less文件代码后直接修改，并且触发编译和注入，这个多少也不是很方便。再次很幸运的是google chrome开发人员也想到了这个问题，他们提供了一个非常棒的功能：直接在dev tool source table中修改代码，并且永久保存！！！

这个只需要在source table中右键先add一个local folder到文件系统，随后再map一个个文件（建立sourcemap中的less文件到local folder的映射关系），完成这个工作后，一切工作皆可以在chrome dev tool中完成~，是不是很棒？

https://developer.chrome.com/devtools/docs/workspaces

http://pmuellr.blogspot.co.id/2013/10/sourcemap-best-practices.html

本人在vuejs开发app时使用 chrome 56.0.2924.87版本能够自动识别javascript sourcemap用起来很棒棒,出现错误就直接在console中列出文件+line number，一点击就可以到对应代码位置，效率非常高

https://www.dannycroft.co.uk/enabling-source-maps-in-chrome/

http://blog.teamtreehouse.com/introduction-source-maps