Chrome 瀏覽器的 source-map 功能

webpack 很是火，它提供的 HMR(hot module replacement) 功能很是棒，修改代碼無需刷新頁面。那麼在 webpack 出現以前，有什麼好的方法呢。

做爲前端開發，Chrome 應該是你們最喜歡的瀏覽器之一，調試代碼很是方便。

這篇文章主要介紹下，Chrome 瀏覽器自帶的 source-map 功能。

若是你的項目已經用 webpack 了，那就不太須要使用這個功能了，webpack 提供的 HMR 功能，開發起來很方便。

<!-- more -->

添加文件夾到 Workspace

右鍵選擇 Add Folder to Workspace

並容許訪問權限

創建 Map

右鍵選擇 Map to Network Resource...，選擇對應的文件。

如此便已有了 source-map 功能

只須要創建某個 map 的文件，Chrome 會爲把整個目錄下的文件都創建 map 關係。

嘗試修改

選擇某個文件，修改代碼，cmd + s 保存，而後你會發現編輯器裏的代碼也更新了。

或者，更新編輯器裏的代碼，cmd + s 保存，網頁中的代碼也相應的更新了。

固然它並無 webpack 這樣的 HMR 功能，若是想看到代碼更新後的效果，仍是須要刷新頁面的。

真正用途

可能在對於 js 代碼來講以上的 map 用處彷佛並不大。

因此這個功能大可能是在修改 css 代碼的時候使用，

你能夠直接看着頁面，在控制檯修改 css 代碼就行了，都不須要去修改編輯器裏的文件了。

Chrome 的這個功能還支持 sass，能夠 map 到源代碼，若是寫 sass 的話，強力推薦。

其實你還能夠在控制檯刪除，增長文件，參考 Workspaces - Persistent authoring in the DevTools。

原文連接 http://xwartz.github.io/pupa/2016/06/chrome-sourcemap/