浏览器的开发者工具为我们提供了一个强大的调试系统，可以用来查看DOM树结构、CSS样式调试、动画调试、JavaScript代码断点调试等，今天我们就来看看控制台调试的实用调试技巧。如今，我们项目的开发通常使用React、Vue等前端框架，前端调试变得更加困难。除了使用ReactDevTools和VueDevTools等插件外，我们使用最多的是console.log()。当然大多数情况下console.log()可以满足我们的需求，但是当数据变得比较复杂的时候，console.log()就有点简单了。其实console对象提供了很多方法，下面是console对象包含的方法：console对象提供了浏览器控制台调试接口，我们可以从任何全局对象访问它，如果你平时只用console.log()toOutput一些变量，那么你可能没有使用过控制台的强大功能。带你用控制台玩花式调试。一、基本打印1、console.log()console.log()是最基本也是最常用的用法。它可以在JavaScript代码的任何地方使用，然后你就可以在浏览器的控制台看到打印的信息。它的基本用法如下：letname="CUGGZ";letage=18;console.log(name)//CUGGZconsole.log(name,age)//CUGGZ18console.log("message:",name,age)//message:CUGGZ18另外，console.log()还支持以下输出方式：letname="CUGGZ";letage=18;letheight=180;console.log('Name:%s,Age:%d',name,age)//Name:CUGGZ,Age:18console.log('Age:%d,Height:%d',age,height)//Age:18,Height:180这里将下面的变量赋值到前面占位符的位置，一一对应。这种写法可以保证复杂输出时模板和数据的分离，结构更加清晰。但是如果是简单的输出，就没有必要写这个了。在console.log中，支持的占位符格式如下：string:%sinteger:%dfloatingpointnumber:%fobject:%oor%OCSSstyle:%c可以看到，除了最基本的类型之外，它还支持定义CSS样式：letname="CUGGZ";console.log('MyNameis%cCUGGZ','color:skyblue;font-size:30px;')打印结果如下（it貌似没什么Egguse):这种打印方式可能对打印图片有用，检查图片是否正确：console.log('%c','background-image:url("http://iyeslogo.orbrand.com/150902Google/005.gif");background-size:120%120%;background-repeat:no-repeat;background-position:centercenter;line-height:60px;padding:30px120px;');打印结果如下：browse浏览器的开发者工具为我们提供了一个强大的调试系统，可以用来查看DOM树结构、CSS样式调试、动画调试、JavaScript代码断点调试等，今天我们w下面就来看看控制台调试的实用调试技巧吧。如今，我们项目的开发通常使用React、Vue等前端框架，前端调试变得更加困难。除了使用ReactDevTools和VueDevTools等插件外，我们使用最多的是console.log()。当然大多数情况下console.log()可以满足我们的需求，但是当数据变得比较复杂的时候，console.log()就有点简单了。其实console对象提供了很多方法，下面是console对象包含的方法：console对象提供了浏览器控制台调试接口，我们可以从任何全局对象访问它，如果你平时只用console.log()toOutput一些变量，那么你可能没有使用过控制台的强大功能。带你用控制台玩花式调试。一、基本打印1、console.log()console.log()是最基本也是最常用的用法。它可以在JavaScript代码的任何地方使用，然后你就可以在浏览器的控制台看到打印的信息。它的基本用法如下：letname="CUGGZ";letage=18;console.log(name)//CUGGZconsole.log(name,age)//CUGGZ18console.log("message:",name,age)//message:CUGGZ18另外，console.log()还支持以下输出方式：letname="CUGGZ";letage=18;letheight=180;console.log('Name:%s,Age:%d',name,age)//Name:CUGGZ,Age:18console.log('Age:%d,Height:%d',age,height)//Age:18,Height:180这里将下面的变量赋值到前面占位符的位置，一一对应。这种写法可以保证复杂输出时模板和数据的分离，结构更加清晰。但是如果是简单的输出，就没有必要写这个了。在console.log中，支持的占位符格式如下：string:%sinteger:%dfloatingpointnumber:%fobject:%oor%OCSSstyle:%c可以看到，除了最基本的类型之外，它还支持定义CSS样式：letname="CUGGZ";console.log('MyNameis%cCUGGZ','color:skyblue;font-size:30px;')打印结果如下（it貌似没什么Egguse):这种打印方式可能对打印图片有用，检查图片是否正确：console.log('%c','background-image:url("http://iyeslogo.orbrand.com/150902Google/005.gif");background-size:120%120%;background-repeat:no-repeat;background-position:centercenter;line-height:60px;padding:30px120px;');打印结果如下：strict也就是说console.log()不支持打印图片，但是可以使用css背景图打印图片，但是不能直接打印，因为不支持设置宽度图片的高度和高度属性，所以需要使用line-height和padding对图片进行拉伸才能正常显示。我们可以使用console.log()打印人物画，就像知乎：可以使用在线的人物画生成工具，将生成的人物粘贴到console.log()中。在线工具：mg2txt。我的头像生成效果如下，中间的字符就是生成的字符：另外可以看到占位符代表一个对象的时候，有两种写法：%c或者%C，所以它们之间有什么区别？羊毛布？当我们指定的对象是普通的object对象时，两者没有区别。如果是DOM节点，那就有区别了。看下面的例子：可以看到DOM节点打印了使用%o的内容，包括它的子节点。%O打印的是DOM节点的对象属性，可以根据需要选择性打印。2.console.warn()console.warn()方法用于在控制台输出警告信息。它的用法和console.log完全一样，只是显示的风格不同。在信息的顶部添加了一个黄色三角形以表示警告：constapp=["facebook","google","twitter"];console。警告（应用程序）；打印样式如下：3.console.error()console.error()可以用来在控制台输出错误信息。和上面两种方法一样，只是显示风格不同：constapp=["facebook","google","twitter"];控制台错误（应用程序）；注意console.exception()是console.error()的别名，它们的功能是一样的。当然console.error()还有一个console.log()没有的功能，就是打印函数的调用栈：functiona(){b();}functionb(){console.错误（“错误”）；}函数c（）{a（）；}c（）；打印结果如下：可以看到，这里打印了函数调用栈信息：b→a→c。console对象提供了一个特殊的方法来打印函数调用栈（console.trace()），下面会介绍。4.console.info()console.info()可以用来打印informational信息，和console.log()的用法一致，打印效果一样：2.打印时间1.console.time()&console.timeEnd()如果我们想获取一段代码的执行时间，可以使用console对象的console.time()和console.timeEnd()方法，看下面的例子：time();setTimeout(()=>{console.timeEnd();},1000);//default:1001.9140625ms它们都可以传递一个参数，这个参数是用来标记唯一定时器的字符串。如果页面只有一个定时器，则不需要传递该参数。如果有多个定时器，则需要使用这个标签来标记每个定时器：console.time("timer1");console.time("timer2");setTimeout(()=>{console.timeEnd("timer1");},1000);setTimeout(()=>{console.timeEnd("timer2");},2000);//timer1:1004.666259765625ms//timer2:2004.654052734375ms2.console.timeLog()这里的console.timeLog()和上面的console.timeEnd()类似，但是也有一定的区别。他们都需要使用console.time()来启动计时器。然后console.timeLog()是打印定时器的当前时间，console.timeEnd()是打印直到定时器结束的时间。让我们看一个例子：console.time("timer");setTimeout(()=>{console.timeLog("timer")setTimeout(()=>{console.timeLog("timer");},2000);},1000);//timer:1002.80224609375ms//timer:3008.044189453125ms当使用console.timeEnd():console.time("timer");setTimeout(()=>{console.timeEnd("timer")setTimeout(()=>{console.timeLog("timer");},2000);},1000);打印结果如下：可以看到，会终止当前定时器，所以里面的timeLog是找不到的timercounterup了。所以两者的区别在于当前计时是否会终止。3.分组打印1.console.group()&console.groupEnd()这两个方法用于在控制台创建一个信息组。一个完整的信息组以console.group()开始，以console.groupEnd()结束。看下面的例子：console.group();console.log('第一组');console.group();console.log('第二组')console.groupEnd();console.groupEnd();Print结果如下：我们来看一个更复杂的：console.group("Alphabet")console.log("A");console.log("B");console.log("C");console.group("数字");console.log("一个");console.log("二");console.groupEnd("数字");console.groupEnd("字母表");打印结果如下：可以看到，这些组是可以嵌套的。目前我们需要调试的调试输出很多，所以可以选择使用组输出，2.console.groupCollapsed()console.groupCollapsed()方法和console.group()类似，都需要用到console.groupEnd()结束组。不同的是，该方法打印的信息默认是折叠的，而group()默认是展开的。重写上面的例子：console.groupCollapsed("Alphabet")console.log("A");console.log("B");console.log("C");console.groupCollapsed("数字");console.log("一个");console.log("二");console.groupEnd("数字");console.groupEnd("字母表");打印结果如下：可以看到，和上面的方法不同的是，打印结果是折叠的，需要手动展开。四、打印次数1.console.count()可以通过console.count()得到当前的执行次数。我们看下面的例子：for(i=0;i<5;i++){console.count();}//输出如下default:1default:2default:3default:4default:5也可以传一个执行Tag的参数（如果为空则默认）：for(i=0;i<5;i++){console.count("hello");}//输出如下hello:1hello:2hello:3hello:4hello:5这种方式主要用于一些比较复杂的场景。有时一个函数在多个地方被调用，可以通过这个方法来判断该方法是被调用少了还是被重复调用了。2.console.countReset()console.countReset()顾名思义就是重置计算器，需要和上面的console.count()方法配合使用。它有一个可选参数label：如果提供了参数label，该函数将重置与label关联的计数，将计数重置为0。如果省略参数label，该函数将重置默认计数器，将count重置为0。控制台计数（）；console.count("a");console.count("b");console.count("a");console.count("a");控制台计数（）；安慰。数数（）;console.countReset();console.countReset("a");console.countReset("b");控制台计数（）；console.count("a");console.count("b");打印结果如下：default:1a:1b:1a:2a:3default:2default:3default:1a:1b:15.其他打印1.console.table()我们平时使用console.log比较多，但是在其实console对象还有很多属性可以使用，比如console.table()，可以方便的打印数组对象的属性，打印出来的结果是一个表格。console.table()方法有两个参数。第一个参数是要打印的对象，第二个参数是要打印的表格的标题。这里是数组对象的属性值。考虑以下示例：constusers=[{"first_name":"Harcourt","last_name":"Huckerbe","gender":"Male","city":"Linchen","birth_country":"China"},{"first_name":"Allyn","last_name":"McEttigen","gender":"Male","city":"Ambelókipoi","birth_country":"Greece"},{"first_name":"Sandor","last_name":"Degg","gender":"Male","city":"Mthatha","birth_country":"SouthAfrica"}]console.table(users,['first_name','last_name','城市']);打印结果如下：这样可以更清楚的看到数组对象中指定的属性。此外，还可以使用console.table()打印数组元素：constapp=["facebook","google","twitter"];控制台表（应用程序）；打印结果如下：这样我们可以更清楚的看到数组中的元素。请注意，console.table()最多只能处理1000行，因此它可能不适合所有数据集。但它也可以适用于大多数场景。2.console.clear()console.clear()顾名思义就是清除控制台信息。清空控制台后，会打印一句：“Consolewascleared”：当然我们可以使用控制台的clear键来清空控制台：3.console.assert()使用console.assert()方法for语句断言，当断言为false时，错误信息会输出到控制台。其语法如下：console.assert(expression,message)有两个参数：expression：条件语句，该语句将被解析为布尔值，为假时触发message语句的输出；message：输出语句，可以是任意类型。当表达式条件语句为假时，该方法将打印消息信息。console.assert()方法可以在特定情况下只输出语句时使用。例如，当列表元素的子节点数大于等于100时，会打印错误信息：console.assert(list.childNodes.length<100,"Nodecountis>100");输出结果如下图所示：4.console.trace()console.trace()方法可用于打印堆栈中当前执行代码的调用路径。与上面的console.error()功能相同，但打印风格与console.log()相同。让我们看下面的例子：functiona(){b();}functionb(){console.trace();}functionc(){a();}c();打印结果如下：可以看到，这里输出的是调用栈的信息：b→a→c，这个栈信息是从调用位置开始的。5.console.dir()console.dir()方法可以在控制台中显示指定JavaScript对象的属性，并以类似于文件树样式的交互列表方式显示。它的语法如下：console.dir(object);它的参数是一个对象，最终会打印出该对象的所有属性和属性值。在大多数情况下，使用consoledir()与使用console.log()具有相同的效果。但是打印元素结构的时候会有很大的区别，console.log()打印的是元素的DOM结构，而console.dir()打印的是元素的属性：6.console.dirxml()console。dirxml()方法用于显示包含所有后代元素的显式XML/HTML元素的交互式树。如果它不能显示为一个元素，它将被一个JavaScript对象替换。它的输出是一个扩展节点的继承列表，允许您查看子节点的内容。它的语法如下：console.dirxml(object);此方法将打印出XML元素及其后代元素。它相当于为XML和HTML元素调用console.log()和console.dirxml()。7.console.memoryconsole.memory是console对象的一个??属性，不是一个方法。它可以用来检查当前的内存使用情况。如果你使用过多的console.log()，它会占用更多内存并导致浏览器卡顿。
