前言

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),市北企業(yè)網(wǎng)站建設(shè),市北品牌網(wǎng)站建設(shè),網(wǎng)站定制,市北網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,市北網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

平時(shí)工作量大并且很忙，也就意味著難免會(huì)在寫(xiě)代碼的時(shí)候一不小心寫(xiě)出BUG。如果測(cè)試一旦沒(méi)有測(cè)到，代碼上到現(xiàn)網(wǎng)往往就是事故，很多同學(xué)在這種時(shí)候手忙腳亂，不知道怎么調(diào)試解決。本文就這點(diǎn)主要講一下平時(shí)前端調(diào)試用的那些方法，希望能夠給到大家?guī)椭?/p>

遇到了BUG怎么辦？

如果你還是個(gè)前端小白，你最常用的調(diào)試方法應(yīng)該是直接在代碼中寫(xiě)下一個(gè) log，例如：

console.log('調(diào)試信息，輸出：',?test)
復(fù)制代碼

方法雖然簡(jiǎn)單粗暴，但是它是實(shí)用且簡(jiǎn)單的。然而，如果 BUG 十分復(fù)雜，涉及到跨組件甚至是源碼，采用打 log 的方式就變得十分麻煩了； 而比較有經(jīng)驗(yàn)的同學(xué)在遇到復(fù)雜問(wèn)題的時(shí)候可能會(huì)采取以下方法來(lái)定位、調(diào)試：

• 打斷點(diǎn)

• charles 抓包

看不出來(lái)問(wèn)題，我們來(lái)打個(gè)斷點(diǎn)吧~

遇到 BUG，通常我們第一直覺(jué)是打開(kāi)控制臺(tái)，點(diǎn)開(kāi)看一下 Console

通常，如果存在報(bào)錯(cuò)，我們可以直接點(diǎn)進(jìn)去到源碼處直接打斷點(diǎn)

如果控制臺(tái)沒(méi)有報(bào)錯(cuò)，只是代碼邏輯出現(xiàn)了問(wèn)題那咋辦呢？我們只要在代碼中加個(gè) debugger 就行了，舉個(gè)例子：

...created?()?{?debugger
?this.init()
?this.doSomething()}
...
復(fù)制代碼

