Chrome调试器Console的进阶用法
本帖最后由 Tairraos 于 2020-10-25 15:51 编辑帖子不长，收藏下来必然某天用得到。
喜欢请点击下方免费评分，谢谢
======================
还有几帖你一定会喜欢的：
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
======================
## 断言
```javascript
//断言的语法
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
```
## 不想抛一个异常，但是还是想看下当前执行位置的堆栈
```javascript
//紧跟着log后输出trace()可以显示一条显示堆栈的信息
console.trace();
//例
function step1(){ step2(); }
function step2(){ console.trace(); }
step1();
```
## 格式化log消息
```javascript
//开始一个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()
```
## 计时器
```javascript
//用一对方法来测试所花费时间
console.time('try randomize');
for (var i=0; i<99999; i++) {
Math.random(i);
}
console.timeEnd('try randomize');
```
## 性能测试
```javascript
//产生一个profile报告
console.profile('try randomize');
for (var i=0; i<99999; i++) {
Math.random(i);
}
//生成完成后，到profile面板查看
console.profileEnd('try randomize');
```
## 计数器
```javascript
//指定一个title，每调用一次就加1
for (var i=0; i<20; i++) {
console.count('tru count');
}
```
## 清空控制台
```javascript
console.clear()
```
## 简化的DOM命令
```javascript
//document.getElementsByTagName('tagname');
$('tagname');
//document.getElementById('id');
$('#id');
//document.getElementsByClassName('selector');
$('.selector');
//document.getElementsByTagName('tagname');
$$('tagname');
//;
$$('#id');
//document.getElementsByClassName('selector');
$$('.selector');
```
## 其它DOM工具
```javascript
//用XPath定位DOM元素或XML
$x('/html/body/div');
//在Elements面板中选中的元素
$0
//上一次在Elements面板中选中的元素
$1
//类推
$2
//返回最后被选择的元素
$n(index)
```
## JS工具
```javascript
//自动选择面板来显示内容
inspect(object);
//返回一个对象的所有key
keys(object);
//返回一个对象的所有values
values(object);
//监视某个方法。当方法被调用的时候自动停下来
debug(fn);
//移附近监视
undebug(fn);
//监视指定元素的指定事件
//事件发生时，事件对象会在console中输出。
//如果不指定第二个参数，将对所有事件进行记录。
monitorEvents(document.getElementById('test'),['click'])
```
### 执行时断点
```javascript
//在代码里加入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
====================== Tairraos 发表于 2020-4-16 09:02
谢谢支持，如果不麻烦，可以试一下免费评分，谢谢
今天没还评分，不晓得为啥没有热心和吾爱币了。等我有了就给你评分:lol 曼曼小地瓜 发表于 2020-4-15 08:27
感谢分享，收藏学习，谢谢
谢谢支持，如果不麻烦，可以试一下免费评分，谢谢 感谢分享 感谢分享，收藏学习了。 key de 很棒 感谢楼主分享!
收藏了 强，感谢楼主分享 感谢分享，收藏学习，谢谢 很多都不知道
3q.. 辉龙天子 发表于 2020-4-14 16:52
感谢分享
谢谢支持，如果不麻烦，可以试一下免费评分，谢谢 psx1lin 发表于 2020-4-15 09:03
很多都不知道
3q..
谢谢支持，如果不麻烦，可以试一下免费评分，谢谢