欢迎光临小站,愿能为您提供帮助与启发,热爱分享、享受分享、乐于分享,让我们携手共同进步。
JavaScript 调试是一场噩梦:首先给出的错误非常难以理解,其次给出的行号不总有帮助。有个查找错误含义,及修复措施的列表,是不是很有用?
以下是奇怪的 JavaScript 错误列表。同样的错误,不同的浏览器会给出不同的消息,因此有一些不同的例子。
如何读懂错误?
首先,让我们快速看下错误信息的结构。理解结构有助于理解错误,如果遇到列表之外的错误会减少麻烦。
Chrome 中典型的错误像这样:
1 | Uncaught TypeError: undefined is not a function |
- Uncaught TypeError:这部分信息通常不是很有用。
Uncaught
表示错误没有被catch
语句捕获,TypeError
是错误的名字。 - undefined is not a function:这部分信息,你必须逐字阅读。比如这里表示代码尝试使用
undefined
,把它当做一个函数。
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 当尝试调用一个像方法的值时,这个值并不是一个方法。比如:1 2 | var foo = undefined; foo(); |
1 | 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 语句使用:1 | if(doSomething() = 'somevalue') |
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
总会引起错误。
1 2 3 4 | 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
,把它当成了对象。例如:
1 2 | 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,把它当成了一个对象。例如:1 2 | 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 loadhttp://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/错误肯定是使用 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
引起,在方法准备完毕之前调用它会引起错误。
1 2 | var xhr = new XMLHttpRequest(); xhr.setRequestHeader('Some-Header', 'val'); |
setRequestHeader
方法只能在xhr.open
方法之后调用。
如何修复:查看错误指出的行号,确保代码运行的时机正确,或者在它(例如xhr.open)之前添加了不必要的调用
结论
我看过不少无用的 JavaScript 错误,比如 PHP 中声名狼藉的异常Expected T_PAAMAYIM_NEKUDOTAYIM
。抛出更熟悉的错误才更有意义。现代浏览器不再抛出完全无用的错误,才会更有帮助。