在現代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