當(dāng)線上有報(bào)錯(cuò)的時(shí)候，大家是怎么定位問題的呢？

斷點(diǎn)調(diào)試么？

但是這時(shí)候代碼是被壓縮過的，變量名都是 a、b、c、d 這種，根本看不出啥來。

如果調(diào)試線上報(bào)錯(cuò)能像本地開發(fā)的時(shí)候一樣就好了。

其實(shí)這是可以做到的，今天就分享下如何優(yōu)雅的調(diào)試線上報(bào)錯(cuò)：

首先，我們準(zhǔn)備一段 JS 代碼：

這是我隨便找的一段 JS 代碼，里面拋了一個(gè)錯(cuò)誤。

然后用 webpack 進(jìn)行編譯：

在 index.html 里引入構(gòu)建產(chǎn)物：

然后跑個(gè)靜態(tài)服務(wù)器 npx http-server .

瀏覽器訪問，就會(huì)發(fā)現(xiàn)代碼確實(shí)報(bào)錯(cuò)了：

那問題來了，怎么定位錯(cuò)誤原因呢？

首先，我們可以使用異常斷點(diǎn)，在拋異常的地方斷?。?/p>

創(chuàng)建一個(gè) vscode 調(diào)試配置：

勾選 uncaught exceptions，在未被捕獲的異常處斷?。?/p>

然后啟動(dòng)調(diào)試：

你會(huì)發(fā)現(xiàn)代碼在拋異常的地方斷住了，這就是異常斷點(diǎn)的功能。當(dāng)你不知道哪里拋的異常的時(shí)候，可以用這個(gè)。

但現(xiàn)在代碼是被壓縮過的，看不出啥來：

怎么能直接定位到拋異常的源碼呢？

這時(shí)候就要用到 sourcemap 了，它就是用于把編譯后的源碼映射回源碼的：

首先要生成 sourcemap，這個(gè)配置下 webpack 的 devtool 為 hidden-source-map 即可：

hidden-source-map 的意思是生成 sourcemap 但是不關(guān)聯(lián)。

如果你配成 source-map，代碼是關(guān)聯(lián)了 sourcemap 的：

線上代碼不會(huì)這樣做。

關(guān)聯(lián) sourcemap 需要在文件末尾加上 //# sourceMappingURL=xxx.js.map 的代碼。

但現(xiàn)在這個(gè)文件是線上的，不能直接改本地文件。我們可以使用 charles 的斷點(diǎn)功能來修改它：

charles 默認(rèn)不代理 127.0.0.1 的請(qǐng)求，我們要配下 hosts：

比如我配了一個(gè) www.guangtest.com 的域名到 127.0.0.1。

試一下：

hosts 配置生效了：

然后我們要讓 charles 攔截這個(gè) url 的請(qǐng)求，需要安裝一個(gè)插件 SwitchyOmega

不過在那之前要指定一個(gè)數(shù)據(jù)目錄，也就是瀏覽器把插件、歷史、cookie 等數(shù)據(jù)保存在哪里：

不指定的話每次調(diào)試都會(huì)創(chuàng)建一個(gè)臨時(shí)數(shù)據(jù)目錄來跑調(diào)試，上次安裝的插件就沒有了。

chrome 應(yīng)用商店搜索 switchy omega：

配置下代理服務(wù)器，這里我 charles 是在 127.0.0.1:8888 的：

之后配下 auto switch，讓 www.guangtest.com 的請(qǐng)求都走我們剛剛配的代理：

之后點(diǎn)擊應(yīng)用選項(xiàng)。

代理方式設(shè)置成 auto switch，也就是根據(jù)配置的規(guī)則自動(dòng)切換代理：

這個(gè)網(wǎng)頁的代理配成 charles 之后，在 charles 就可以抓到對(duì)應(yīng)的請(qǐng)求了：

接下來就是斷點(diǎn)修改響應(yīng)的內(nèi)容了：

點(diǎn)擊 Proxy > Breakpoint Settings

添加一個(gè)對(duì) guangtest.com 的 dist/index.js 響應(yīng)的斷點(diǎn)：

強(qiáng)制刷下頁面，charles 就會(huì)斷住：

我們可以修改響應(yīng)的內(nèi)容，然后點(diǎn)擊 execute 來執(zhí)行修改：

我加上了這樣一行 sourcemap 的關(guān)聯(lián)：

在 chrome devtools 里可以看到拿到的響應(yīng)是被修改過的：

異常斷點(diǎn)現(xiàn)在直接在源碼處斷住了：

接下來就可以直接調(diào)試源碼了，可以通過作用域、調(diào)用棧等信息來定位報(bào)錯(cuò)原因：

這樣我們就完成了直接本地調(diào)試線上報(bào)錯(cuò)代碼對(duì)應(yīng)的源碼！

案例代碼在：https://github.com/QuarkGluonPlasma/fe-debug-exercize。

總結(jié)

通過 sourcemap，我們可以調(diào)試線上報(bào)錯(cuò)的時(shí)候直接對(duì)應(yīng)到本地源碼來斷點(diǎn)調(diào)試。

要讓線上代碼關(guān)聯(lián) sourcemap 可以通過 charles 斷點(diǎn)修改對(duì)應(yīng)的響應(yīng)，加上一行 sourceMappingURL=xxx 的注釋。

然后在 VSCode Debugger 里加個(gè)異常斷點(diǎn)，這樣就可以在異常處斷住。

這樣就可以快速定位線上錯(cuò)誤的原因了，體驗(yàn)就和本地開發(fā)時(shí)一樣！