前端常见报错原因详解

1、xxx is not defined

xxx 没有定义

2、xxx is not a function

xxx 不是一个函数
xxx此时是undefined

3、Cannot read property ‘xxx‘ of undefined

不能读取undefined的xxx属性

xxx前面的变量是undefined

4、Cannot set property ‘xxx‘ of null

不能给null设置xxx属性

xxx前面的变量是null

5、Invalid or unexpected token

标点符号可能是中文

6、Unexpected token a in JSON at position 0

使用JSON.parse进行解析json字符串时,解析的内容不合法

7、XMLHttpRequest cannot load http://XXXXXX. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://XXXXXX‘ is therefore not allowed access.

使用ajax请求数据时,产生跨域了

8、Illegal break statement

出现了非法语句

9、SyntaxError(语法错误)

SyntaxError是解析代码时发生的语法错误
// 变量名错误
var 1a;
// 缺少括号
console.log (‘hello‘;

10、ReferenceErro(引用错误)

ReferenceError是引用一个不存在的变量时发生的错误。

unknownVariable
// ReferenceError: unknownVariable is not defined

另一种触发场景是,将一个值分配给无法分配的对象,比如对函数的运行结果或者this赋值。

console.log() = 1
// ReferenceError: Invalid left-hand side in assignment this = 1
// ReferenceError: Invalid left-hand side in assignment

上面代码对函数console.log的运行结果和this赋值,结果都引发了ReferenceError错误

11、RangeError(范围错误)

RangeError是当一个值超出有效范围时发生的错误。主要有几种情况,一是数组长度为负数,二是Number对象的方法参数超出范围,以及函数堆栈超过最大值。

new Array(-1)
// RangeError: Invalid array length
(1234).toExponential(21)
// RangeError: toExponential() argument must be between 0 and 20

12、TypeError(类型错误)

TypeError是变量或参数不是预期类型时发生的错误。比如,对字符串、布尔值、数值等原始类型的值使用new命令,就会抛出这种错误,因为new命令的参数应该是一个构造函数。

new 123
//TypeError: number is not a func var obj = {}; obj.unknownMethod()
// TypeError: undefined is not a function

上面代码的第二种情况,调用对象不存在的方法,会抛出TypeError错误。

13、URIError(URI错误)

URIError是URI相关函数的参数不正确时抛出的错误,主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。

decodeURI(‘%2‘)
// URIError: URI malformed

14、EvalError(eval错误)

eval函数没有被正确执行时,会抛出EvalError错误。该错误类型已经不再在ES5中出现了,只是为了保证与以前代码兼容,才继续保留。

以上这6种派生错误,连同原始的Error对象,都是构造函数。开发者可以使用它们,人为生成错误对象的实例。

new Error("出错了!");
new RangeError("出错了,变量超出有效范围!");
new TypeError("出错了,变量类型无效!");

上面代码表示新建错误对象的实例,实质就是手动抛出错误。可以看到,错误对象的构造函数接受一个参数,代表错误提示信息(message)。

15、错误举例

找不到引入的.js文件

引用的.js文件找不到,chrome报错信息如下:
GET file:///D:/JavaBooks/js/jquery%20validation/src-gzh/jquery.validate-1.7.src net::ERR_FILE_NOT_FOUND

可能原因:.js文件名字拼写错误(比如,少了文件后缀.js)

js函数缺少括号),函数体缺少大括号}

如果函数缺少括号或者函数体缺少括号,浏览器debug时都会提示报错信息。这里分2种情况:
1、一般报错信息都在报在错误的地方,这种情况比较好说。
2、但是有的时候会报在其他的地方,这个时候要明白的是,报错信息缺少括号这一点是确定无疑的,现在就是要定位到具体是哪一行报错。

例如
报错函数/函数体缺少括号,报错的地方不是函数/函数体的末尾,而是报在调用该函数的地方。

css代码使用了//注释,导致有的div内容出不来,然后也不报错

css注释,只能使用/* 注释内容 */,而不能使用双斜杠//。

定义了多个同名的变量

浏览器会报错。

文档未加载完毕,就开始执行js代码导致的错误

文档/DOM未加载完毕,就开始执行js代码。

比如,js代码写在html代码的前面,而且document.getElementById(‘traffic‘)这样来访问DOM(即文档的元素),那么这个时候就会报TypeError: a is null(火狐浏览器,注:a变量没用,只会起误导作用)或者Uncaught TypeError: Cannot read property ‘click2‘ of null(谷歌浏览器)。

