JavaScript 調試常見報錯以及修復方法

（看到一篇調試JS頗有用的文章，收藏一下）

JavaScript 調試是一場噩夢：首先給出的錯誤很是難以理解，其次給出的行號不總有幫助。有個查找錯誤含義，及修復措施的列表，是否是頗有用？

如下是奇怪的 JavaScript 錯誤列表。一樣的錯誤，不一樣的瀏覽器會給出不一樣的消息，所以有一些不一樣的例子。

如何讀懂錯誤？

首先，讓咱們快速看下錯誤信息的結構。理解結構有助於理解錯誤，若是遇到列表以外的錯誤會減小麻煩。

Chrome 中典型的錯誤像這樣：

Uncaught TypeError: undefined is not a function

錯誤的結構以下：

1. Uncaught TypeError： 這部分信息一般不是頗有用。Uncaught 表示錯誤沒有被 catch 語句捕獲，TypeError 是錯誤的名字。
2. undefined is not a function: 這部分信息，你必須逐字閱讀。好比這裏表示代碼嘗試使用 undefined ，把它當作一個函數。

其它基於 webkit 的瀏覽器，好比 Safari ，給出的錯誤格式跟 Chrome 很相似。Firefox 也相似，可是不總包含第一部分，最新版本的 IE 也給出比 Chrome 簡單的錯誤 - 可是在這裏，簡單並不總表明好。

如下是真正的錯誤。

Uncaught TypeError: undefined is not a function

相關錯誤：

number is not a function, object is not a function, string is not a function, Unhandled Error: ‘foo’ is not a function, Function Expected

當嘗試調用一個像方法的值時，這個值並非一個方法。好比：

var foo = undefined;
foo();

若是你嘗試調用一個對象的方法時，你輸錯了名字，這個典型的錯誤很容易發生。

var x = document.getElementByID('foo');

因爲對象的屬性不存在，默認是 undefined ，以上代碼將致使這個錯誤。嘗試調用一個像方法的數字，「number is not a function」 錯誤出現。

如何修復錯誤：確保方法名正確。這個錯誤的行號將指出正確的位置。

Uncaught ReferenceError: Invalid left-hand side in assignment

相關錯誤：

Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’, Uncaught exception: ReferenceError: Cannot assign to ‘this’

嘗試給不能賦值的東西賦值，引發這個錯誤。

這個錯誤最多見的例子出如今 if 語句使用：

if(doSomething() = 'somevalue')

此例中，程序員意外地使用了單個等號，而不是雙等號。「left-hand side in assignment」 說起了等號左手邊的部分，所以你能夠看到以上例子，左手邊包含不能賦值的東西，致使這個錯誤。

如何修復錯誤：確保沒有給函數結果賦值，或者給 this 關鍵字賦值。

Uncaught TypeError: Converting circular structure to JSON

相關錯誤：

Uncaught exception: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference in value argument not supported

把循環引用的對象，傳給 JSON.stringify 總會引發錯誤。

var a = { };
var b = { a: a };
a.b = b;
JSON.stringify(a);

因爲以上的 a 和 b 循環引用彼此，結果對象沒法轉換成 JSON。

如何修復錯誤： 移除任何想轉換成 JSON 的對象中的循環引用。

Unexpected token ;

相關錯誤：

Expected ), missing ) after argument list

JavaScript 解釋器預期的東西沒有被包含。不匹配的圓括號或方括號一般引發這個錯誤，錯誤信息可能有所不一樣 - 「Unexpected token ]」 或者 「Expected {」 等。

如何修復錯誤： 有時錯誤出現的行號並不許確，所以很難修復。

• [ ] { } ( ) 這幾個符號不配對經常致使出錯。檢查全部的圓括號和方括號是否配對。行號指出的不只是問題字符。
• Unexpected / 跟正則表達式有關。此時行號一般是正確的。
• Unexpected ; 對象或者數組字面量裏面有個；一般引發這個錯誤，或者函數調用的參數列表裏有個分號。此時的行號一般也是正確的。
  
  

Uncaught SyntaxError: Unexpected token ILLEGAL

相關錯誤：

Unterminated String Literal, Invalid Line Terminator

一個字符串字面量少告終尾的引號。

如何修復錯誤： 確保全部的字符串都有結束的引號。

Uncaught TypeError: Cannot read property ‘foo’ of null, Uncaught TypeError: Cannot read property ‘foo’ of undefined

相關錯誤：

TypeError: someVal is null, Unable to get property ‘foo’ of undefined or null reference

嘗試讀取 null 或者 undefined ，把它當成了對象。例如：

var someVal = null;
console.log(someVal.foo);

如何修復錯誤： 一般因爲拼寫錯誤致使。檢查錯誤指出的行號附近使用的變量名是否正確。

Uncaught TypeError: Cannot set property ‘foo’ of null, Uncaught TypeError: Cannot set property ‘foo’ of undefined

相關錯誤：

TypeError: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference

嘗試寫入 null 或者 undefined ，把它當成了一個對象。例如：

var someVal = null;
someVal.foo = 1;

如何修復錯誤： 也是因爲拼寫錯誤所致。檢查錯誤指出的行號附近的變量名。

Uncaught RangeError: Maximum call stack size exceeded

相關錯誤：

Related errors: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow

一般由程序邏輯 bug 引發，致使函數的無限遞歸調用。

如何修復錯誤： 檢查遞歸函數中可能致使無限循環 的 bug 。

Uncaught URIError: URI malformed

相關錯誤：

URIError: malformed URI sequence

無效的 decodeURIComponent 調用所致。

如何修復錯誤： 按照錯誤指出的行號，檢查 decodeURIComponent 調用，它是正確的。

XMLHttpRequest cannot load [http://some/url/](http://some/url/). No ‘Access-Control-Allow-Origin’ header is present on the requested resource

相關錯誤：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
[http://some/url/](http://some/url/)

錯誤確定是使用 XMLHttpRequest 引發的。

如何修復： 確保請求的 URL 是正確的，它遵循同源策略 。最好的方法是從代碼中找到錯誤信息指出的 URL 。

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

相關錯誤：

InvalidStateError, DOMException code 11

代碼調用的方法在當前狀態沒法調用。一般由 XMLHttpRequest 引發，在方法準備完畢以前調用它會引發錯誤。

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Some-Header', 'val');

這時就會出錯，由於 setRequestHeader 方法只能在 xhr.open 方法以後調用。

如何修復： 查看錯誤指出的行號，確保代碼運行的時機正確，或者在它（例如 xhr.open）以前添加了沒必要要的調用

結論

我看過很多無用的 JavaScript 錯誤，好比 PHP 中聲名狼藉的異常 Expected T_PAAMAYIM_NEKUDOTAYIM 。拋出更熟悉的錯誤才更有意義。現代瀏覽器再也不拋出徹底無用的錯誤，纔會更有幫助。

---

原文Jani Hartikainen - 《JavaScript Errors and How to Fix Them》
翻譯出處：塗鴉碼農 - JavaScript 錯誤以及如何修復