建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
當(dāng)線(xiàn)上有報(bào)錯(cuò)的時(shí)候，大家是怎么定位問(wèn)題的呢？
成都創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比龍門(mén)網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式龍門(mén)網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋龍門(mén)地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴(lài)。
斷點(diǎn)調(diào)試么？
但是這時(shí)候代碼是被壓縮過(guò)的，變量名都是 a、b、c、d 這種，根本看不出啥來(lái)。
如果調(diào)試線(xiàn)上報(bào)錯(cuò)能像本地開(kāi)發(fā)的時(shí)候一樣就好了。
其實(shí)這是可以做到的，今天就分享下如何優(yōu)雅的調(diào)試線(xiàn)上報(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 .
瀏覽器訪(fǎng)問(wèn)，就會(huì)發(fā)現(xiàn)代碼確實(shí)報(bào)錯(cuò)了：
那問(wèn)題來(lái)了，怎么定位錯(cuò)誤原因呢？
首先，我們可以使用異常斷點(diǎn)，在拋異常的地方斷?。?/p>
創(chuàng)建一個(gè) vscode 調(diào)試配置：
勾選 uncaught exceptions，在未被捕獲的異常處斷住：
然后啟動(dòng)調(diào)試：
你會(huì)發(fā)現(xiàn)代碼在拋異常的地方斷住了，這就是異常斷點(diǎn)的功能。當(dāng)你不知道哪里拋的異常的時(shí)候，可以用這個(gè)。
但現(xiàn)在代碼是被壓縮過(guò)的，看不出啥來(lái)：
怎么能直接定位到拋異常的源碼呢？
這時(shí)候就要用到 sourcemap 了，它就是用于把編譯后的源碼映射回源碼的：
首先要生成 sourcemap，這個(gè)配置下 webpack 的 devtool 為 hidden-source-map 即可：
hidden-source-map 的意思是生成 sourcemap 但是不關(guān)聯(lián)。
如果你配成 source-map，代碼是關(guān)聯(lián)了 sourcemap 的：
線(xiàn)上代碼不會(huì)這樣做。
關(guān)聯(lián) sourcemap 需要在文件末尾加上 //# sourceMappingURL=xxx.js.map 的代碼。
但現(xiàn)在這個(gè)文件是線(xiàn)上的，不能直接改本地文件。我們可以使用 charles 的斷點(diǎn)功能來(lái)修改它：
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
不過(guò)在那之前要指定一個(gè)數(shù)據(jù)目錄，也就是瀏覽器把插件、歷史、cookie 等數(shù)據(jù)保存在哪里：
不指定的話(huà)每次調(diào)試都會(huì)創(chuàng)建一個(gè)臨時(shí)數(shù)據(jù)目錄來(lái)跑調(diào)試，上次安裝的插件就沒(méi)有了。
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)頁(yè)的代理配成 charles 之后，在 charles 就可以抓到對(duì)應(yīng)的請(qǐng)求了：
接下來(lái)就是斷點(diǎn)修改響應(yīng)的內(nèi)容了：
點(diǎn)擊 Proxy > Breakpoint Settings
添加一個(gè)對(duì) guangtest.com 的 dist/index.js 響應(yīng)的斷點(diǎn)：
強(qiáng)制刷下頁(yè)面，charles 就會(huì)斷住：
我們可以修改響應(yīng)的內(nèi)容，然后點(diǎn)擊 execute 來(lái)執(zhí)行修改：
我加上了這樣一行 sourcemap 的關(guān)聯(lián)：
在 chrome devtools 里可以看到拿到的響應(yīng)是被修改過(guò)的：
異常斷點(diǎn)現(xiàn)在直接在源碼處斷住了：
接下來(lái)就可以直接調(diào)試源碼了，可以通過(guò)作用域、調(diào)用棧等信息來(lái)定位報(bào)錯(cuò)原因：
這樣我們就完成了直接本地調(diào)試線(xiàn)上報(bào)錯(cuò)代碼對(duì)應(yīng)的源碼！
案例代碼在：https://github.com/QuarkGluonPlasma/fe-debug-exercize。
總結(jié)
通過(guò) sourcemap，我們可以調(diào)試線(xiàn)上報(bào)錯(cuò)的時(shí)候直接對(duì)應(yīng)到本地源碼來(lái)斷點(diǎn)調(diào)試。
要讓線(xiàn)上代碼關(guān)聯(lián) sourcemap 可以通過(guò) charles 斷點(diǎn)修改對(duì)應(yīng)的響應(yīng)，加上一行 sourceMappingURL=xxx 的注釋。
然后在 VSCode Debugger 里加個(gè)異常斷點(diǎn)，這樣就可以在異常處斷住。
這樣就可以快速定位線(xiàn)上錯(cuò)誤的原因了，體驗(yàn)就和本地開(kāi)發(fā)時(shí)一樣！
新聞名稱(chēng)：如何讓調(diào)試線(xiàn)上 JS 報(bào)錯(cuò)像調(diào)試本地源碼一樣優(yōu)雅？
鏈接分享：http://www.dlmjj.cn/article/djgcjgj.html
