鍵盤屏幕前，阿鋒急的是滿頭大汗，控制臺(tái)上的紅色神秘符文，已經(jīng)多次出現(xiàn)，

這也預(yù)示著阿鋒的情緒已經(jīng)在紅溫的邊緣，馬上就要崩潰了！“這完蛋的bug究竟是怎么回事兒?。?！

今天千鋒前端虎哥——給你一文解千愁，讓你知道bug是怎么來(lái)的！也讓你知道bug是怎么沒(méi)的！

一、為什么會(huì)出現(xiàn)bug

bug的出現(xiàn)是由于預(yù)期與實(shí)際之間產(chǎn)生了偏差。白話說(shuō)就是意料之外。造成bug的原因有幾種：

????1、? 對(duì)所寫的代碼或者邏輯并不清晰，迷迷糊糊

????2、? 覆蓋場(chǎng)景不全面，容錯(cuò)率不高

????3、? 所使用的第三方代碼本身存在bug

舉一個(gè)例子，一個(gè)程序員的女朋友讓程序員本人去買蘋果。一個(gè)經(jīng)驗(yàn)豐富的程序員會(huì)追問(wèn)對(duì)方：是要超市的還是路邊攤的？是大的還是小的？是甜的還是酸甜的？是煙臺(tái)產(chǎn)的還是陜西產(chǎn)的？是富士還是國(guó)光或其他品種？等等。一系列問(wèn)題問(wèn)完后，女友可能會(huì)說(shuō)算了，我自己去買吧。從這個(gè)場(chǎng)景中，我們可以看到，盡可能地考慮各種可能性，以獲得更準(zhǔn)確的結(jié)果，這樣出現(xiàn)bug的概率就會(huì)更低。

二、bug都有哪些類型

??? 1、CSS的bug：這種bug通常是由自己編寫的CSS代碼導(dǎo)致的，或者對(duì)已存在的CSS bug不夠熟悉。例如高度塌陷、margin-top垂直穿透等問(wèn)題。

??? 2、使用第三方組件時(shí)出現(xiàn)的bug：這種bug多數(shù)情況下是由于沒(méi)有仔細(xì)閱讀組件文檔，或者組件本身存在bug所導(dǎo)致的。

??? 3、JavaScript的bug：作為重點(diǎn)討論的一類bug，前端開發(fā)中最常見且最難解決的問(wèn)題。下面我們將重點(diǎn)討論JavaScript bug。

JavaScript的bug可以分為以下幾類：

●?語(yǔ)法錯(cuò)誤：例如缺少分號(hào)、括號(hào)不匹配等。

●?邏輯錯(cuò)誤：代碼的邏輯錯(cuò)誤導(dǎo)致程序運(yùn)行不符合預(yù)期。

●?類型錯(cuò)誤：使用了錯(cuò)誤的數(shù)據(jù)類型或執(zhí)行了不兼容的操作。

●?異步問(wèn)題：由于異步操作的執(zhí)行順序或時(shí)間問(wèn)題，導(dǎo)致出現(xiàn)bug。

●?作用域問(wèn)題：變量的作用域不正確，導(dǎo)致訪問(wèn)錯(cuò)誤的變量或函數(shù)。

●?瀏覽器兼容性問(wèn)題：不同瀏覽器對(duì)JavaScript的支持程度不同，導(dǎo)致在某些瀏覽器上出現(xiàn)bug。

以上是常見的JavaScript bug類型，當(dāng)然還有其他可能的類型。在調(diào)試和解決JavaScript bug時(shí)，可以使用開發(fā)者工具、日志輸出、斷點(diǎn)調(diào)試等技術(shù)手段來(lái)定位和修復(fù)問(wèn)題。

三、解決bug的方法

1.? 思路，思路一定要捋清楚，bug是哪種類型引起的

???（1）?語(yǔ)法類錯(cuò)誤，這個(gè)提示很明確，缺少符號(hào)、字母、或者是字寫錯(cuò)了，代碼格式化很重要

????（2）寫錯(cuò)了單詞，一個(gè)“alert”和”alter” ，不仔細(xì)看是不是看不出區(qū)別？一個(gè)是彈窗口，另一個(gè)是修改的意思，完全不是一個(gè)東西。再來(lái)一個(gè)"test"和"text" 看起來(lái)也很像，自己回看的時(shí)候是不是看出不來(lái)(看不出來(lái))？這種錯(cuò)誤是坑自己特別狠的，解決這類問(wèn)題需要仔細(xì)對(duì)比每一個(gè)單詞或者刪掉重新寫

????（3）?前后端交互，數(shù)據(jù)產(chǎn)生的bug，后端完全不按套路出牌，給的數(shù)據(jù)有時(shí)候偏偏沒(méi)有某個(gè)字段，而接口文檔中有，這個(gè)鍋指定后端來(lái)背，我們不可能把所有的字段都校驗(yàn)一遍空，由前后端交互引起的bug優(yōu)先排查ajax的返回值