F12 打開(kāi)調(diào)試工具之后刷新頁(yè)面，斷點(diǎn)就會(huì)停在 created 里了。 當(dāng)然，這里只是做簡(jiǎn)單的示例，實(shí)際情況更加復(fù)雜的時(shí)候，右邊的堆?？梢宰屇憧吹秸{(diào)用順序，沿著調(diào)用堆棧一般也能找到問(wèn)題所在。

如果打斷點(diǎn)還是找不到問(wèn)題，我們可以 review 代碼并思考以下問(wèn)題：

• 接口數(shù)據(jù)是否存在異常

• 代碼是否已提交到現(xiàn)網(wǎng)環(huán)境

如果是接口數(shù)據(jù)異常返回了，那當(dāng)然沒(méi)我們什么事情了，但是代碼如果沒(méi)有提交或者打錯(cuò)tag引起的事故，那么事故復(fù)盤(pán)會(huì)就尷尬了...

charles 怎么解決我們的問(wèn)題呢？

通常碰到 BUG，我們會(huì)先從 master 拉一個(gè) fix-bug 的分支。我們復(fù)現(xiàn)、解決 BUG 的前提是調(diào)試環(huán)境需要跟現(xiàn)網(wǎng)保持一致，具體如下：

• 代碼跟現(xiàn)網(wǎng)保持一致

• 接口能力跟現(xiàn)網(wǎng)保持一致

非常理想化的情況下，我們拉下來(lái)的 fix-bug 分支可以直接代理到現(xiàn)網(wǎng)，這樣一來(lái)可以極大提高復(fù)現(xiàn) BUG 的可能性，從而解決它。

...devServer:?{?proxy:?{
?'/api':?{?target:?'https://你的現(xiàn)網(wǎng)域名',?changeOrigin:?true,?ws:?true,?pathRewrite:?{
?'^/api':?''
?}
?}
?}}復(fù)制代碼

然而，現(xiàn)實(shí)情況往往不會(huì)這么理想。我們有時(shí)候會(huì)被“安排”維護(hù)一些老項(xiàng)目，由于歷史原因這些老項(xiàng)目往往不能用本地開(kāi)發(fā)代理來(lái)進(jìn)行調(diào)試，這時(shí)候就可以用到一個(gè)神器 ———— charles

charles的作用

• 抓取目標(biāo)的 javascript 文件，用本地打包后的 javascript 文件替換它

• 每次更改 javascript 文件后，只要手動(dòng)刷新頁(yè)面即可生效

怎么抓包？

步驟：

1. 下載charles

2. 安裝證書(shū)

3. 刷新頁(yè)面并讓它顯示需要抓取頁(yè)面的域名/ip，找到需要替換的js

4. 選中需要替換的 js，右鍵Map Local跟本地相應(yīng)的 js 對(duì)應(yīng)

當(dāng)然了，網(wǎng)上關(guān)于 charles 抓包的教程已經(jīng)很多了，這里只是簡(jiǎn)單寫(xiě)下步驟。大家自行到 google 或者百度上搜索以下關(guān)鍵詞即可：

• charles 抓包

• charles 安裝證書(shū)

比較麻煩的就是，每次更改需要刷新頁(yè)面才能看到效果。

移動(dòng)端的調(diào)試

移動(dòng)端的問(wèn)題處理起來(lái)有時(shí)候真的很心累，尤其是 ios 上 safari 的兼容性問(wèn)題，當(dāng)然這里不會(huì)展開(kāi)講

1. charles 抓包調(diào)試

charles 抓包調(diào)試還是很常見(jiàn)的方法，但是現(xiàn)在在安卓7.0及以上已經(jīng)抓不到了，不過(guò)使用 ios 系統(tǒng)的小伙伴依然可以抓到包。需要注意的是，如果遇到小程序上的支付問(wèn)題，由于 ios 在小程序上存在支付限制，用起來(lái)反而會(huì)顯得掣肘。 對(duì)于喜歡折騰的同學(xué)，安卓上的抓包問(wèn)題已經(jīng)有解決方案了。

1. 真機(jī)調(diào)試

工具：

• Google 瀏覽器

• Google 瀏覽器是具有真機(jī)調(diào)試功能的，這里有詳細(xì)的教程，本文就不展開(kāi)講了。

• TBS

• 騰訊出的一款基于 X5 內(nèi)核的真機(jī)調(diào)試工具，只要連上數(shù)據(jù)線(xiàn)就完事了，也可以調(diào)試微信H5。 然而之前在這里查看到相關(guān)問(wèn)答和說(shuō)明 ，現(xiàn)在的小程序上的內(nèi)核已經(jīng)改變，使用TBS已不能調(diào)試。

• 微信開(kāi)發(fā)者工具

• 微信開(kāi)發(fā)者工具具有真機(jī)調(diào)試的功能，然而，在實(shí)際環(huán)境中，首先你要有開(kāi)發(fā)者權(quán)限才行。

小結(jié)：能夠直接用真機(jī)調(diào)試的盡量用真機(jī)調(diào)試，不管是樣式還是代碼邏輯都能快速定位并解決。

1. 微信開(kāi)放社區(qū)

微信小程序上有時(shí)候會(huì)出現(xiàn)一些奇特的 BUG，往往跟我們的代碼邏輯完全沒(méi)有關(guān)系，這種時(shí)候應(yīng)該到微信的開(kāi)放社區(qū)上及時(shí)反饋BUG。點(diǎn)擊這里查看微信開(kāi)放社區(qū)。

1. 在PC端瀏覽器上調(diào)試（前提：不是微信H5或者小程序）

直接打 log 或者斷點(diǎn)就行了，一般不用特意去抓包。

1. vconsole

我們?cè)谇岸隧?xiàng)目中安裝 vcosole 插件（開(kāi)發(fā)/測(cè)試環(huán)境下），那么就可以 可以在移動(dòng)端中（小程序除外）查看 log 或者接口請(qǐng)求情況，一般用來(lái)快速定位問(wèn)題，不建議用來(lái)調(diào)試很復(fù)雜的 BUG

【番外】實(shí)在定位不到問(wèn)題怎么辦？

能夠用調(diào)試工具定位出來(lái)的問(wèn)題都不算問(wèn)題，相信很多前端的同學(xué)都有這種感覺(jué)。有這么一些疑難雜癥，我們很難去定位、解決，況且一般給到我們的時(shí)間非常緊，這種時(shí)候應(yīng)該怎么辦呢？我總結(jié)了如下方法：

• 到社區(qū)上尋求幫助

• 向你身邊的同事求助

常用到的網(wǎng)站：

• 百度

• google

• stackoverflow

• segmentfault

當(dāng)然，無(wú)論是跟同事求助，還是到社區(qū)上尋找解決方案，你都要事先整理好這些：

1. 清晰的描述問(wèn)題所在

2. 提供可復(fù)現(xiàn)的環(huán)境

3. 提供核心代碼

萬(wàn)一問(wèn)題最后還是沒(méi)有解決，你得想一個(gè)折中的解決方案。

資料

以下資料可供參考：

• TBS官方文檔

• charles官網(wǎng)

• google調(diào)試文檔

總結(jié)

前端的調(diào)試方法有很多，知道有哪些方法很重要，但是最重要的還是能在不同的場(chǎng)景下采用最合適的方案。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專(zhuān)業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開(kāi)啟，新人活動(dòng)云服務(wù)器買(mǎi)多久送多久。

網(wǎng)站名稱(chēng)：「干貨」前端進(jìn)階應(yīng)該知道的這些調(diào)試方法-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://www.rwnh.cn/article32/cepdsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、自適應(yīng)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)