前端線上調試

一、fiddler

Fiddler是一款HTTP協議調試代理工具，它可以抓取記錄本機全部HTTP(S)請求，經過設置斷點等方法咱們能夠任意修改進出Fiddler的數據（cookie,html,js,css）完成測試。其原理以下圖，咱們僅須要修改Proxy中收到的數據就能夠模擬客戶端和服務器的交互，完成一系列Mock測試。

當咱們須要測試線上產品時，咱們能夠用本地文件替代請求返回數據。例如：當http://127.0.0.1:8080返回index.html文件數據，Fiddler會對http://127.0.0.1:8080進行攔截，而後用本地index.html替換response。以後就能夠在控制檯替換文件上打斷點進行調試了。

原始頁面

替換後的頁面

可是，當前端項目通過webpack或者gulp等打包工具編譯後，代碼被合併壓縮了，沒法使用上述方式準確替換response。固然，解決辦法仍是有的，請繼續往下看。。。

參考：
https://juejin.im/entry/586b3...

二、source-map

線上產品代碼通常是編譯過的，前端的編譯處理過程包括不限於

• 轉譯器/Transpilers (Babel, Traceur)
• 編譯器/Compilers (Closure Compiler, TypeScript, CoffeeScript, Dart)
• 壓縮/Minifiers (UglifyJS)

這裏說起的都是可生成Source Map的操做。

通過這一系列騷氣的操做後，發佈到線上的代碼已經面目全非，對帶寬友好了，但對開發者調試並不友好。因而就有了Source Map。顧名思義，他是源碼的映射，能夠將壓縮後的代碼再對應回未壓縮的源碼。使得咱們在調試線上產品時，就好像在調試開發環境的代碼。

2.一、開啓chrome瀏覽器支持source map配置

2.二、webpack生成source map

devtool: 'source-map' //增長映射文件，能夠幫咱們調試代碼
devtool: 'eval-source-map', //不會產生新的文件
devtool: 'cheap-module-source-map', //不會產生列，可是是一個單獨的映射  
devtool: 'cheap-module-eval-source-map' //不會產生新的文件，集成在打包後的文件裏

沒有生成source map是這樣子的

生成source map

雖然source map這一功能方便咱們線上調試，可是問題也就出來了，生成source map的項目部署到線上後用戶也能看到源文件，這樣確定是不行的，難道每次線上調試完沒問題了就關閉webpack source map再打包部署一版嗎？是否是很麻煩？

參考：
https://juejin.im/entry/5bbff...
https://www.jianshu.com/p/2fd...