2.? debug工具的熟練運(yùn)用（重點(diǎn)）

谷歌瀏覽器為我們提供了功能完備的bug調(diào)試工具，按F12，調(diào)出控制臺(tái)，首先看控制臺(tái)里面有沒(méi)有輸出js的異常。

????（1）控制臺(tái)有錯(cuò)誤。

我們來(lái)偽造一個(gè)異?？纯催@個(gè)異常如何排查，有如下代碼

在瀏覽器的控制臺(tái)中會(huì)輸出

看到一堆錯(cuò)誤時(shí)，不要慌張，找到我們熟悉的文件名(App.vue:20:1)，點(diǎn)擊進(jìn)去查看，可以找到代碼所在的位置。結(jié)合報(bào)錯(cuò)詳情：consoel is not defined，這個(gè)錯(cuò)誤表示consoel未定義，未定義可能是因?yàn)闆](méi)有正確引入或者拼寫錯(cuò)誤。修正這個(gè)錯(cuò)誤即可。

（2）如果控制臺(tái)沒(méi)有錯(cuò)誤

偏偏出不來(lái)我們要的數(shù)據(jù)，UI沒(méi)有被渲染，這種問(wèn)題又要怎么解決呢？答案是截?cái)?，在渲染之前使用console.log或者設(shè)置斷點(diǎn)來(lái)查看代碼運(yùn)行過(guò)程中的數(shù)據(jù)。

????????1）使用console.log方式

咱們先來(lái)一段錯(cuò)誤的代碼

原有的業(yè)務(wù)本意是將返回?cái)?shù)據(jù)ajaxData.data設(shè)置給響應(yīng)式數(shù)據(jù)mydata.lidata，但手滑了一下，寫岔劈了，把響應(yīng)的結(jié)果整體賦值給了mydata.lidata，導(dǎo)致頁(yè)面顯示如下：

我們用console.log打印mydata.lidata的值，console.log(mydata.lidata)

當(dāng)我們看到控制臺(tái)打印的數(shù)據(jù)時(shí)，應(yīng)該反應(yīng)過(guò)來(lái)，發(fā)現(xiàn)這個(gè)數(shù)據(jù)肯定是不正確的。如果我們期望的數(shù)據(jù)應(yīng)該是一個(gè)數(shù)組而不是一個(gè)對(duì)象，那么我們可以將代碼修改為mydata.lidata = ajaxData.data，這樣就可以解決問(wèn)題了。

（2）斷點(diǎn)工具的使用

使用谷歌瀏覽器，按f12，調(diào)出如圖的工具，切換到source選項(xiàng)卡處，找到我們寫的代碼

代碼外的行號(hào)處，點(diǎn)一下寶貴的左鍵，如圖所示：

這個(gè)斷點(diǎn)不是瞎點(diǎn)的，是代碼會(huì)運(yùn)行到這里時(shí)會(huì)停留在此處。在頁(yè)面按鈕上點(diǎn)擊一下觸發(fā)這個(gè)函數(shù)，此時(shí)看到如下圖

再接下來(lái)，將鼠標(biāo)移動(dòng)到您想要查看的變量上，停留2秒鐘不要移動(dòng)（如下圖所示的綠框），查看變量的值是什么。根據(jù)觀察和分析的結(jié)果，修復(fù)bug，并記得斷點(diǎn)放行

?和取消斷點(diǎn)（與添加斷點(diǎn)相同的操作）

當(dāng)然！斷點(diǎn)調(diào)試是一項(xiàng)強(qiáng)大而有用的工具，具有許多功能可以幫助我們分析和解決bug。如果希望詳細(xì)了解斷點(diǎn)調(diào)試的各種功能和技巧，咱們?cè)賳为?dú)寫一篇文章來(lái)探討。在那篇文章中，我們可以深入討論如何添加多個(gè)斷點(diǎn)、逐步執(zhí)行代碼、查看變量值、跳轉(zhuǎn)到下一層代碼等

（3） 搜索引擎的使用

大多數(shù)小伙伴遇到問(wèn)題會(huì)優(yōu)先搜索引擎，但往往找不到適合自己的答案。使用搜索引擎搜索問(wèn)題是需要技巧的，要清楚的問(wèn)搜索引擎問(wèn)題，不是把問(wèn)題丟給搜索引擎。再通過(guò)多篇文章的對(duì)比，找到和自己情況相符合的答案。另外程序員們有個(gè)不成文的習(xí)慣，搜索引擎的結(jié)果第一條和第一頁(yè)的往往沒(méi)有特別精準(zhǔn)的答案

（4）AI輔助工具的使用

描述不清楚也沒(méi)事，AI大概都能懂