利用 線上環境 在 本地 調試代碼

爲何須要使用線上環境進行代碼調試？

在平常的開發中，當接口文檔出來的時候，先後端能夠獨立的進行開發，前端能夠經過一些線上的mock工具模擬接口，調通頁面，減小聯調的時間。

可是在一些條件下，是須要利用線上的環境調試的：

1. 後接口的數據有作了跨域的限制，或者接口須要線上的登陸身份（cookie之類）
2. 再或者已經部署上線的頁面出bug了，線下開發沒有具體環境調試不了等等。
3. 其餘一些利用線上環境調試更加方便的情景

當咱們遇到這些問題時，簡單的想法是：先在本地估摸着開發，而後再部署上去線上環境看下結果，而後再接着調試，再部署到線上看下結果......這樣子極其繁瑣和不方便。此時咱們考慮一下，是否能夠利用線上環境進行代碼調試？

怎麼作呢？

具體的想法就是，當咱們登陸進去線上環境時，線上環境會返回已經部署的代碼，在這個過程當中，咱們能夠利用抓包工具，把請求線上已經部署的代碼請求給攔截下來，替換爲本地代碼文件返回給瀏覽器，只要替換的文件一一對應，線上的環境依舊能夠正常跑通，由於這個過程對於瀏覽器來講，是透明的，因此咱們就至關於把本地代碼部署到線上環境了，就能夠一邊開發一邊調試啦~

具體的操做就是：

1. 登陸進去線上環境
2. 利用工具從中間抓包，攔截所要調試的代碼請求，返回本地文件。

固然工具備不少種~這裏用Fiddler做爲例子~

具體實現

1. 找到要調試的線上代碼所在文件

好比我要調試的是sureSign（） 方法，先在控制檯上定位到該方法所在的文件

2. 找到該文件資源所對應的請求

依舊是在控制檯查找

3. 在Fiddler裏面攔截該請求，並替換返回本地文件

這樣子就已經讓本地的文件，替代了遠程的文件~能夠在本地利用遠程的環境調節啦啦啦~~

可是若是文件在框架(如vue + webpack)的打包以後，和其餘文件有着關聯，若是替換一個不起做用，那咱們也能夠整一個替換掉

先把index.html替換掉

再把js資源替換

這樣子就行啦~

固然利用抓包還能夠實現不少東西，這個也只是一個開發調試用的小技巧~