Chrome调试器Console的进阶用法

Tairraos

帖子不长，收藏下来必然某天用得到。
喜欢请点击下方免费评分，谢谢
======================
还有几帖你一定会喜欢的：
Python资源大全：https://www.52pojie.cn/thread-1081229-1-1.html
Python tkinter UI指南 https://www.52pojie.cn/thread-1290751-1-1.html
原生 Javascript 实现 jQuery 的功能： https://www.52pojie.cn/thread-1084552-1-1.html
Chrome调试器Console的进阶用法 https://www.52pojie.cn/thread-1156239-1-1.html
Javascript 极限省字节（看懂混淆后的代码） https://www.52pojie.cn/thread-1056860-1-1.html
写JS必备，ESLINT配置说明 https://www.52pojie.cn/thread-1290700-1-1.html
======================

断言

//断言的语法
console.assert(expression[, object, ...]);

//测试表达式，值为true时什么都不发生
console.assert(true, 'no problem');

//测试表达式，值为false时将抛出异常，并随带堆栈
console.assert(false, 'show a error here');

//断言失败用的显示参数，不能用printf的语法
console.assert(false, '1 %d 2', 3);
//输出 Assertion failed: 1 %d 2 3

不想抛一个异常，但是还是想看下当前执行位置的堆栈

//紧跟着log后输出trace()可以显示一条显示堆栈的信息
console.trace();

//例
function step1(){ step2(); }
function step2(){ console.trace(); }
step1();

格式化log消息

//开始一个log分组
console.group('Group %d', 1);
console.log('message 1');
console.log('message 2');
console.log('message 3');
//结束分组
console.groupEnd()

console.groupCollapsed('Group %d', 2);;
console.log('message 1');
console.log('message 2');
console.log('message 3');
//结束分组
console.groupEnd()

计时器

//用一对方法来测试所花费时间
console.time('try randomize');
for (var i=0; i<99999; i++) {
    Math.random(i);
}
console.timeEnd('try randomize');

性能测试

//产生一个profile报告
console.profile('try randomize');
for (var i=0; i<99999; i++) {
    Math.random(i);
}
//生成完成后，到profile面板查看
console.profileEnd('try randomize');

计数器

//指定一个title，每调用一次就加1
for (var i=0; i<20; i++) {
   console.count('tru count');
}

清空控制台

console.clear()

简化的DOM命令

//document.getElementsByTagName('tagname')[0];
$('tagname');
//document.getElementById('id');
$('#id');
//document.getElementsByClassName('selector')[0];
$('.selector');

//document.getElementsByTagName('tagname');
$$('tagname');
//[document.getElementById('id')];
$$('#id');
//document.getElementsByClassName('selector');
$$('.selector');

其它DOM工具

//用XPath定位DOM元素或XML
$x('/html/body/div');

//在Elements面板中选中的元素
$0
//上一次在Elements面板中选中的元素
$1
//类推
$2

//返回最后被选择的元素
$n(index)

JS工具

//自动选择面板来显示内容
inspect(object);

//返回一个对象的所有key
keys(object);

//返回一个对象的所有values
values(object);

//监视某个方法。当方法被调用的时候自动停下来
debug(fn);
//移附近监视
undebug(fn);

//监视指定元素的指定事件
//事件发生时，事件对象会在console中输出。
//如果不指定第二个参数，将对所有事件进行记录。
monitorEvents(document.getElementById('test'),['click'])

执行时断点

//在代码里加入debugger命令，在打开console的情况下执行到此处会停下来
debugger;

帖子不长，收藏下来必然某天用得到。
喜欢请点击下方免费评分，谢谢
======================
还有几帖你一定会喜欢的：
Python资源大全：https://www.52pojie.cn/thread-1081229-1-1.html
Python tkinter UI指南 https://www.52pojie.cn/thread-1290751-1-1.html
原生 Javascript 实现 jQuery 的功能： https://www.52pojie.cn/thread-1084552-1-1.html
Chrome调试器Console的进阶用法 https://www.52pojie.cn/thread-1156239-1-1.html
Javascript 极限省字节（看懂混淆后的代码） https://www.52pojie.cn/thread-1056860-1-1.html
写JS必备，ESLINT配置说明 https://www.52pojie.cn/thread-1290700-1-1.html
======================

mmliuliuliu

Tairraos 发表于 2020-4-16 09:02
谢谢支持，如果不麻烦，可以试一下免费评分，谢谢

今天没还评分，不晓得为啥没有热心和吾爱币了。等我有了就给你评分

Tairraos

曼曼小地瓜 发表于 2020-4-15 08:27
感谢分享，收藏学习，谢谢

谢谢支持，如果不麻烦，可以试一下免费评分，谢谢

辉龙天子

感谢分享

四哥!

感谢分享，收藏学习了。

whizzcyf

key de 很棒

mmliuliuliu

感谢楼主分享!
收藏了

Kaiter_Plus

强，感谢楼主分享

曼曼小地瓜

感谢分享，收藏学习，谢谢

psx1lin

很多都不知道

3q..

Tairraos

辉龙天子 发表于 2020-4-14 16:52
感谢分享

谢谢支持，如果不麻烦，可以试一下免费评分，谢谢

Tairraos

psx1lin 发表于 2020-4-15 09:03
很多都不知道

3q..

谢谢支持，如果不麻烦，可以试一下免费评分，谢谢