400 186 1886
大家好，我是 前端架構(gòu)師 - 大衛(wèi)。
更多優(yōu)質(zhì)內(nèi)容請(qǐng)關(guān)注微信公眾號(hào) @程序員大衛(wèi)。
初心為助前端人??，進(jìn)階路上共星辰?，
您的點(diǎn)贊??與關(guān)注??，是我筆耕不輟的燈??。
背景
在前端開(kāi)發(fā)和排查線(xiàn)上問(wèn)題的過(guò)程中，我們經(jīng)常會(huì)遇到調(diào)試受限的場(chǎng)景：無(wú)法直接修改線(xiàn)上代碼、hover 和 select 樣式難以定位、JS 報(bào)錯(cuò)追蹤困難等。為了提高調(diào)試效率，我們可以借助 Proxyman、Chrome DevTools 等工具，掌握一些實(shí)用的小技巧，讓復(fù)雜問(wèn)題的排查變得更加簡(jiǎn)單高效。
1. 使用 Chrome 自帶的替換功能
打開(kāi) Chrome 開(kāi)發(fā)者工具，切換到
Network面板。在請(qǐng)求列表中右鍵點(diǎn)擊www.baidu.com，選擇Override content：
頁(yè)面上方會(huì)出現(xiàn)一個(gè)提示欄，點(diǎn)擊其中的
Select folder按鈕：
在彈出的文件選擇器中，選擇
桌面文件夾。隨后會(huì)彈出一個(gè)對(duì)話(huà)框，詢(xún)問(wèn)是否允許開(kāi)發(fā)者工具修改文件，點(diǎn)擊修改文件：
Chrome 會(huì)自動(dòng)在桌面創(chuàng)建一個(gè)名為
www.baidu.com的文件夾：
在
index.html的<head>標(biāo)簽內(nèi)插入如下代碼，并保存文件：
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script><script>var vConsole = new VConsole();</script>返回瀏覽器并"刷新"百度首頁(yè)，可以看到頁(yè)面右下角已經(jīng)成功出現(xiàn)了
vConsole 調(diào)試面板：
2. 使用 Proxyman 的本地映射（Map Local）
我們可以通過(guò)本地映射功能隨意修改線(xiàn)上代碼，或插入自定義腳本來(lái)進(jìn)行調(diào)試。假設(shè)我們要調(diào)試的頁(yè)面是 百度首頁(yè)，這里以插入 vConsole.js 為例說(shuō)明。
先打開(kāi) Proxyman，然后在瀏覽器中訪(fǎng)問(wèn) "百度首頁(yè)"。接著回到 Proxyman，按下 Command + F，輸入 www.baidu.com 來(lái)過(guò)濾相關(guān)請(qǐng)求。
右鍵選中該請(qǐng)求，點(diǎn)擊 工具 - 本地映射：
在彈出的配置面板中，名稱(chēng)可以填寫(xiě)為 vConsole，然后在下方的主體內(nèi)容區(qū)域，在 <head></head> 標(biāo)簽內(nèi)插入以下腳本：
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script><script>var vConsole = new VConsole();</script>點(diǎn)擊“保存”按鈕。
刷新 "百度首頁(yè)"，就會(huì)看到右下角已經(jīng)成功加載了 vConsole：
注：
Charles中也有類(lèi)似的功能操作。
3. 使用 Proxyman 的遠(yuǎn)程映射（Map Remote）
遠(yuǎn)程映射與本地映射類(lèi)似，首先同樣選中百度的請(qǐng)求，右鍵點(diǎn)擊 工具 - 遠(yuǎn)程映射：
在彈出的窗口中：
名稱(chēng)可以隨意取，比如 "百度遠(yuǎn)程映射到本地"
主機(jī)地址填寫(xiě)為你本地開(kāi)啟的服務(wù)地址，如
http://127.0.0.1:5501/index.html
失去焦點(diǎn)后，系統(tǒng)會(huì)自動(dòng)填充協(xié)議、端口和路徑等字段。
點(diǎn)擊 “完成” 按鈕即可。
刷新"百度首頁(yè)"，此時(shí)你會(huì)看到內(nèi)容已經(jīng)成功映射為本地頁(yè)面。
4. 手動(dòng)添加 Source Map
當(dāng)項(xiàng)目上線(xiàn)后，如果沒(méi)有接入錯(cuò)誤監(jiān)控系統(tǒng)，前端報(bào)錯(cuò)往往很難追蹤源頭。
以一個(gè) Vite 創(chuàng)建的 Vue 項(xiàng)目為例，App.vue 中代碼如下：
<script setup lang="ts">const hanldeClick = () => { throw new Error("test error.");};</script><template> <h1 @click="hanldeClick">點(diǎn)擊我報(bào)錯(cuò)!</h1></template>運(yùn)行以下命令完成構(gòu)建并啟動(dòng)本地預(yù)覽，接著點(diǎn)擊頁(yè)面上的 "點(diǎn)擊我報(bào)錯(cuò)! "，此時(shí)控制臺(tái)會(huì)輸出錯(cuò)誤信息。
pnpm buildpnpm preview
我們會(huì)發(fā)現(xiàn)報(bào)錯(cuò)信息無(wú)法定位到具體文件和位置。此時(shí)可以手動(dòng)添加 Source Map 文件。
在Console 面板中點(diǎn)擊報(bào)錯(cuò)的文件名：
它會(huì)自動(dòng)在 Sources 面板中打開(kāi)對(duì)應(yīng)的 JS 文件，然后右鍵點(diǎn)擊并選擇 Add source map...：
在彈出的輸入框中輸入 Source Map 地址，比如本地啟動(dòng)的文件：
http://127.0.0.1:5501/index-Dp1zXMZ4.js.map點(diǎn)擊 "Add" 按鈕完成。
此時(shí)Console 面板中的錯(cuò)誤提示就可以定位到源文件了：
?? PS：這個(gè)
.map文件是怎么生成的？只需在
vite.config.ts中設(shè)置build.sourcemap: true，然后執(zhí)行命令pnpm run build，即可生成對(duì)應(yīng)的 Source Map 文件。
import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";export default defineConfig({ plugins: [vue()], build: { sourcemap: true, },});5. Select 下拉框的樣式調(diào)試
調(diào)試下拉框樣式時(shí)，經(jīng)常會(huì)遇到這樣的問(wèn)題：當(dāng) Select 下拉內(nèi)容展開(kāi)后，一旦切換到瀏覽器 DevTools 面板，下拉內(nèi)容就會(huì)自動(dòng)收起，無(wú)法繼續(xù)選中或查看相關(guān)樣式。
下面以 "Ant Design" 的 Select 組件 為例說(shuō)明：
解決方法是打開(kāi) DevTools 的 More tools 菜單，選擇 Rendering：
在打開(kāi)的 Rendering 面板中，勾選 Emulate a focused page：
此時(shí)就可以輕松調(diào)試 Select 下拉樣式了：
6. Hover 樣式調(diào)試 - CSS 實(shí)現(xiàn)
如果 Hover 效果是通過(guò) CSS 實(shí)現(xiàn)的，例如：
<h1>Hello</h1><style>h1:hover { color: red;}</style>可以在 DevTools 的 Styles 面板中點(diǎn)擊 :hov 按鈕：
勾選 :hover 選項(xiàng)，就能手動(dòng)激活 Hover 樣式效果：
7. Hover 樣式調(diào)試 - JS 實(shí)現(xiàn)（方式一）
在 Vue 項(xiàng)目中，許多 Hover 效果是通過(guò) JS 綁定 mouseout 事件來(lái)實(shí)現(xiàn)的。為了便于調(diào)試這類(lèi)效果，我們可以臨時(shí)移除相關(guān)事件監(jiān)聽(tīng)。
下面以 "Element Plus" 的 Tooltip組件 為例，首先在 DevTools 中選中對(duì)應(yīng)的元素：
然后切換到 Event Listeners 面板，展開(kāi) mouseleave，點(diǎn)擊移除事件：
此時(shí)，當(dāng)我們?cè)俅螌⑹髽?biāo)懸停在該元素上并移開(kāi)時(shí)，Tooltip 不會(huì)自動(dòng)消失，這樣就可以方便地修改和調(diào)試其樣式了：
7. Hover 樣式調(diào)試 - JS 實(shí)現(xiàn)（方式二）
在 React 項(xiàng)目中，事件通常是綁定在應(yīng)用的根元素上，比較難移除，這時(shí)可以使用快捷鍵打斷點(diǎn)的方式。
下面以 "Ant Design" 的 Tooltip 組件 為例，首先得在 "DevTools" 中切換到 Sources 面板：
將鼠標(biāo)移動(dòng)到 Tooltip 上的文字，然后按下 Mac 電腦快捷鍵 fn + F8（Windows 用戶(hù)直接按 F8），當(dāng)鼠標(biāo)移開(kāi)時(shí)，斷點(diǎn)會(huì)自動(dòng)觸發(fā)：
現(xiàn)在就可以在斷點(diǎn)狀態(tài)下輕松修改樣式了：
總結(jié)
這篇文章分享了 6 個(gè)前端調(diào)試中非常實(shí)用的技巧，涵蓋了網(wǎng)絡(luò)層的本地/遠(yuǎn)程映射、source map 的手動(dòng)添加，以及 select 和 hover 樣式的調(diào)試方法。掌握這些技巧，不僅能提升你在實(shí)際項(xiàng)目中的問(wèn)題排查效率，也能幫助你在和后端聯(lián)調(diào)、線(xiàn)上問(wèn)題定位時(shí)更加得心應(yīng)手。
建議將這些技巧收藏并在項(xiàng)目中多加實(shí)踐，你會(huì)發(fā)現(xiàn)前端調(diào)試其實(shí)可以非常絲滑
