相信很多掘友在项目开发和解决bug过程中一般都会用到console.log调试，来方便查看变量的值、调试代码的执行流程，但单纯只依赖console.log来进行调试是远远不够的，因为它只能简单地输出一些信息，而且在输出的信息过多时，还可能会导致输出信息混乱，难以查找问题。因此可以尝试一下以下几种调试方式

console.error

打印一条错误信息

console.error('报错了呀！！！');

console.warn

打印一条警告信息

console.warn('警告警告！！！');

console.table

以表格的形式打印出来

  console.table([ {name: 'iwhao',age:18}, {name: 'test',age:30}] );

console.time

你可以启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。当以此计时器名字为参数调用 console.timeEnd() 时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。

console.time('one');
setTimeout(function(){
    console.timeEnd('one')
},2000);

console的扩展API

这里就只简单的列举几个更多请查看[链接](console - Web API | MDN (mozilla.org))

`console缺陷`

1.console过多会造成不必要的性能开销，在某些情况下，console 输出可能会对性能产生一定的影响，特别是在循环中频繁输出大量信息

2.还有一个是打印的值和真实值不一致，例如下面这个案列,打印时是修改之前的值，但展开后却是修改之后的值，如果要打印的是一个大对象，而恰好之后某个时机你修改了，这就会导致判断错误。

let a = {name: 'iwhao'};
console.log(a);
a.name = 'iwhao is the most handsome';

解决以上这个问题最简单的方法就是加一个 debugger 断言,当代码在执行到debugger语句时自动触发断点,这样打印的值和展开的值就一样

let a = {name: 'iwhao'};
console.log(a);
debugger;
a.name = 'iwhao is the most handsome';

再或者可以执行打印元素

let a = {name: 'iwhao'};
console.log(a.name);
a.name = 'iwhao is the most handsome';

LogPoint

什么是LogPoint? 简单来说与console 输出类似,但比console更简洁，而且能避免污染代码,
ide和浏览器都可以直接调试 Logpoints 来输出信息。提高了代码的整洁性，最重要的是可以在实时应用程序中使用

例如如下代码，用会用console的方式某个条件获取到该值，就要加上if判断，符合条件是调用console打印，这样写没问题，但为了调试确多余了无用代码

let arr = [
  { name: 'a', value: 1 },
  { name: 'b', value: 2 },
  { name: 'c', value: 3 },
  { name: 'd', value: 4 }]

arr.forEach(element => {
  if (element.name === 'c') {
    console.log(element)
  }
});

用LogPoint的方式就会简单许多，在代码左侧行标出，右键点击添加条件断点

输入条件 element.name === 'c'

运行调试左侧可以

常见错误类型

了解清楚常见错误类型, 对调试和解决bug很有帮助

SyntaxError：语法错误，例如括号不匹配、缺少分号、无效的变量名等。

(1+1）
VM153:1 Uncaught SyntaxError: Invalid or unexpected token

ReferenceError：引用错误，当你尝试访问一个未声明的变量、函数或对象时，或者在一个严格模式下使用了保留字作为变量名时会出现这种错误。

conso;e.log(a)
VM142:1 Uncaught ReferenceError: a is not defined

TypeError：类型错误，当你尝试对不同类型的值执行不兼容的操作时，比如对值的操作方法不存在或并未正确的定义时，或将函数应用于非函数类型的值。

let a;
console.log(a.b)
VM162:2 Uncaught TypeError: Cannot read properties of undefined (reading 'b')

ReferenceError: xxx is not defined: 试图使用未定义的变量或函数。

console.log(nameasdsadsad);
VM641:1 Uncaught ReferenceError: nameasdsadsad is not defined

Error：这是一个基类，所有自定义错误都会继承自它，比如网络错误、文件系统错误等。
EvalError: 当使用 eval() 函数时，如果遇到错误，会抛出这个错误。

eval('Hello, world!');
VM409:1 Uncaught SyntaxError: Unexpected token '!'

URIError：无效的 URI 字符、RI 格式错误调用函数时参数错误

decodeURI("%");
decodeURI(123);

VM608:1 Uncaught URIError: URI malformed

提升调试技巧，不止于console.log