你可能不知道的一些前端調(diào)試小技巧！
共 3968字，需瀏覽 8分鐘
·
2024-07-31 12:14
大廠技術(shù) 高級(jí)前端 Node進(jìn)階
點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群
前言
在日常工作中，我們難免會(huì)碰到各式各樣的線上問題，而有些問題可能因?yàn)椴煌h(huán)境下的數(shù)據(jù)、構(gòu)建產(chǎn)物不同等原因?qū)е略诒镜鼗蛘邷y(cè)試環(huán)境不易復(fù)現(xiàn)，如果公司內(nèi)沒有比較完善的線上錯(cuò)誤監(jiān)控和日志分析平臺(tái)，不妨嘗試下以下的調(diào)試方法，也許就能幫助你解決線上的“疑難雜癥”
移動(dòng)端調(diào)試
移動(dòng)端很多問題需要在真機(jī)上復(fù)現(xiàn)，通常情況下可以借助 Charles 或 Whistle 來輔助我們實(shí)現(xiàn)移動(dòng)端頁面的生產(chǎn)環(huán)境問題調(diào)試，這里我們以Charles為例列舉幾個(gè)調(diào)試方法（如何使用Charles代理就不在這里介紹了，如果沒使用過的可以查閱相關(guān)教程），看看如何讓哪些開發(fā)時(shí)沒有發(fā)現(xiàn)的問題原形畢露
Rewrite
VConsole可以幫助我們調(diào)試一些簡(jiǎn)單的問題，但大部分時(shí)候我們只會(huì)在本地或者測(cè)試環(huán)境開啟，那有沒有辦法在生產(chǎn)環(huán)境使用VConsole呢，答案自然是有的，我們只需借助Charles的 Rewrite功能對(duì)我們需要訪問的頁面html資源進(jìn)行重寫，在head插入VConsole腳本即可實(shí)現(xiàn)。
打開Charles-Tools-Rewrite
在Location處添加你需要重寫的頁面地址，我這里以百度為例
然后最主要的就是右下角的Rewrite 規(guī)則設(shè)置，簡(jiǎn)單點(diǎn)來說就是對(duì)返回的Response內(nèi)容進(jìn)行替換，將<head>替換為<head><script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script><script>var vConsole = new VConsole();</script> ，即在head標(biāo)簽內(nèi)插入vconsole的js腳本
保存后用連接了代理的手機(jī)設(shè)備打開百度的頁面就會(huì)發(fā)現(xiàn)右下角多了一個(gè)VConsole的組件，然后就可以開始愉快的調(diào)試了！
你也可以利用這個(gè)能力去做其他的事情，比如修改請(qǐng)求頭信息、修改請(qǐng)求地址參數(shù)、修改返回?cái)?shù)據(jù)等等，根據(jù)自己的訴求去使用所需要的能力
Map Remote
顧名思義，Map Remote就是將一個(gè)鏈接A 轉(zhuǎn)發(fā)到 鏈接B，一般用于多頁面業(yè)務(wù)功能跳轉(zhuǎn)鏈路之間的某個(gè)頁面的問題排查（特別是App或小程序等容器內(nèi)的原生頁面和webview頁面之間的跳轉(zhuǎn)）
同樣這里以baidu為例，當(dāng)訪問百度的時(shí)候?qū)⒄?qǐng)求重定向到本地服務(wù)
手機(jī)訪問百度可以看到成功轉(zhuǎn)發(fā)到了本地頁面
Map Local
Map Local 和 Map Remote 類似，不同點(diǎn)在于一個(gè)是轉(zhuǎn)發(fā)到另一個(gè)遠(yuǎn)程鏈接（或本地服務(wù)），而Map Local是用本地文件替換請(qǐng)求的資源文件，一般用于排查某個(gè)文件引起的問題，由于配置方式和上述的Map Remote類似，就不再重復(fù)介紹了
Devtools調(diào)試
手動(dòng)添加Source Map
我們的前端應(yīng)用在生產(chǎn)環(huán)境不會(huì)上傳source map，這時(shí)如果有異常錯(cuò)誤，我們很難通過混淆壓縮過后的代碼排查真實(shí)報(bào)錯(cuò)原因，這時(shí)就可以通過手動(dòng)添加Source Map 來幫助我們進(jìn)行問題排查。
假如我們有以下一段代碼，我們?cè)邳c(diǎn)擊按鈕的時(shí)候主動(dòng)拋出一個(gè)錯(cuò)誤：
import logo from './logo.svg';
import './App.css';
function App() {
const handleClick = () => {
throw new Error('error test');
};
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<button onClick={handleClick}>test</button>
</header>
</div>
);
}
export default App;
此時(shí)在我們將編譯生產(chǎn)環(huán)境的產(chǎn)物部署后點(diǎn)擊按鈕會(huì)發(fā)現(xiàn)控制臺(tái)報(bào)如下錯(cuò)誤：
這樣的一段信息很難幫助我們?nèi)ザㄎ粏栴}，此時(shí)我們就可以通過右鍵添加源代碼映射（Add source map）
然后將本地的sourcemap地址填寫并添加
回到控制臺(tái)查看錯(cuò)誤信息就會(huì)發(fā)現(xiàn)已經(jīng)能夠展示具體的文件，點(diǎn)擊也能查看編譯前的錯(cuò)誤代碼了
Select選項(xiàng)樣式調(diào)試
正常情況下如果我們想調(diào)試Select組件的選項(xiàng)樣式，當(dāng)我們右鍵選擇檢查后會(huì)發(fā)現(xiàn)Select會(huì)自動(dòng)收起，非常麻煩
這時(shí)就可以通過選擇devtools里的更多工具-渲染-勾選模擬所聚焦的網(wǎng)頁
這時(shí)你再在Select選項(xiàng)右鍵選擇檢查后就不會(huì)再收起選項(xiàng)，可以隨意調(diào)試樣式了
Hover樣式調(diào)試
針對(duì)一些hover場(chǎng)景的樣式進(jìn)行調(diào)試，以Tooltips組件為例，需要注意的是關(guān)于這一塊的調(diào)試方法還和你所使用的框架相關(guān)，這里分別介紹下Vue的Element UI和React的Ant Ddesign的調(diào)試區(qū)別
Element UI
將元素定位到對(duì)應(yīng)的按鈕，并移除按鈕上綁定的mouseleave事件監(jiān)聽
然后再將元素定位到tooltip組件，然后就可以修改其樣式了
Ant Design
antd的組件無法通過移除事件監(jiān)聽器的方式去調(diào)試，簡(jiǎn)單來說是因?yàn)镽eact的事件委托機(jī)制會(huì)將所有事件都掛在根節(jié)點(diǎn)上，從下圖也可以看出來所有的事件都掛載在#react-content下
這時(shí)我們可以通過快捷鍵開啟斷點(diǎn)來進(jìn)行調(diào)試
先鼠標(biāo)懸浮在文本上，然后按下command + (windows 下按F8) 開啟斷點(diǎn)
然后切回樣式元素面板就可以調(diào)試樣式了
結(jié)語
除了上述介紹的幾種方法外，Charles和Chrome的開發(fā)者工具還有很多實(shí)用的小功能，比如重發(fā)請(qǐng)求、性能檢測(cè)等等，感興趣的同學(xué)可以自行翻閱相關(guān)介紹文章
Node 社群
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
“分享、點(diǎn)贊、在看” 支持一波??