[译]JavaScript 错误和处理
JavaScript的调试是一个噩梦:一些错误刚开始很难理解,并且给出的错误函数也经常是没用的。如果把错误都列出来并给出解决办法会不会很有用呢。
下面列出了JavaScript一系列的奇怪错误。对于同样的错误,不同的浏览器会给出不同的报错信息,所以这里提供了适用于不同情况的示例。
怎样阅读错误
在列出错误之前,让我们快速看一下错误信息的结构。理解这些结构可以帮助我们更好的理解错误,同时在你遇到这里没有列出来的错误时也不会太棘手。
一个典型的错误,来自Chrome:
Uncaught TypeError: undefined is not a function
这个错误的结构如下:
- Uncaught TypeError: 错误信息的这一部分通常没什么用。不能捕捉意味着这个错误不能被
catch
语句捕捉到,TypeError
是错误的名字。 - 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
,上述代码会导致这种错误。
如何解决这种bug:确保方法名正确。这种错误,报错的行数通常指向的是正确的地址。
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”这条消息指向等号左侧,就像上述例子一样,等号左侧不能被赋值,导致这个错误。
如何解决这种bug:确保你没有向函数执行结果或者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。
如何解决这种bug:对于要转换为JSON的对象,避免对象的相互引用。
Unexpected token ;
相关错误:Expected ), missing ) after argument list
JavaScript解释器期望一个东西,但是这个东西没出现,最常见是括号不匹配。
错误中的记号可能会不尽相同:“Unexpected token ]”或者“Expected {” 等等。
如何解决这种bug:有时候错误行数并没有指向正确的位置,给错误修复带来困难。
- 对于[]{}()等一般是由于不匹配引起的错误,这种情况下错误行数通常指向别的地方而不是发生错误地方。
- / 一般和正则表达式有关,这种情况行数一般指向正确位置。
- 对于分号; 一般是由于对象或者数组内出现了分号。这种错误行号位置也是正确的。
Uncaught SyntaxError: Unexpected token ILLEGAL
相关错误:Unterminated String Literal, Invalid Line Terminator
字面上理解,字符串缺少了匹配的引号。
如何解决这种bug:确保字符传引号匹配。
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);
**如何解决这种bug:通常是由书写错误引起的,检查错误行数附近的变量名是否书写正确
(译者注:作者说由书写错误引起,我感觉并不妥当,有时候对象是从别处获取的,但是为null没有检查就直接调用也会出现这种情况。)
Uncaught RangeError: Maximum call stack size exceeded
相关错误:Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow
通常是由于逻辑错误引起的,调用无线递归的函数造成的。
如何解决这种bug:对递归函数进行检查。
Uncaught URIError: URI malformed
相关错误:URIError: malformed URI sequence
无效的decodeURIComponent
调用引起。
如何解决这种bug: 检查错误函数附近的decodeURIComponent
,获取正确的输入值。
http://some/url/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource" name="XMLHttpRequest cannot load http://some/url/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource" class="anchor">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引起的。
如何解决这种bug:保证请求地址正确,并且没有跨域。
(译者注:Chrome下可以检查开发者工具的Network)。
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
相关错误:InvalidStateError, DOMException code 11
试图在不该调用这个方法的时候调用了该方法。通常在使用XMLHttpRequest的时候,XMLHttpRequest对象还没准备好便调用了其他方法。
var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Some-Header', 'val');
这种情况下,会得到上述错误,因为setRequestHeader
必须在open
方法之后调用。
如何解决这种bug:检查错误行数附近的代码,确保代码再正确的时机执行,或者在之前增加必要的调用。(如xhr.open
)
总结
JavaScript里有一些我觉得很没用的错误信息,除了像PHP中的Expected T_PAAMAYIM_NEKUDOTAYIM
,熟悉这些错误,并结合现代浏览器的帮助更好的解决bug!
更多资源:JavaScript 异常档案
[译]JavaScript 错误和处理的更多相关文章
- JavaScript错误/异常处理
JavaScript Try...Catch 语句 介绍:JavaScript中的try...carch语句的作用和C#中的try...catch语句的作用一样, 都是捕获并处理异常. 语法: try ...
- Visual Studio 2013中因SignalR的Browser Link引起的Javascript错误一则
众所周知Visual Studio 2013中有一个由SignalR机制实现的Browser Link功能,意思是开发人员可以同时使用多个浏览器进行调试,当按下IDE中的Browser Link按钮后 ...
- 使用 Google Analytics 跟踪 JavaScript 错误
Google Analytics(谷歌分析)不仅仅是一个流量统计工具,你还可以用它来测量广告活动的有效性,跟踪用户多远到所需的页面流(从点击广告到购物车到结账页面)获取,并基于用户的信息设置浏览器和语 ...
- javascript错误处理与调试(转)
JavaScript 在错误处理调试上一直是它的软肋,如果脚本出错,给出的提示经常也让人摸不着头脑. ECMAScript 第 3 版为了解决这个问题引入了 try...catch 和 throw 语 ...
- JavaScript错误处理
JavaScript 错误 - Throw.Try 和 Catch JavaScript 测试和捕捉 try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代 ...
- 第一百二十三节,JavaScript错误处理与调试
JavaScript错误处理与调试 学习要点: 1.浏览器错误报告 2.错误处理 3.错误事件 4.错误处理策略 5.调试技术 6.调试工具 JavaScript在错误处理调试上一直是它的软肋,如果脚 ...
- 1000多个项目中的十大JavaScript错误以及如何避免
通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个.下面会向大家介绍这些错误发生的原因以及如何防止. 对于这些错误发生的次数,我们是通过收集的数据统计得出的 ...
- JavaScript 错误处理 Throw、Try 和 Catch
try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. JavaScript 错误 当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错 ...
- 【转】Javascript错误处理——try…catch
无论我们编程多么精通,脚本错误怎是难免.可能是我们的错误造成,或异常输入,错误的服务器端响应以及无数个其他原因. 通常,当发送错误时脚本会立刻停止,打印至控制台. 但try...catch语法结构可以 ...
随机推荐
- android模拟器访问localhost或127.0.0.1报错
在一般的Java Web程序开发中,我们通常使用localhost或者127.0.0.1来访问本机的Web服务,但是如果我们在Android模拟器中也采用同样的地址来访问,Android模拟器将无法正 ...
- 退出程序是跳过屏幕自检 比如 必输 EXIT-COMMAND
控制必须输入可以,但是我退出程序的时候还要求我输入个值才能退出,这太变态了,相信很多同志都在SAP程序中反感过这个问题. 标准程序咱就不说了,忍了,新开发的功能还是要解决这个问题. 办法很简单:MOD ...
- HadoopDB:混合分布式系统
HadoopDB 是一个 Mapreduce 和传统关系型数据库的结合方案,以充分利用 RDBMS 的性能和 Hadoop 的容错.分布特性.2009 年被 Yale 大学教授 Abadi 提出,继而 ...
- cocos2d-x中本地推送消息
作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4038277.html IOS下很简单: 添加一条推送 void PushNotific ...
- C++ 构造过程和析构过程
1.C++构造和析构的过程,类似于穿衣脱衣的过程.穿衣是:先穿内衣,再穿外套.脱衣是:先脱外套,再脱内衣.C++构造过程:首先调用父类构造方法,再调用子类构造方法.C++析构过程:首先调用子类析构方法 ...
- Android下得到APK包含信息
很多情况下,我们需要通过APK文件来得到它的一些信息. (此时此APK不一定被安装了) 0. 基础知识:可以通过android.content.Context的方法 getPackageManager ...
- UIAlertController 简单修改title以及按钮的字体颜色
苦逼的开发者,最终败给了一个任性的UI,系统原生UIAlertController的按纽颜色必须改.于是,开始了不归路.之前的版本是自己用view写的一个仿系统UIActionSheet,动画感觉都挺 ...
- Linux中的终端、控制台、tty、pty等概念
参考:http://news.newhua.com/news1/program_language/2010/623/10623141048745773199BCF0CFH6AKB9930IGCFKHB ...
- vmware安装 ios10.8 过程
前言:由于mac笔记本太贵,并且对于用thinkpad 习惯的我,实在是不想买mac,没办法,只能在win7下面使用vmware 安装mac虚拟机了.但是ios的版本一直变,vmware也一直在升级, ...
- zend studio快捷模板 开发工具之zend studio一些配置
以下是以Zend Studio 10.0.0版本为基础的: 模板的配置(template): [菜单]->[Window]->[preferences]->[PHP]->[Ed ...