一、控制台属性:
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方法的别名。