前端 控制台基础知识

一、控制台属性：
1.Elements：用来调试网页的HTML源码和CSS代码。
2.Resources：查看网页加载的各种资源文件（比如代码文件、字体文件、css文件等），以及在硬盘上创建的各种内容（比如本地缓存、Cookie、Local Storage等）。
3.Network：查看网页的HTTP通信情况。
4.Sources：调试JavaScript代码。
5.Timeline：查看各种网页行为随时间变化的情况。
6.Profiles：查看网页的性能情况，比如CPU和内存消耗。
7.Audits：提供网页优化的建议。
8.Console：用来运行JavaScript命令。
二、console对象方法
1.log()，info()，debug()

console.log('%c log: %s + %d + %i + %f + %o', 'color: red; background: yellow; font-size: 24px;', '字符串', 10.9, 10.5, 0.1, Object);
/**
 *  %c CSS语句
 *  %s 字符串
 *  %d %i 都是整数
 *  %f 浮点数
 *  %o 对象的链接
 */
console.info('info'); // 和log一样的效果，在谷歌浏览器上不会显示小图标
console.debug('debug'); // 和log一样的效果，谷歌浏览器和opera不支持console.debug()

2.warn()，error()

console.warn('warn'); // 多一个黄色感叹号的图标
console.error('error'); // 多一个红色错误的图标

3.table()

console.table([
    { age: 20, name: 'xiaohong' },
    { age: 40, name: 'xiaoming' }
]);
/**复合型数据转为表格显示的条件是，必须拥有主键。
 * 对于上面的数组来说，主键就是数字键。
 * 对于对象来说，主键就是它的最外层键。 */
console.table({
    chongqing: { age: 20, name: 'xiaohong' },
    beijing: { age: 40, name: 'xiaoming' }
});

4.count()

function count(n) {
    return n;
}
for (let i = 0; i < 3; i++) {
    count(i);
    console.count('计次'); // 用于展示被使用了多少次
}
console.countReset('计次'); // 次数清零
console.count('计次'); // 用于展示被使用了多少次

5.dir()

console.log(document.body);
console.dirxml(document.body); // 打印DOM元素
console.dir(document.body);
/**dir方法用来对一个对象进行检查（inspect）
 * dir方法的输出结果，比log方法更易读，信息也更丰富。
 * 该方法对于输出DOM对象非常有用，因为会显示DOM对象的所有属性。 */

6.assert()

console.assert(1 === true, "判断条件不成立") 
// assert(a, b) 当a这个第一参数为false时才打印第二个参数b

7.time()，timeLog()，timeEnd()

console.time('花费时间'); // 计时开始，参数是计时器的名称
const array = new Array(100000);
for (let index = 0; index < array.length; index++) {
    array[index] = new Object;
}
console.timeLog('花费时间'); // 输出计时结果但不结束，参数要和开始的保持一致
console.timeEnd('花费时间'); // 计时结束并输出计时结果，参数要和开始的保持一致，参数前后都不填也行

8.profile()，profileEnd()

console.profile('div'); // 新建一个性能测试器（profile）
console.profile('p');
console.profile('h1');
console.profileEnd(); // 没写参数时，结束最近的一个性能测试器
console.profileEnd('div'); // 写参数时，结束参数对应的性能测试器

9.group()，groupend()，groupCollapsed()

console.group("第一个打印组"); // 用于将打印的信息分组
console.group("第二个打印组"); // group是初始展开的
console.warn('warn'); // 多一个黄色感叹号的图标
console.error('error'); // 多一个红色错误的图标
console.groupCollapsed("第三个打印组"); // groupCollapsed是初始折叠的，group是初始展开的
console.warn('warn1'); // 多一个黄色感叹号的图标
console.error('error1'); // 多一个红色错误的图标
console.groupEnd(); // 结束最近的一个groupCollapsed或group
console.groupEnd(); // 如果没有console.groupEnd();会把剩下的所有打印值归到一起

10.trace()

console.trace(); // 当前执行的代码在堆栈中的调用路径

11.clear()

console.clear(); // 清空当前控制台的所有信息

三、命令行API
1.$_
返回上一个表达式的值

2.$0-4
控制台保存了最近5个在Elements面板选中的DOM元素，0代表倒数第一个，0代表倒数第一个，1代表倒数第二个，以此类推直到$4。

3.$(selector)

返回第一个匹配的元素，等同于 document.querySelector()。
注意，如果页面脚本对 $ 有定义，则会覆盖原始的定义。
比如，页面里面有 jQuery，控制台执行 $(selector) 就会采用 jQuery 的实现，返回一个数组。

4.$$(selector)

返回选中的 DOM 对象，等同于document.querySelectorAll(‘div’)，会到的一个数组。

5.$x(path)
返回一个数组，包含匹配特定 XPath 表达式的所有 DOM 元素。
比如还有a元素的div元素。

6.inspect(object)
inspect(object)方法打开相关面板，并选中相应的元素：DOM元素在Elements面板中显示，JavaScript对象在控制台中显示。
①DOM元素：

回车后跳转到Elements的对应DOM元素：

②JS对象

7.getEventListeners(object)
getEventListeners(object)方法返回一个对象，该对象的成员为登记了回调函数的各种事件（比如click或keydown），每个事件对应一个数组，数组的成员为该事件的回调函数。
getEventListeners(document.getElementById(“a1”)) 结果如下：

8.keys(object)，values(object)
keys(object)方法返回一个数组，包含特定对象的所有键名。
values(object)方法返回一个数组，包含特定对象的所有键值。

9.monitorEvents(object，[events]) ，unmonitorEvents(object，[events])
monitorEvents开始监听，unmonitorEvents结束监听
开始监听点击事件，点击操作之后

结束监听点击事件，点击后：

监听多个事件：

10.profile()，profileEnd()
profile方法用于启动一个特定名称的CPU性能测试，profileEnd方法用于结束该性能测试。

11.其他方法
clear()方法清除控制台的历史。
copy(object)方法复制特定DOM元素到剪贴板。
dir(object)方法显示特定对象的所有属性，是console.dir方法的别名。
dirxml(object)方法显示特定对象的XML形式，是console.dirxml方法的别名。