首页 > 代码库 > 怪异JS错误的诊断与修复
怪异JS错误的诊断与修复
原文：JavaScript Errors and How to Fix Them
翻译：前端开发whqet， 意译为主，不当之处敬请指正。
作者简介：Jani Hartikainen，拥有十数年的网页应用开发经验，曾经为nokia和低调神秘的startups。(一个创业孵化公司)除了编程和玩游戏，他经常在自己的站点书写JS和高质量的代码。
译者的话，Javascript的调试仍然是大多人的噩梦，有什么妙招吗，看看老外大牛，看看老外大牛如何说……
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
华丽的分隔线之后，言归正传！
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Javascript确实是调试者的噩梦，很难理解错误，给出的行号也往往无用，那么有没有一个常见错误诊断和修复列表呢？马上来，请接着看！
下面是我总结的JS奇怪错误列表，鉴于不同浏览器相同错误的错误提示不同，我们给出了一些不同的示例。
如何阅读错误
首先，我们简要看一下错误提示的结构，以便于我们更好的理解错误，以便将来更好的应对列表未列的错误。
一个典型的错误提示貌似如此，
Uncaught TypeError: undefined is not a function
1.Uncaught TypeError：这个部分用处不大，ca说出现了一个catch语句没有捕捉到的错误，错误类型为TypeError（类型错误）。
2.undefined is not a function：这个是错误提示部分，我们必须逐字理解（字面意思理解），例如本例它的字面意思是代码试图将一个undefined类型用作function。
其他的webkit内核的浏览器，例如Safari，提供了和Chrome相似格式的错误提示，Firefox也差不多，但是不包括第一部分。最新版本的IE也提供了更简洁的错误提示，但是（对IE来说，我们懂得），简洁未必代表更好。
现在来看看真正的错误。
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()
很多时候就是因为，函数名称打错了，产生错误。因为对象的不存在属性的默认值为undefined，因此会产生该错误。
var x = document.getElementByID(‘foo‘); //getElementById方法拼写错误
其他类似错误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‘)
错误修复：确保不向函数、this关键字赋值。
Uncaught TypeError: Converting circular structure to JSON
相关错误：Uncaught TypeError: Converting circular structure to JSON,
TypeError: cyclic object value, Circular reference in value argument not supported
错误产生：产生了环形引用，然后再进行JSON转换（JSON.stringify）时产生错误，如下面代码所示，a和b进行了相互引用，因此不能转换为JSON。
var a = { };
var b = { a: a };
a.b = b;
JSON.stringify(a);错误修复：去除任何欲转换为JSON的对象中的环形引用。
Unexpected token ;
相关错误：Expected ),
missing ) after argument list，
Unexpected token ]
错误产生：JS编译器需要点什么，代码里却没有。通常是忘记了匹配的)、]、}、;等。
错误修复：编译器有时不能正确指出错误行号，比较难以修复。
An error with [ ] { } ( ) ----主要是没有正常匹配而致，错误行号往往不对。
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
Cannot set property ‘foo’ of null,
Cannot set property ‘foo’ of undefined
错误产生：试图将null或undefined当做对象读取属性时，产生错误，如下面代码所示。
var someVal = null; console.log(someVal.foo);
错误修复：一般为拼写错误，好好检查错误行号周边变量的拼写，确保正确。
Uncaught RangeError: Maximum call stack size exceeded
相关错误： Uncaught exception: RangeError: Maximum recursion depth exceeded，
too much recursion，
Stack overflow
错误产生： 由程序逻辑bug造成的无限循环调用函数，无限递归调用函数。
错误修复：检查循环部分，清除造成无限循环的bug。
Uncaught URIError: URI malformed
相关错误： URIError: malformed URI sequence
错误产生： 错误的URL解析请求所致
错误修复：找见错误行号，修正URL请求。
XMLHttpRequest cannot load 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/
错误产生： 使用XMLHttpRequest时url有误所致。
错误修复：确保URL正确，并且保证遵循 same-origin policy（同源策略），解决问题的最佳方案是找到错误提示中的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拥有最无力的错误提示，臭名昭著的phpExpected T_PAAMAYIM_NEKUDOTAYIM除外。如果我们能非常熟悉这些错误，将提大大高调试的效率。
你遇到最纠结的错误是什么，欢迎通过评论吐槽。
延伸阅读
Javascript debugging [slightly] beyond console.log
Google Chrome 调试JS简单教程
JavaScript Debug: A simple wrapper for console.log
----------------------------------------------------------
前端开发whqet，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------
怪异JS错误的诊断与修复