作为一名前端工作者，当然经验越多，越容易排错。道理我都懂，但遇到问题还是不知如何下手。解决ChromeDevTools中的常见错误ChromeDeveloperTools的控制台非常易于使用。最常用的是通过console.log显示变量或操作的结果。如果它达到预期，每个人都会高兴。但是一旦红字幸灾乐祸地告诉我们“你弄错了！”，这对我们来说无疑是一次挫折。当我们不知道如何着手解决错误时，我们只能反复检查自己的代码，看看有没有错。陌生的地方，有时候即使停错了地方，往往也不知道是什么意思，要花很多时间。本文介绍了Chrome开发者工具中常见的错误反馈和排查技巧，让你不再为屏幕上的红色文字而沮丧，学会如何快速搜索错误代码。注意：JavaScript是一种同步编程语言。如果出现错误，下面的代码将无法运行。如果不解决红色文字，可能会导致下一行代码出错或者无法继续运行。错误类型：SyntaxErrorSyntaxError类型的错误通常是语法错误。遇到此类错误时，建议通过您的IDE检查。比如VSCode可以直接跳出这种错误提示。如下图，VSCode用红色波浪线提示family对象有错误。当发生错误时，建议不要只检查当前行。该错误可能存在于上下文中（可能存在跨越多行的错误）。在这个例子中，仔细检查可以发现'小明'后面少了一个逗号。排查重点：使用“VSCode”等主流IDE排查UncaughtSyntaxError:Unexpectedidentifiervarperson={name:'Xiaoming'family:{name:'Xiaoming'}}语法解析错误，因为对象结构中缺少逗号，除了在VSCode中查看外，还可以直接通过Chrome控制台切换到Source页面查看错误行，检查该行上下文是否有语法错误。未捕获的语法错误：inputfunctionfn()的意外结束{console.log('这是一个函数');控制台日志（fn）；语法解析错误：意外结束，本例中缺少右花括号}，在编写代码时尽量保持正确的锁定，代码排列整齐后更容易发现错误。UncaughtSyntaxError:Unexpectedtoken'}'if(name)console.log('immediatelyexecutefunction')};Syntaxparsingerror:Unexpectedsymbol}，代码末尾多出一个}符号导致环境运行不正常，该错误的排查方法同上，代码尽量整齐排列，保持一致性第一个和最后一个符号。另外，我推荐一个VSCode工具，可以为你的第一个和最后一个标签添加相应的颜色：https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer示例：pairedincode{}将是以相同的颜色显示。未捕获的语法错误：标识符“a”已被声明leta；leta；语法错误：标识符（这里指的是变量）已经声明过，应该避免重复同一个变量，ES6禁止对变量使用let和const进行重复声明，简单排除。错误类型：ReferenceErrorReferenceError此类错误通常表示找不到引用。出现此类错误时，IDE可能不会提示错误（除非安装了Linter），因此此类错误只会在代码运行阶段出现。排查重点：通过ChromeError:aisnotdefinedReferenceError:aisnotdefinedreferenceerror:由于变量a未定义，使用该变量时会出现undefined提示，纠正在JavaScript开发环境中安装ESLint，只要变量先定义好了。还有一种很常见的情况，当引用外部包时出现“包名+未定义”，这通常意味着外部资源没有被正确加载，你应该确保资源被正确导入。下面的示例是由于未正确导入jQuery引起的。UncaughtReferenceError:$isnotdefined错误类型：TypeErrorTypeError是类型错误，IDE不会提前提示任何错误，必须在执行时看到。此类错误通常如下：Tryingtogetundefined,nullpropertiesTrytocallanon-functionvariableorexpression(例如：'text'())排查要点：确认变量当前的数据类型和结构在获取它之前UncaughtTypeError:Cannotreadproperty'a'ofundefinedvara;console.log(a.a);说明：在此变量的值中找不到特定属性。例如，在undefined和null的值中找不到其他属性。如果无法确认变量是否未定义，可以将代码改成这样：if(typeofa!=='undefined'){console.log(a.a);}UncaughtTypeError:console.log(...)isnotafunctionconsole.log('a')(function(){console.log('立即执行函数')})()说明：这段代码貌似是立即执行函数出错，但是console.log(...)不是函数出现。这个错误主要是由于缺少分号。遇到此类错误时，只需在两者之间加一个分号即可。console.log('a');(function(){console.log('立即执行函数')})()错误类型：RangeError这是由于创建一个超过长度上限的数组或执行一个recursivefunctionthatcannotexit这种问题引起的错误需要重新检查代码的逻辑，看看是否消耗了过多的资源（内存或CPU资源）。故障排除重点：需要重新检查逻辑。如有必要，可先删除部分代码，先找出错误的段再进行调试。未捕获的RangeError：超出最大调用堆栈大小（functiona（）{a（）;}）（）;说明：调用函数时会产生函数调用栈，递归过程中如果超过上限会产生错误。这种错误也很常见，但是要找到错误的原因并不容易。主要原因是递归时超出了环境限制（使用框架时也很常见）。如果遇到这个错误，建议重写当前调用函数的方法。综上所述，当Chrome控制台报错时，保持冷静。在编码过程中出错是很常见的。所谓高手和新手的区别之一就是遇到错误时的经验。遇到错误不懂也没关系，也就是经验的积累。只要积累够了，面对同样的问题，自然而然，从容不迫。
