最近开始使用Chrome控制台检测代码错误,对于经常碰到的报错做一个汇总,免得每次遇到都要重新想一遍策略,错误原因,重复劳动,浪费时间。
由于不是每个错误都能碰到,以下仅列出个人写代码时经常碰到的报错,以及个人理解与解决办法。随着时间的增长,遇到其他错误时再更新。
Chrome控制台报错汇总:
1、 Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
在'节点'上执行函数'appendChild'失败:不是节点
原因:要插入的内容不是节点,无法插入。
解决办法:返回检查准备插入内容的节点属性。若要插入纯文本,请使用document.createTextNode()进行文本节点创建(我犯的错误,囧)。
2、Invalid or unexpected token
无效的符号
原因:多见于插入中文符号,如‘;’。
解决办法:根据报错行提示,返回编辑器查找符号错误进行修改。
3、2 arguments required, but only 1 present.系列
需要2个参数,当前只有1个参数
原因:函数方法中必需的参数没有写全。例如setAttribute(attr,val),必需两个参数都写全。
解决方法:检查所调用函数的所需参数值,填写完整。
4、 XXX(变量名) is not defined
变量没有被创建
原因:引用的变量名写错,或者在let及const声明,对变量初始化与赋值前引用了变量。
解决办法:① 查找变量在环境中的位置,确保调用位于变量声明后;
② 确认变量名没有打错;
5、Identifier XXX(变量名) has already been declared
变量已经被声明
原因:变量名重复(使用var声明的话,不会出现此错误)。
解决方法:换个变量名。
6、 Assignment to constant variable
给一个常量配值
原因:变量为const声明的常量,无法对常量值进行修改。
解决办法:将const声明修改为let或var声明
7、Exception: DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
阻止了一个域为null的frame页面访问另一个域为null的页面
原因:打开本地页面时,页面中存在多个frame框架,造成了跨域访问
解决办法:localhost访问本地页面
8、Uncaught DOMException: Failed to execute 'webkitMatchesSelector' on 'Element': '[object HTMLBodyElement]' is not a valid selector.
在Element元素上执行webkitMatchesSelector方法失败:[object HTMLBodyElement]不是合理参数
原因:Element.matchesSelector方法只接收CSS选择符为参数,跟querySelector传入的参数一致
解决办法:改变参数
9、XXX call super constructor in derived class before accessing 'this' or returning from derived constructor.
使用了继承的class类在使用前没有调用super导入
原因:使用class继承时,必须在constructor函数中使用super
解决办法:在contructor中调用super()
不骄不躁,不忘初心,自律才能自由