console方法属性大全.pdf

《console方法属性大全.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、candy_tity原创版权labangme.com不可思议的【console】一、console与alertconsole与alert是前端在调试页面时最常用的两种方法。但很多过来人都会推荐使用console而非alert。这是因为：①alert会阻断线程的运行，需要手动的点击【确定】按钮才能继续加载页面，或显示其他的alert信息；②若调试完毕后忘记删除alert，会影响用户体验度。在这里试运行如下代码：在浏览器（这里是chrome）中打开，效果如下：这个显示的是alert的信息，同时我们关注下页面左上角，会发现页面在我们点击【

2、确定】按钮之前是一个一直在加载的状态。接下来我们按【F12】，打开控制台，切换到【Console】栏目下，可看到如下信息：candy_tity原创版权labangme.com二、console的方法平时我们使用最多的是consol.log()，但除此之外console还有许多的方法。执行如下代码：在控制台中查看，可以知console有如下这些方法和属性，我们来一一介绍：1.console.assert(exp,mes)作用：对输入的表达式进行判断，当表达式为true时，不执行在控制台输出信息的操作，当表达式为false时，在控制台中

3、输出对应的信息。参数：exp表示表达式，mes表示想要输出的信息。示例代码：candy_tity原创版权labangme.com在控制台输出的效果：2.console.clear()作用：清空控制台输出的信息。参数：无参数。示例代码：在控制台输出的效果：说明：一般情况下我们不会手动的写console.clear()这条指令，因为浏览器的控制台都提供了这个指令的快捷方法，如下红色边框圈中的按钮即是：3.console.count([mes])作用：用来统计函数被执行的次数。参数：可选的参数，主要用来标识是哪个函数执行的次数。candy

4、_tity原创版权labangme.com示例代码：在控制台输出的效果：说明：在这里我们只对一个函数的执行次数进行了统计，但在实际应用中我们可能需要知道多个函数的执行次数，此时就需要在参数中添加一些用来标识的信息。例如：在控制台输出的效果为：4.console.debug(mes)candy_tity原创版权labangme.com作用：用于输出调试信息。参数：mes用于表示想要输出的信息。示例代码：控制台输出效果：值得注意的是，在控制台中输出的信息是蓝色的，同时在右侧会有对应的控制语句所在的位置（上图右侧红框内），点击此处我们可以

5、看到控制台进入了【sources】选项，同时跳转到了该文件中此行代码对应的位置。如下图：5.console.dir(obj

6、dom)作用：可以详细查看对象的方法，将DOM节点以DOM树的结构进行输出。参数：二选一即可，obj表示对象，dom表示一个DOM节点。示例代码1：文章开始部分的console.dir(console)，这里不再做赘述。示例代码2：控制台输出的结果：candy_tity原创版权labangme.com需要注意的是在控制台中输出的结果是按字母的先后顺序进行排列的。示例代码3：在控制台的输出效果（部分截图）：在底部

7、还有很多的信息，大家可滑动滚轮查看一下。6.console.dirxml(dom)作用：打印对应都没元素中的html内容。参数：dom表示html中的DOM节点。示例代码：candy_tity原创版权labangme.com控制台输出的结果为：7.console.error(mes)作用：输出错误信息。参数：mes表示想要输出的错误信息的内容。其他：可类比console.debug()。示例代码：在控制台输出的效果：说明：与console.debug()的蓝色字带连接的输出效果相比，console.error()输出的结果有以下特点

8、：①输出结果带有粉红色背景。candy_tity原创版权labangme.com②字体为红色。③输出结果前有标识，但此标识并不表示出错了，只是表示打印出错误信息。另外，与console.debug()类似的是，点右侧的链接同样可跳转到对应页面的相应位置。8.console.group([sign])、console.groupCollapsed([sign])、console.groupEnd()由于这三个方法在使用的时候是成对的出现，因此我们把这三个放在一起讲解。使用的时候console.group([sign])、console

9、.groupEnd()为一组使用，console.groupCollapsed([sign])、console.groupEnd()为一组使用。我们可以把它们想象成标签的开始和结束，例如