JavaScript 调试常见报错以及修复方法
(看到一篇调试JS很有用的文章,收藏一下)
JavaScript 调试是一场噩梦:首先给出的错误非常难以理解,其次给出的行号不总有帮助。有个查找错误含义,及修复措施的列表,是不是很有用?
以下是奇怪的 JavaScript 错误列表。同样的错误,不同的浏览器会给出不同的消息,因此有一些不同的例子。
如何读懂错误?
首先,让我们快速看下错误信息的结构。理解结构有助于理解错误,如果遇到列表之外的错误会减少麻烦。
Chrome 中典型的错误像这样:
Uncaught TypeError: undefined is not a function
错误的结构如下:
Uncaught TypeError:
这部分信息通常不是很有用。Uncaught
表示错误没有被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
,以上代码将导致这个错误。尝试调用一个像方法的数字,“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 错误以及如何修复
JavaScript 调试常见报错以及修复方法的更多相关文章
- JavaScript 调试常见报错以及原因
JavaScript 调试常见报错以及原因 测试环境 chrome 版本 66.0.3359.170(正式版本) (64 位) TypeError 类型错误 不是操作符所接受的数据类型. //---- ...
- kubeadm常见报错和解决方法
k8s随着社区不断壮大国内使用率现在也是比较高的,常用的部署方式主要还是以二进制和kubeadm为主,当然1.13之前大部分人还是以二进制,但是随着版本更新kubeadm已经逐步适用于生成环境,由于k ...
- struts2学习笔记——常见报错及解决方法汇总(持续更新)
操作环境:(1)Tomcat 7.0.72.0 (2)OS Name: Windows 7 (3)JVM Version: 1.8.0_25-b18 (4)eclipse Version: Ke ...
- iOS将Unity导出的Xcode工程导入到另一个Xcode项目, 及常见报错的解决方法
demo下载地址 http://pan.baidu.com/s/1pLcpKpl 1.Unity导出工程时设置bundle id要与项目一致 2.修改bit code为NO 3.删除Main.stor ...
- SpringBoot常见报错及解决方法
问题一 Field redisUtil in com.sui.demo.controller.redisController required a bean of type 'com.sui.demo ...
- Eclipse 中的Maven常见报错及解决方法
1.不小心将项目中的Maven Dependencies删除报错 项目报错: 点击Add Library,添加Maven Managed Dependencies又提示如下: 在这个时候需要项目右键: ...
- WebService CXF调试常见报错及解决方案
1.CXF java.lang.RuntimeException: Cannot create a secure XMLInputFactory 解决方案:从apache-cxf/lib下寻找Wood ...
- linux运维、架构之路-PHP编译常见报错及解决方法
1. configure: error: xslt-config not found. Please reinstall the libxslt >= 1.1.0 distribution 复制 ...
- 03:git常见报错解决方法
1.1 git常见报错解决方法 1.warning: LF will be replaced by CRLF in .idea/workspace.xml. 参考博客:https://www.cnbl ...
随机推荐
- Java排序8大算法实现
概述 排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 我们这里说说八大排序就是内部排序. 当n较大, ...
- Opencart 之 Registry 类详解
Registry 中文意思是记录,登记,记录本的意思, 在opencart中他的用途就是 登记公共类.类的原型放在 system\engine文件夹下 代码很简单: <?php final cl ...
- Nginx配置http强制跳转到https
目的:访问http://sdk.open.test.com/时强制自动跳转到https://sdk.open.test.com/ 修改nginx站点配置文件sdk.open.test.com.conf ...
- 绘图quartz之渐变
实现线性渐变 径向渐变 自己新建的view中有一个drawRect:(cgrect)rect方法 在这个方法里 可以通过画图 将内容显示在画板上(即最下边的view) 渐变的方式分两种 ...
- What's the use of @ before the path defination
When you define your path const : const string Child_Medical_Pdf = @"~/Media/ChildPdf"; Th ...
- 【POJ2761】【区间第k大】Feed the dogs(吐槽)
Description Wind loves pretty dogs very much, and she has n pet dogs. So Jiajia has to feed the dogs ...
- MySQL 5.6 for Windows 解压缩版配置安装(转)
转自:http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html MySQL是一个小巧玲珑但功能强大的数据库,目前十分流行.但是官网给 ...
- Struts2中的链接标签 <s:url>和<s:a>---在action中获取jsp表单提交的参数(转)
转自:http://sgl124764903.iteye.com/blog/444183 1.普通链接 Web程序中最普通的应用是链接到其他页面,下面看Welcome.jsp. <%@ page ...
- JqGrid自定义toolbar
1.设置toolbar参数为[true,"top"],其意思是toolbar显示在Grid顶部,且其id为t_+Grid的id.e.g.: Grid的id为myGrid,toolb ...
- javascript实现ajax
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...