以前最常用的前端調試方法console.log();想調試的時候在代碼中加入console.log()，然后npm start一下，幾乎解決了全部問題。然而最近工作中發現項目不能在本地運行了。只能打包到環境去測試。接下來就涉及到一個source maps的知識點。
當使用到webpack后，所有代碼都打包到了一起，開發環境中的源代碼經過壓縮，去空格，babel編譯轉化后，得到適用於生產環境的項目代碼，這樣的代碼與源代碼差異很大，這時候想要調試這些代碼簡直是一場噩夢，這時就需要用到Source Maps來定位到開發中的代碼。Source maps是一個存儲源代碼與編譯代碼對應位置映射的信息文件。也就是說使用了source maps之后我們就相當於在自己寫的代碼里面調試了。
chrome瀏覽器，在Developer Tools的settings中設置，將enable javascript source maps 和enable css source maps勾選（默認有）這樣瀏覽器就支持source maps了。
然后是生成map文件 ，在webpack.config.js中設置devtool：‘source-map’，
然后npm run build之后會生成.map文件
此時打開瀏覽器應該就可以看到自己寫的源碼了，我用火狐試了一下是可以的，然而chrome失敗了。。。。。。
后面在網上找到一個方法，試了一下用 inline-moudle-source-map
終於成功了。