js 对象的函数未定义

浏览器报错,说对象的函数未定义,这个时候可以肯定的一点是,当前这个对象是没有这个函数的。

比如,高德地图对象函数未定义,是因为地图对象被2.5维地图对象覆盖了。
出现这种bug时,问题在函数,往往是因为对象被重复定义,或者被重新赋值了。
原文:https://blog.csdn.net/zuggs_/article/details/80747979

原文地址:https://www.cnblogs.com/webwangjie/p/10172372.html

时间: 2024-10-14 05:24:24

前端常见报错原因详解的相关文章

rabbitmq编译部署以及常见报错

(一)源码安装Erlang(1)下载erlang源码包wget http://www.erlang.org/download/otp_src_R13B04.tar.gz(2)解压缩erlang源码包tar -zxvf otp_src_R13B04.tar.gz(3)安装./configure??--prefix=/usr/local/erlang./make./make install如果抛出如下错误No curses library functions found请先安装?curses lib

[转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇

前端-chromeF12 谷歌开发者工具详解 Sources篇 原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 console 里面的东西 前端的不懂啊.. 这次分享的是Chrome开发工具中最有用的面板Sources. Sources面板几乎是我最常用到的Chrome功能面板,也是在我看来决解一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,我首先就会打开So

Zabbix 常见报错

Zabbix 常见报错 一.zabbix web上出现Get value from agent failed: ZBX_TCP_READ() failed: [104] Connection reset by peer 1. Debug 过程: 1.1 在zabbix server 上使用get 命令时出现:1.2 查看zabbix_agent 日志出现failed to accept an incoming connection: connection from "28.44.20.129&q

ramoops驱动注册失败原因详解

在使用linux的ramoops驱动模块时,在编译完加载时,会发现驱动加载不成功.明明直接使用的内核代码,为什么会出现这样的情况呢? 首先看一下ramoops的初始化代码: 180 static int __init ramoops_init(void) 181 { 182 return platform_driver_probe(&ramoops_driver, ramoops_probe); 183 } 184 185 static void __exit ramoops_exit(void

cocos2d-js运行游戏常见报错

作为新手,参考官网案例自己再打一遍代码运行游戏时常会出现许多相同报错,有的是由于自己单词拼写错误,或者文件未加载等,在写代码的时候一定要细心细心再细心,下面是我这两天运行出现的一些报错及我的解决方法,多是自己搜索外带摸索总结的,有什么不对的敬请指正,当然,运行过程中也许会有各种问题,我这边也可能只是极少数,后续碰到的会继续更新,希望大家看到并可以解决的也可以共享下. 运行游戏常见报错: 1.loader for [null] not exists! 尝试方法:极有可能是加载什么类型的资源没有后缀

android开发_git操作中常见报错及解决办法

Focus on technology, enjoy life!-- QQ:804212028 浏览链接:http://blog.csdn.net/y18334702058/article/details/44624305 主题:git操作中常见报错 - 如果输入$ git remote add origin [email protected]:xxx(github帐号名)/yyy(项目名).git 提示出错信息:fatal: remote origin already exists. 解决办法

web报表工具FineReport使用中遇到的常见报错及解决办法(一)

FineReport使用中遇到的常见报错及解决办法(一) 这里写点抛砖引玉,希望大家能把自己整理的问题及解决方法晾出来,Mark一下,利人利己. 出现问题先搜一下文档上有没有,再看看度娘有没有,再看看论坛有没有.有报错要看日志.下面简单罗列下常见的问题,大多文档上都有提到的. 1.address pool is full: 含义:地址池满,连接数超过并发数上限. 解决办法: 若在FineReport的连接池属性的设置中,已将最大连接数设置得过大,还出现如上的报错,此时通常就是数据库进程(proc

java报表工具FineReport使用中遇到的常见报错及解决办法(一)

FineReport使用中遇到的常见报错及解决办法(一) 这里写点抛砖引玉,希望大家能把自己整理的问题及解决方法晾出来,Mark一下,利人利己. 出现问题先搜一下文档上有没有,再看看度娘有没有,再看看论坛有没有.有报错要看日志.下面简单罗列下常见的问题,大多文档上都有提到的. 1.address pool is full: 含义:地址池满,连接数超过并发数上限. 解决办法: 若在FineReport的连接池属性的设置中,已将最大连接数设置得过大,还出现如上的报错,此时通常就是数据库进程(proc

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1