console方法属性大全

candy_tity原创版权labangme.com不可思议的【console】一、console与alertconsole与alert是前端在调试页面时最常用的两种方法。但很多过来人都会推荐使用console而非alert。这是因为：①alert会阻断线程的运行，需要手动的点击【确定】按钮才能继续加载页面，或显示其他的alert信息；②若调试完毕后忘记删除alert，会影响用户体验度。在这里试运行如下代码：在浏览器（这里是chrome）中打开，效果如下：这个显示的是alert的信息，同时我们关注下页面左上角，会发现页面在我们点击【确定】按钮之前是一个一直在加载的状态。接下来我们按【F12】，打开控制台，切换到【Console】栏目下，可看到如下信息：candy_tity原创版权labangme.com二、console的方法平时我们使用最多的是consol.log()，但除此之外console还有许多的方法。执行如下代码：在控制台中查看，可以知console有如下这些方法和属性，我们来一一介绍：1.console.assert(exp,mes)作用：对输入的表达式进行判断，当表达式为true时，不执行在控制台输出信息的操作，当表达式为false时，在控制台中输出对应的信息。参数：exp表示表达式，mes表示想要输出的信息。示例代码：candy_tity原创版权labangme.com在控制台输出的效果：2.console.clear()作用：清空控制台输出的信息。参数：无参数。示例代码：在控制台输出的效果：说明：一般情况下我们不会手动的写console.clear()这条指令，因为浏览器的控制台都提供了这个指令的快捷方法，如下红色边框圈中的按钮即是：3.console.count([mes])作用：用来统计函数被执行的次数。参数：可选的参数，主要用来标识是哪个函数执行的次数。candy_tity原创版权labangme.com示例代码：在控制台输出的效果：说明：在这里我们只对一个函数的执行次数进行了统计，但在实际应用中我们可能需要知道多个函数的执行次数，此时就需要在参数中添加一些用来标识的信息。例如：在控制台输出的效果为：4.console.debug(mes)candy_tity原创版权labangme.com作用：用于输出调试信息。参数：mes用于表示想要输出的信息。示例代码：控制台输出效果：值得注意的是，在控制台中输出的信息是蓝色的，同时在右侧会有对应的控制语句所在的位置（上图右侧红框内），点击此处我们可以看到控制台进入了【sources】选项，同时跳转到了该文件中此行代码对应的位置。如下图：5.console.dir(obj|dom)作用：可以详细查看对象的方法，将DOM节点以DOM树的结构进行输出。参数：二选一即可，obj表示对象，dom表示一个DOM节点。示例代码1：文章开始部分的console.dir(console)，这里不再做赘述。示例代码2：控制台输出的结果：candy_tity原创版权labangme.com需要注意的是在控制台中输出的结果是按字母的先后顺序进行排列的。示例代码3：在控制台的输出效果（部分截图）：在底部还有很多的信息，大家可滑动滚轮查看一下。6.console.dirxml(dom)作用：打印对应都没元素中的html内容。参数：dom表示html中的DOM节点。示例代码：candy_tity原创版权labangme.com控制台输出的结果为：7.console.error(mes)作用：输出错误信息。参数：mes表示想要输出的错误信息的内容。其他：可类比console.debug()。示例代码：在控制台输出的效果：说明：与console.debug()的蓝色字带连接的输出效果相比，console.error()输出的结果有以下特点：①输出结果带有粉红色背景。candy_tity原创版权labangme.com②字体为红色。③输出结果前有标识，但此标识并不表示出错了，只是表示打印出错误信息。另外，与console.debug()类似的是，点右侧的链接同样可跳转到对应页面的相应位置。8.console.group([sign])、console.groupCollapsed([sign])、console.groupEnd()由于这三个方法在使用的时候是成对的出现，因此我们把这三个放在一起讲解。使用的时候console.group([sign])、console.groupEnd()为一组使用，console.groupCollapsed([sign])、console.groupEnd()为一组使用。我们可以把它们想象成标签的开始和结束，例如div与/div。作用：将打印的信息以组的形式显示出来。参数：mes为可选参数，填写的话组有名字，不填写的话则无名（也可能会有洗衣默认的名字，根据浏览器决定）。其他：可以进行嵌套如console.group([sign1])console.group([sign2])console.groupEnd()console.groupEnd()同样可类比divdiv/div/div示例代码（console.group()部分）：candy_tity原创版权labangme.com控制台输出的结果为：可以看出没有命名的组在谷歌浏览器中自动为其添加上了【console.group】。示例代码（console.groupCollapsed()部分）控制台输出效果为：candy_tity原创版权labangme.com这里的输出效果默认是合起来的，需要一级一级的点开。总结：console.group()与console.groupCollpased()的区别就在于在控制台输出时是展开的，还是收起的。9.console.info(mes)作用：在控制台中输出提示信息。参数：mes表示输出信息的内容。说明：类比console.debug()与console.error()。示例代码：在控制台输出的效果：candy_tity原创版权labangme.com可以看到，console.info()输出信息有如下特点：①字体为黑色，且带链接。②左侧带有信息提示标识。10.console.log(mes)作用：在控制台输出普通信息，此项为console最为常用的方法。参数：mes标识想要输出的信息的内容。示例代码：在控制台输出的效果：11.console.markTimeLine()如下图所示（原文链接），由于markTimeLine()的支持度不高，因此不做讲述。12.console.memory作用：用于显示此刻使用的内存信息。注意：这个是console的属性，而不是方法，此项信息需要在控制台中输入，再按enter键进行查看。candy_tity原创版权labangme.com示例代码：13.console.getmemory()与console.setmemory()这是谷歌浏览器中的方法，在火狐中执行console.dir(console)并无此方法。14.console.profile(name)、console.profileEnd(name)作用：两个方法配合使用用来查看CPU使用相关信息。参数：name起一个标识的作用。示例代码：在控制台中的效果：将上面的选项切换至【profiles】选项，可看到CPU使用的相关信息：15.console.table(array|obj)candy_tity原创版权labangme.com作用：以表格的形式打印数组或对象。参数：array和obj二选一即可。array表示数组，obj表示对象。示例代码（array）：在控制台中输出的结果为：示例代码（obj）：在控制台输出的效果为：16.console.time(name)、console.timeEnd(name)candy_tity原创版权labangme.com作用：console.time(name)表示计时开始，console.timeEnd(name)表示计时结束，这两个方法配合使用可以用来统计执行某个函数所用的时间。参数：name起到一个标识的作用。示例代码（统计实例化1000000个对象所用的时间）：在控制台输出的结果：17.console.timeStamp(name)作用：产生一个时间轴标志，仅在启用时间轴面板时有效。参数：name起标识作用。示例代码：在控制面板中的效果：candy_tity原创版权labangme.com18.console.timeline()、console.timelineEnd()作用：两者配合使用记录一段时间轴：示例代码：在控制台的时间轴中查看：candy_tity原创版权labangme.com19.console.trace([name])作用：用来追踪函数的调用轨迹。参数：name表示这个轨迹的名称，是一个可选的参数示例代码：在控制台中输出的效果：20.console.warn(mes)作用：在控制台中显示警告信息。candy_tity原创版权labangme.com参数：mes表示警告信息的内容。示例代码：在控制台上运行的结果：总结：可类比console.debug()、console.error()、console.info()、console.log()，console.warn的显示效果为：①浅粉色背景，黑偏橙色的字体。②信息前面带有标识。至此，所有关于console的方法和属性都介绍完了。三、console的其他特性1.可支持printf风格的占位符仅支持四种：字符——%s整数——%d或%i浮点数——%f对象——%o示例代码：candy_tity原创版权labangme.com在控制台输出的效果：2.快速选中最近选择的元素控制台最多会记忆最近选择的五个元素，从一到五分别对应$0、$1、$2、$3、$4。3.谷歌浏览器原生支持jQuery的选择器在页面没有调用jQuery的情况下，可以在谷歌浏览器的控制台中直接输入$(‘#nav’)这样的指令来查看输出结果。4.copy指令在控制台打印出信息后，再输入copy指令，即可将输出的信息粘贴到任何地方。5.keys(obj)和values(obj)作用：keys(obj)返回传入对象所有的属性名组成的数组，values(obj)返回传入的对象所有的属性值组成的数组。参数：obj表示一个对象。在控制台中效果：candy_tity原创版权labangme.com四、关于console的文章地址://developer.mozilla.org/en-US/docs/Web/API/Console