身為一名前端JavaScript打工人，當(dāng)然是經(jīng)驗(yàn)越多，在排查錯(cuò)誤時(shí)會(huì)更容易。道理都懂，但仍然會(huì)在遇到問(wèn)題時(shí)會(huì)不知道怎樣著手。

推薦（免費(fèi)）：JavaScript（視頻）

Chrome DevTools 中的常見(jiàn)錯(cuò)誤排查

Chrome 開(kāi)發(fā)者工具的 Console 相當(dāng)好用，最常使用的不外乎是通過(guò) console.log 展示出變量或運(yùn)算的結(jié)果，如果符合預(yù)期則皆大歡喜。

但是一旦出現(xiàn)紅字幸災(zāi)樂(lè)禍的告訴我們“你出錯(cuò)了！”，這對(duì)我們來(lái)說(shuō)無(wú)疑是一種挫折，在不知如何著手解決錯(cuò)誤的時(shí)，只能反覆地檢查自己的代碼，看看是不是有什么奇怪的地方，有時(shí)就算停在了錯(cuò)誤地方也往往不知是什么意思，會(huì)因此花費(fèi)大量的時(shí)間。

本文就來(lái)介紹在 Chrome 開(kāi)發(fā)者工具中常見(jiàn)的錯(cuò)誤反饋及排除技巧，讓你不再為了滿(mǎn)屏幕的紅字感到挫折，更能從中學(xué)習(xí)如何快速搜尋錯(cuò)誤代碼。

注意：JavaScript 是屬于同步的編程語(yǔ)言，如果出現(xiàn)錯(cuò)誤就會(huì)造成后面的代碼無(wú)法運(yùn)行，當(dāng)紅字沒(méi)有解決時(shí)，都有可能造成接下來(lái)的代碼行錯(cuò)誤或是無(wú)法繼續(xù)運(yùn)行。

錯(cuò)誤類(lèi)型：SyntaxError

SyntaxError 類(lèi)型的錯(cuò)誤通常是語(yǔ)法錯(cuò)誤，遇到這中錯(cuò)誤時(shí)建議通過(guò)你所用的 IDE 排查，比如 VSCode 能夠直接跳出這類(lèi)型的錯(cuò)誤提示。

如下圖，VSCode 用紅色波浪線(xiàn)提示 family 對(duì)象有錯(cuò)誤，當(dāng)出現(xiàn)錯(cuò)誤時(shí)會(huì)建議不要只檢查當(dāng)前行，錯(cuò)誤可能會(huì)存在于上下文中（有可能跨多行的錯(cuò)誤），這個(gè)例子中仔細(xì)檢查可以發(fā)現(xiàn)在'小明'后面少了一個(gè)逗號(hào)。

排查重點(diǎn)：使用主流的 IDE 例如 "VSCode" 進(jìn)行排查

Uncaught SyntaxError: Unexpected identifier

var person = {   name: '小明'   family: {     name: '小明家'   } }

語(yǔ)法解析錯(cuò)誤，因?yàn)樵趯?duì)象結(jié)構(gòu)中缺少一個(gè)逗號(hào)，除了通過(guò)在 VSCode 中查看外，也可以直接通過(guò) Chrome Console 切換到 Source 頁(yè)面查看錯(cuò)誤行，并檢查此行的上下文中是否存在語(yǔ)法錯(cuò)誤。

Uncaught SyntaxError: Unexpected end of input

function fn() {   console.log('這是一個(gè)函數(shù)'); console.log(fn);

語(yǔ)法解析錯(cuò)誤：未預(yù)期的結(jié)束，這個(gè)例子中缺少結(jié)尾的大括號(hào) }，在編寫(xiě)代碼時(shí)盡可能的維持正確的鎖緊，將代碼排列整齊之后更容易找到錯(cuò)誤。

Uncaught SyntaxError: Unexpected token '}'

if (name)   console.log('立即執(zhí)行函數(shù)') };

語(yǔ)法解析錯(cuò)誤：未預(yù)期的符號(hào) }，代碼結(jié)尾多了一個(gè) } 符號(hào)導(dǎo)致環(huán)境運(yùn)行錯(cuò)誤，這個(gè)錯(cuò)誤的排查方法與上面相同，盡可能將代碼排整齊并維持首尾符號(hào)的一致。

除此之外再推薦一個(gè) VSCode 工具，可以為你的首尾標(biāo)簽加上對(duì)應(yīng)的色彩：https://marketplace.visualstu…

例子：代碼中成對(duì)的 {} 都會(huì)以相同的顏色展示。

Uncaught SyntaxError: Identifier 'a' has already been declared

let a; let a;

語(yǔ)法解析錯(cuò)誤：識(shí)別符號(hào)（在這里指的是變量）已經(jīng)被聲明，應(yīng)該避免重復(fù)生命同一個(gè)變量，在 ES6 都禁止用 let、const 對(duì)變量進(jìn)行重復(fù)聲明，直接排除即可。

