JavaScript 调试常见报错以及修复方法

zhongmeizhi 发布于2019-08-21 10:25 / 998人阅读

摘要：表示错误没有被语句捕获，是错误的名字。如何修复错误确保方法名正确。这个错误的行号将指出正确的位置。相关错误代码调用的方法在当前状态无法调用。通常由引起，在方法准备完毕之前调用它会引起错误。原文翻译出处涂鸦码农错误以及如何修复

（看到一篇调试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 错误以及如何修复

云服务器 GPU云服务器修复方法 javascript调试调试javascript javascript断点调试

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85511.html

汇总Vue常见报错以及解决方案实例

　　前言　　学习中有一种方式就是错题汇总，在学习代码，日常书写代码中对于遇到报错，也要汇总，这样可以在以后编码过程中避免或解决这些问题。　　一、报错结构　　首先对于报错分为：错误类型、错误位置、错误描述、错误规则和问题数量。　　如上图：　　报错类型为编译错误；　　错误位置在D:\myel\src\views\admin\AdminView.vue中的第四行第2个字符；（报错位置不一定每次都是准确的...

3403771864 2023-01-20 08:10 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 评论0 收藏0
python包相对导入

摘要：包中的一个模块可以采用相对路径导入包，不影响模块功能一个脚本未成为模块，即其目录及父目录内无可以采用相对路径导入包，并以脚本模式运行。参考相对导入与绝对导入绝对路径导入格式为import a.b或者from a import b，相对路径导入格式为from . import b或者from ..a import b。 python2默认为相对路径导入，python3默认为绝对路径导...

crossoverJie 2019-07-30 14:31 评论0 收藏0
[你不知道的 JavaScript 类型和语法] 第一章：类型

摘要：语言中规定的类型为以及。这两个值有不同的类型。内建类型定义了七种内建类型中新增提示以上类型，除的被称为基本类型。新增列出的六种类型的值都会返回一个对应类型名称的字符串。是中新增的数据类型，我们会在第三章详细介绍。译者的前言一直都想好好研究这个在 GitHub 上很有名气的系列，而翻译恰是最好的阅读途径之一。可以让我阅读的时候，不那么不求甚解。图灵社区出版了该系列两部分的中文版——...

Astrian 2019-08-22 12:02 评论0 收藏0