console方法属性大全.pdf

candy_tity 原创 版权 不可思议的【console】 一、 console 与 alert console 与 alert 是前端在调试页面时最常用的两种方法。但很多过来人都 会推荐使用 console 而非 alert。这是因为： ① alert 会阻断线程的运行，需要手动的点击【确定】按钮才能继续加载页 面，或显示其他的 alert 信息； ② 若调试完毕后忘记删除 alert ，会影响用户体验度。 在这里试运行如下代码： 在浏览器（这里是 chrome ）中打开，效果如下： 这个显示的是 alert 的信息，同时我们关注下页面左上角，会发现页面在我 们点击【确定】按钮之前是一个一直在加载的状态。 接下来我们按【F12】，打开控制台，切换到【Console】栏目下，可看到如 下信息： candy_tity 原创 版权 二、 console 的方法 平时我们使用最多的是consol.log() ，但除此之外console 还有许多的方法。 执行如下代码： 在控制台中查看，可以知 console 有如下这些方法和属性，我们来一一介绍： 1. console.assert(exp,mes) 作用：对输入的表达式进行判断，当表达式为 true 时，不执行在控制台输 出信息的操作，当表达式为false 时，在控制台中输出对应的信息。 参数：exp 表示表达式，mes 表示想要输出的信息。 示例代码： candy_tity 原创 版权 在控制台输出的效果： 2. console.clear() 作用：清空控制台输出的信息。 参数：无参数。 示例代码： 在控制台输出的效果： 说明：一般情况下我们不会手动的写 console.clear()这条指令，因为浏览器 的控制台都提供了这个指令的快捷方法，如下红色边框圈中的按钮即是： 3. console.count([mes]) 作用：用来统计函数被执行的次数。 参数：可选的参数，主要用来标识是哪个函数执行的次数。 candy_tity 原创 版权 示例代码： 在控制台输出的效果： 说明：在这里我们只对一个函数的执行次数进行了统计，但在实际应用中我 们可能需要知道多个函数的执行次数，此时就需要在参数中添加一些用来标识的 信息。例如： 在控制台输出的效果为： 4. console.debug(mes) candy_tity 原创 版权 作用：用于输出调试信息。 参数：mes 用于表示想要输出的信息。 示例代码： 控制台输出效果： 值得注意的是，在控制台中输出的信息是蓝色的，同时在右侧会有对应的控 制语句所在的位置（上图右侧红框内），点击此处我们可以看到控制台进入了 【sources】选项，同时跳转到了该文件中此行代码对应的位置。如下图： 5. console.dir(obj|dom) 作用：可以详细查看对象的方法，将 DOM 节点以 DOM 树的结构进行输出。 参数：二选一即可，obj 表示对象，dom 表示一个 DOM 节点。 示例代码 1 ：文章开始部分的console.dir(console) ，这里不再做赘述。 示例代码 2 ： 控制台输出的结果： candy_tity 原创 版权 需要注意的是在控制台中输出的结果是按字母的先后顺序进行排列的。 示例代码 3 ： 在控制台的输出效果（部分截图）： 在底部还有很多的信息，大家可滑动滚轮查看一下。 6. console.dirxml(dom) 作用：打印对应都没元素中的 ht