錯(cuò)誤類(lèi)型：ReferenceError

ReferenceError 這類(lèi)錯(cuò)誤通常是指找不到引用，當(dāng)出現(xiàn)這類(lèi)錯(cuò)誤時(shí)在 IDE 中不一定會(huì)提示現(xiàn)錯(cuò)誤（除非安裝了 Linter），所以在代碼的運(yùn)行階段才會(huì)看到這類(lèi)錯(cuò)誤。

排查重點(diǎn)：

• 通過(guò) Chrome 的提示改正
• 在 JavaScript 開(kāi)發(fā)環(huán)境中安裝 ESLint

ReferenceError: a is not defined

ReferenceError: a is not defined

引用錯(cuò)誤：由于變量 a 未定義，所以在使用這個(gè)變量時(shí)會(huì)出現(xiàn)未定義的提示，只要先定義好這個(gè)變量即可。

還有另一種很常見(jiàn)的情況，當(dāng)引用外部包時(shí)出現(xiàn) “包名 + is not defined”，這種情況通常是外部資源沒(méi)有被正確載入，應(yīng)該確保該資源被正確的引入。

下面的例子就是因?yàn)?jQuery 沒(méi)有正確導(dǎo)入而導(dǎo)致的。

Uncaught ReferenceError: $ is not defined

錯(cuò)誤類(lèi)型：TypeError

TypeError 是類(lèi)型上的錯(cuò)誤，同樣 IDE 也不會(huì)預(yù)先提示有錯(cuò)誤，必須在執(zhí)行時(shí)才會(huì)看到，這類(lèi)型的錯(cuò)誤通常是以下幾種：

• 試圖獲取 undefined、null 的屬性
• 嘗試調(diào)用非函式變量或表達(dá)式（例如: 'text'()）

排查重點(diǎn)：在獲取變量前先確認(rèn)其當(dāng)前的數(shù)據(jù)類(lèi)型及結(jié)構(gòu)

Uncaught TypeError: Cannot read property 'a' of undefined

var a; console.log(a.a);

說(shuō)明：在這個(gè)變量的值中無(wú)法找到其特定的屬性，例如在 undefined、null 的值上是找不到其它屬性的，如果無(wú)法確認(rèn)該變量是否為 undefined，可以把代碼改成這樣：

if (typeof a !== 'undefined') {   console.log(a.a); }

Uncaught TypeError: console.log(…) is not a function

console.log('a') (function() {   console.log('立即執(zhí)行函數(shù)') })()

說(shuō)明：這代碼看起來(lái)是立即執(zhí)行函數(shù)的錯(cuò)誤，但是卻出現(xiàn)了 console.log(...) is not a function。這個(gè)錯(cuò)誤主要是因?yàn)槿鄙倭朔痔?hào)。

當(dāng)遇到這類(lèi)錯(cuò)誤時(shí)只要在兩者之間補(bǔ)上分號(hào)即可。

console.log('a'); (function() {   console.log('立即執(zhí)行函數(shù)') })()

錯(cuò)誤類(lèi)型：RangeError

這是創(chuàng)建了超過(guò)長(zhǎng)度上限的數(shù)組或執(zhí)行了無(wú)法退出的遞歸函數(shù)所造成的錯(cuò)誤，遇到這類(lèi)問(wèn)題需要重新檢查代碼的邏輯，是否消耗了過(guò)多的資源（內(nèi)存或CPU資源）。

排查重點(diǎn)：需要重新檢查邏輯，如果有必要可先刪除部分代碼，先找出錯(cuò)誤的片段后再進(jìn)行除錯(cuò)。

Uncaught RangeError: Maximum call stack size exceeded

(function a() {   a(); })();

說(shuō)明：在函數(shù)調(diào)用時(shí)會(huì)產(chǎn)生一個(gè)函數(shù)調(diào)用棧，如果在遞歸的過(guò)程中超過(guò)上限則會(huì)產(chǎn)生錯(cuò)誤。

這類(lèi)錯(cuò)誤也很常見(jiàn)，卻不容易找到出錯(cuò)的原因，其主要原因是在遞歸時(shí)超過(guò)了環(huán)境的限制（使用框架時(shí)也很常見(jiàn)），如果遇到這錯(cuò)誤建議改寫(xiě)當(dāng)前調(diào)用函數(shù)的方式。

總結(jié)

當(dāng) Chrome Console 報(bào)錯(cuò)時(shí)要保持淡定，在編碼的過(guò)程中出現(xiàn)錯(cuò)誤是很常見(jiàn)的，所謂的大佬與新手之間的區(qū)別之一就是遇到錯(cuò)誤時(shí)的經(jīng)驗(yàn)，遇到錯(cuò)誤時(shí)搞不清楚沒(méi)關(guān)系，這都是經(jīng)驗(yàn)的累積。只要積累足夠了，再遇到相同的問(wèn)題時(shí)就能自然而然的輕松面對(duì)了。