Chrome的控制台:Console标签调试代码的函数分析
Author：[email protected] Date：
打开chrome，win系统按F12，mac系统按command+option+J就可以呼出控制台了，切换到Chrome的控制台Console标签就能看到 console信息
console调试代码，一般用的也就是console.log('test')和console.info('test')。但是console调试远不止这个两个属性。本篇不做一一讲解(可以瞅瞅下面的表格)。挑选几个个人觉得重要的 备注一下
| 代码实例 | 用途 |
|---|---|
| console.log("这是平凡的字符串"); | 打印字符串 |
| console.info("这是温柔的提示"); | 打印提示消息 |
| console.warn("这是严肃的警告"); | 打印警告消息 |
| console.error("这是错误消息"); | 打印错误消息 |
| console.debug("这是调试信息"); | 打印调试信息,console.log方法的别称 |
| console.log(console); | 打印对象 |
| console.assert(1 == 0); | 判断真假情况 |
| console.group('报数'); console.log("一！"); console.log("二！"); console.groupEnd(); | 分组输出 |
| console.groupCollapsed(); | 创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd() 之后,当前分组结束。 |
| var data = [{'姓名': 'zlt', '数量': 1}]; console.table(data); | 显示关联数组信息 |
| console.dir(document.body); | 将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,以树的结构进行输出 |
| var test = document.getElementById('test'); console.dirxml(test); | 查看页面中对应元素的 html/xml 内容 |
| console.log('%cMy name is zlt.', 'color: #fff; background: #000; font-size: 24px;'); | 特殊的标示符%c，对输出的文字可以附加特殊的样式,background属性的url()中添加图片路径就可以实现图片的输出了 |
| $('table') | 返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector();如果你使用的库，如jQuery使用$，那么这个功能将被覆盖，并且$将对应用该库的实现 |
| $$('table') | 返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll() |
| $_ | 引用最近的一个表达式,功能与按向上的方向键再回车一样 |
| $0 ~ $4 | 最近选择过的5个DOM节点。$0会返回最近一次点选的DOM结点。以此类推，$1返回的是上上次点选的DOM节点。最多可以保存5个，如果不满5个，则返回undefined。 |
| $x('//*[@id="console"]/div[2]/table[2]/tbody/tr[4]') | 返回与指定的XPath相匹配的所有元素的数组 |
| var data = {name: 'zlt',num: 1}; keys(data); | 返回传入对象所有属性名组成的数据 |
| var data = {name: 'zlt',num: 1}; values(data); | 返回所有属性值组成的数组 |
| inspect(document.body) | Elements面板跳到需要查看的对象上 |
| getEventListeners(document.getElementById ("eventListeners")).click[0].listener | 查看某个DOM对象上的事件 |
| monitorEvents(document.body, "click") | 监控相关的事件,unmonitorEvents便是用来停止这一监控 |
| console.clear() | 清理函数 |
| clear() | 用 chrome 的 command line api 来清理控制台 |
| copy(document.body) | 在控制台获取到的内容复制到剪贴板 |
| document.designMode = "on" | 直接修改网页内容 |
个人觉得比较实用的几个函数有 console.group console.time console.dir console.trace monitor
monitor
monitor(function) 接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。 而unmonitor(function)便是用来停止这一监听——debugger调试一个方法，当该方法调用时会暂停并且在源码中定位，效果和断点类似。undebug可以停止调试。。
function sayHello(name) {
console.info('hello,' + name);
}
monitor(sayHello);
sayHello('zlt');
unmonitor(sayHello);
sayHello('zlttt');console.trace
追踪函数的调用过程
function test() {
console.trace('追踪Test函数调用');
}
function a() {
test();
}
console.log(a());console.time
记录代码运行所花费的时间,评估某段代码或是某个函数的性能
console.time('计算代码块A执行时间：');// 开始计时
for (let i = 0; i < 10000; i++) { /* TODO*/ }
console.timeEnd('计算代码块A执行时间：');// 开始结束计时console.profile
评估某段代码或是某个函数的性能,结果显示在 Memory面板的profile中
console.profile('分析码块A：');// 开始计时
for (let i = 0; i < 10000; i++) { /* TODO*/ }
console.profileEnd('分析码块A：');// 开始结束计时具体查看：
Chrome DevTools: 在 Profile 性能分析中显示原生 JS 函数 https://zhuanlan.zhihu.com/p/25743570
英文版：https://www.mattzeunert.com/2016/08/06/show-native-functions-in-js-profile.html
console.group
分组输出
console.group('报数');
console.log('一！');
console.log('二！');
console.groupEnd();console.dirxml
查看页面中对应元素的 html/xml 内容
var test = document.getElementById('test');
console.dirxml(test);参考文章：
https://zhaoluting.gitbooks.io/chrome/content/panel/console.html
天天用控制台，那 Console 命令的各种用法你真的都已经了解了吗？ https://toutiao.io/posts/fvogq8/preview
转载本站文章《Chrome的控制台:Console标签调试代码的函数分析》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2015_0717_128.html