console的更多用法

我们在代码开发过程中调试逻辑复杂的代码时或多或少需要打个断点或者用个console来进行标识，但是多次调用或者上线后想要快速找到调用栈或者你想干点其他的骚操作的时候，你是不是就傻眼了，别担心，下边我们就讲述一下console的一些特殊用法

特殊符号

• %s for a String value 字符类型

• %d or %i for a Integer value 整型

• %f for a Floating point number 浮点类型number

• %o for an Object hyperlink 对象类型超链接

• %c 后边console的字符的样式

var name = '猴霸天'
console.log('Hi, my name is %s.', name);
//Output: Hi, my name is 猴霸天.

var num = 25
console.log('Hi, my age is %d.', num);
//Output: Hi, my age 25.

var num = 168
console.log('Hi, my height is %f.', num);
//Output: Hi, my height is 168

var obj = {color:"pink"}
console.log('Hi, my love is %o.', obj)
//Output: Hi, my love is {color:"pink"}.
console.log('Hi, my name is %c 猴霸天.','color:red')

特殊样式

• 指定输出颜色

var logColor = {
    green: '\x1B[32m%s\x1B[0m',
    red: '\x1B[31m%s\x1B[0m',
};
console.log(logColor.green, '这是一段有颜色的文字-green');
console.log(logColor.red, '这是一段有颜色的文字-red');

特殊使用

• console.trace("123");该打印可打印函数调用栈信息和函数调用时的参数值,即在哪里调用，传入了什么等等

• console.count()调用会+1，可查看被调用多少次

• console.time() console.timeEnd() 单位为ms，两者同时使用，第一个为开始，第二个为结束，可不传参，若穿参要保证参数一致，输出为参数或default：时长ms

• console.assert(a1,b1)断言， 共两个参数，第一个为表达式，第二个为输出的内容,当a1为false时会输出断言失败：显示内容，否则不打印

• console.clear()清空console的信息

• console.dir()输出为格式化后的格式，同时会输出传入对象的全部属性及方法

• console.table() 输出为表格，传输需为数组包对象的格式或对象包对象的格式，看自己的方便

• console.debug()查询问题，颜色为蓝色

• console.info()平常消息，有！的标识

• console.warn()警示消息，为黄色

• console.error()错误信息，本身也是个错误，红色

• console.group()console.log()console.groupEnd()输出有层级的内容，group为第一级，log为二级，groupEnd为该组结束

选择元素

1. $( ) 返回满足指定css规则的第一个元素
2. $$() 返回满足指定css规则的所有元素
3. $x() 返回满足指定的XPath的所有元素

$(".joyspace-comp-resize-slider")

$$(".ant-btn")

$x("html/body/div")

审查DOM元素或者js内存对象

1. inspect() 接受一个DOM元素或者js对象引用作为参数，传入的是一个DOM元素，可以打自动跳转到元素面板并显示该元素的结构，如果传入的是一个JS对象引用，则会打开分析器面板

$('[data-target="inspecting-dom-elements-example"]')
inspect($_)

访问最近选择的元素和对象

1. 控制台会存储最近5个被选择的元素和对象
2. 从$0开始

监控事件

1. monitorEvents("被监控的") 会输出指定监控目标的事件，
2. unmonitorEvents("被监控的", "事件") 移除

控制台输出undefined

1. REPL 环境导致
2. REPL是一个简单的交互式编程环境，模式是
3. 接收输入
4. 运行
5. 输出结果
6. 继续接受输入
7. 在chrome console 输入代码回车后，这段代码会作为字符串参数传给eval函数然后执行，eval函数会返回字符串代码的返回值，返回值是空，会返回undefined

console.log("====>repl")


function a() {
    console.log("===>repl")
}
a()


function a() {
    console.log("===>repl")
    return 'repl'
}
a()