F12 Console 面板

🍕 无论书写代码还是构建项目,调试程序都不可或缺,熟悉Console提供的功能,掌握一些技巧,会极大地提高创作质量与效率。

1 控制台

  • 控制台
    • 控制台-图标01(展开或收起信息类型提示)、控制台-图标02(清空控制台)、控制台-图标04(添加实时执行表达式,可创建多个,能计算出值)。
    • 控制台-图标03(调整当前控制台,执行上下文,top为当前顶层主页面,可以切换到其他iframe子页面或扩展程序中)。
    • Filter(关键字过滤控制台输出的内容)、Default levels(要输出的信息级别)、Issues(问题数和不同级别的日志)。
    • 控制台-图标05(设置控制台的一些基础行为,Show CORS errors in console在控制台中显示CORS错误)。
      • 勾选Preserve log保留日志,则在刷新页面时,不会清空控制台之前输出的数据。
      • 勾选Selected context only仅限已选择的上下文,根据top所选作用域展示内容。
      • Hide network隐藏网络、Group similar messages in console在控制台中对相似消息进行分组。
      • Eager evaluation及早评估、Treat code evaluation as user action将评估视为用户激活行为。
      • Log XMLHttpRequests记录XMLHttpRequests、Autocomplete from history根据历史记录自动补全。

控制台

2 日志打印

  • 日志打印
    • 打印信息
      • 普通信息·····················console.log()
      • 提示信息·····················console.info()
      • 警告信息·····················console.warn()
      • 错误信息·····················console.error()
      • 调试信息·····················console.debug()
      • 占位符
        • 样式·····················%c
        • 对象·····················%o
        • 字符·····················%s
        • 数字·····················%d%i(整数)、%f(浮点数)
    • 清空信息·························console.clear()

2-1 打印信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
console.log("log");
console.info("info");
console.warn("warn");
console.error("error");
console.debug("debug");

console.log("%c绿色的字体", "color: green");

console.log("今天下潭尾红树林公园打卡%o人", 90);
console.log("今天下潭尾红树林公园打卡%o人", "{A: 10}");
console.log("今天下潭尾红树林公园打卡%o人", "[1, 2, 3]");

console.log("%s是%d月%i日", "今天", 4, 11);
console.log("圆周率是%f", 3.1415926535897);

var object = {name: "Michelle", sex: "Male"}; console.log("%o", object);

// 添加定时器
let timerId = setInterval(x=>{
console.log("%c你%c好%c呀!",
"color:rgb(\\\
" + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + ",\\\
" + parseInt(Math.random()*256) + "\\\
)",
"color:rgb(\\\
" + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + ",\\\
" + parseInt(Math.random()*256) + "\\\
)",
"color:rgb(\\\
" + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + ",\\\
" + parseInt(Math.random()*256) + "\\\
)");
}, 1000);

// 停止定时器
clearInterval(timerId);

// 输出图片,浏览器的安全设置或广告拦截器可能会阻止图片的显示
console.log("%c", "padding: 50px 300px; \\\
line-height: 120px; background: url('http://985.so/9ua46');");

// 清空控制台信息,并输出Console was cleared
console.clear();

2-2 层级嵌套

  • 层级嵌套
    • 增加一层嵌套
      • 所有层级全部展开·············console.group()
      • 默认层级折叠显示·············console.groupCollapsed()
    • 减少一层嵌套·····················console.groupEnd()

(1) 层级展开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 第1层,所有层级全部展开,console.group()结合console.groupEnd()使用
console.log("Python");
// 增加一层嵌套
console.group();

// 第2层
console.log("Numpy");
console.log("UnitTest");
// 增加一层嵌套
console.group();

// 第3层
console.log("Mock");
console.log("TestCase");
console.log("TestLoader");
console.log("TextTestRunner");
// 减少一层嵌套
console.groupEnd();

// 回到第2层
console.log("PlayWright");
console.log("Matplotlib");
// 减少一层嵌套
console.groupEnd();

// 回到第1层
console.log("MongoDB");

(2) 层级折叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 第1层,默认层级折叠显示,console.groupCollapsed()结合console.groupEnd()使用
console.log("Python");
// 增加一层嵌套
console.groupCollapsed();

// 第2层
console.log("Numpy");
console.log("UnitTest");
// 增加一层嵌套
console.groupCollapsed();

// 第3层
console.log("Mock");
console.log("TestCase");
console.log("TestLoader");
console.log("TextTestRunner");
// 减少一层嵌套
console.groupEnd();

// 回到第2层
console.log("PlayWright");
console.log("Matplotlib");
// 减少一层嵌套
console.groupEnd();

// 回到第1层
console.log("MongoDB");

2-3 查看CPU

  • 查看CPU
    • console.profile():对一段代码的执行生成性能分析报告,作为开始标识。
    • console.profileEnd():可以传入一个对应的参数作为标签,作为结束标识。
1
2
3
4
5
6
7
console.profile("Array initialize");
var array = new Array(1000000);
for (var i=array.length-1; i>=0; i--) {
array[i] = new Object();
}
console.profileEnd("Array initialize");
// 回车,自动跳转Performance查看CPU相关信息

3 断言输出

  • 断言输出
    • console.assert(expression, object [, object, ...]):至少接收两个参数。
    • expression表达式的值或者返回值为false的时候,才会在控制台上相应输出。
1
2
3
4
5
6
7
8
// 无输出,返回undefined
console.assert(1 == 1, [1, 2, 3]);

// 输出[1, 2, 3]
console.assert(1 == 2, [1, 2, 3]);

// 输出
console.assert(1 == 2, "assert断言失败啦!", "大家快来看呀!");

4 统计次数

  • 统计次数
    • 统计被执行的次数·················console.count([label])
    • 重置指定标签名的计数器···········console.countReset([label])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// console.count([label]):统计myFunc()函数被执行的次数
function myFunc() {
console.count("myFunc被执行的次数");
}
myFunc();
myFunc();
myFunc();

// 输出执行到该行的次数,可选参数`label`可以在次数之前输出
(function() {
for (var i=0; i<5; i++) {
console.count("count");
}
}) ();

// 不设定标签即默认为相同标签
let p = () => {
[1, 2, 3].map(item => {
console.count("for循环");
})
};
p();
p();

// 相同标签共享数值
let p = () => {
[1, 2, 3].map(item => {
console.count("for循环1");
console.count("for循环1");
})
};
p();

// 不同标签独立计算
let p = () => {
[1, 2, 3].map(item => {
console.count("for循环1");
console.count("for循环2");
})
};
p();

// 重置指定标签名的计数器,如果不传参数,则只重置默认计数器
let p = () => {
[1, 2, 3].map(item => {
item == 3 && console.countReset("for循环");
console.count("for循环");
})
};
p();

5 格式输出

  • 格式输出
    • 列表形式输出·····················console.dir(object)
    • 表格形式输出·····················console.table(object)
    • 树形视图输出·····················console.dirxml(object)

5-1 列表形式

1
2
3
4
5
6
7
// 将传入对象的属性,包括子对象的属性,以列表形式输出
var obj = {
name: "Tomas",
age: "28",
sex: "Male"
};
console.dir(obj);

5-2 表格形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 以表格形式输出,obj是object时,值就是各对象的属性名称
var obj = {
foo: {
name: "Tomas",
age: "28",
sex: "Male"
},
bar: {
name: "Michael",
age: "33",
sex: "Male"
}
};

// obj是array时,表格的第一列是index
var arr = [
["foo", "29"],
["bar", "31"]
];

console.table(obj);
console.table(arr);

5-3 树形视图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 以XML格式输出一个JavaScript对象的交互式树形视图
// 非标准的函数命令,控制台好像也没有以XML格式进行输出
const obj = {
name: "John",
age: 30,
address: {
street: "105 Main Street",
city: "Anytown",
state: "CA",
zip: "John.12345"
}
};

console.dirxml(obj);

6 时间函数

  • 时间函数
    • 启动计时器·······················console.time(label)
    • 关闭计时器·······················console.timeEnd(label)
    • 打印总时间·······················console.timeLog(label)
    • 生成时间戳·······················console.timeStamp(label)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
console.time("count 10000");
let i=0;
while(i<10000){ i++ };
console.timeEnd("count 10000");

// console.timeLog("count 10000");
// console.timeEnd()和console.timeLog()的使用,二选一即可
// console.timeEnd()关闭计时器,"count 10000"在调用console.timeLog()前就销毁了

// 通常用于在性能分析和调试过程中标记特定的时间点,以便进行时间测量和分析
// console.timeStamp()并不会提供实际的时间测量功能
// 只是在性能分析器中创建一个可视化标记,帮助更好地理解代码执行的时间流程
console.timeStamp("开始执行代码");
console.profile("Array initialize");
var array = new Array(1000000);
for (var i=array.length-1; i>=0; i--) {
array[i] = new Object();
}
console.profileEnd("Array initialize");
console.timeStamp("代码执行结束");

7 函数追踪

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 追踪函数的调用过程,显示当前位置执行的代码在执行堆栈中的调用路径
function tracer(a) {
console.trace();
return a;
}

function foo(a) {
return bar(a);
}

function bar(a) {
return tracer(a);
}

var a = foo("tracer");

8 类型对象

  • 类型对象
    • console.context()特性
      • 每次调用console.context()时,都会返回一个新的context对象。
      • 每个context对象都有唯一的一个标识符,即使它们具有相同的标题。
      • context对象中的方法执行都会保持默认的原始行为。
    • 用法:创建独立日志上下文、日志筛选和分析、结合控制台特性、不同功能使用不同上下文。
    • JavaScript中console.context()是一个较新的控制台API,旨在日志管理更加模块化和清晰。
    • 该API不是一个标准的JavaScript API,而是一个实验性的功能,主要在Chrome浏览器中可用。

8-1 独立日志上下文*

1
2
3
4
5
6
7
8
9
// 日志消息分组似乎没有生效???
const loginContext = console.context("登录流程");
loginContext.log("开始登录过程");
loginContext.warn("用户名未填写");
loginContext.error("服务器无响应");

const paymentContext = console.context("支付流程");
paymentContext.log("初始支付模块");
paymentContext.info("处理支付信息");

8-2 日志筛选和分析*

1
2
3
4
5
// 假设有无数的日志信息
console.context("用户界面").log("更新界面元素");
console.context("数据同步").log("服务器拉数据");
console.context("用户界面").log("显示新的数据");
// 在开发者工具中,可以筛选"用户界面"或"数据同步"的日志来专注分析

8-3 结合控制台特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 创建一个名为fetchContext的日志上下文,用于记录数据获取相关的日志信息
const fetchContext = console.context("数据获取");
// 创建一个分组,将后续的日志信息组织在一起,有助于在控制台中更清晰地查看和区分不同的日志信息
fetchContext.group("请求用户数据");
// 开始计时,标记数据获取的起始时间
fetchContext.time("获取时间");

// 发起一个异步请求,获取用户数据
fetch("https://jsonplaceholder.typicode.com/users")
// 当请求成功并返回响应时,通过response.json()将响应数据解析为JSON格式
.then((response) => response.json())
.then((data) => {
// 记录获取到的用户数据,可在控制台中查看到该日志信息
fetchContext.log("用户数据:", data);
fetchContext.timeEnd("获取时间");
})
// 如果请求过程中出现错误,会进入.catch()方法
.catch((error) => {
// 记录数据获取失败的错误信息
fetchContext.error("数据获取失败:", error);
})
// 无论请求成功与否,都会执行.finally()方法
.finally(() => {
// 结束前面创建的分组
fetchContext.groupEnd();
});

8-4 使用不同上下文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 处理订单的函数processOrder(orderId)
function processOrder(orderId) {
// 创建一个订单上下文orderContext,用于记录与该订单相关的日志信息
const orderContext = console.context("订单处理:${orderId}");
orderContext.log("接收订单通知");
// try-catch捕获可能发生的异常,如果校验或支付过程中发生错误,会在订单上下文中记录错误信息
try {
orderContext.log("校验订单信息");
// 校验逻辑
orderContext.log("订单校验通过");

orderContext.log("处理支付逻辑");
// 支付逻辑
orderContext.log("支付成功提醒");
} catch (e) {
orderContext.error("订单处理错误", e);
}
// 无论订单处理成功与否,都会记录一条"完成订单处理"的日志信息
orderContext.log("完成订单处理");
}
processOrder("ORD123");

9 控制台交互

  • 控制台交互
    • $:相当于document.querySelector(),可以使用CSS选择器获取查找到的一个元素。
    • $$:相当于document.querySelectorAll(),使用CSS选择器获取查找到的元素集合。
    • $_:在控制台命令输出执行的最后一个表达式的返回值。
    • $x:传入XPath路径作为参数,获取匹配到的元素集合。
    • $0-$4:Elements面板选中的元素,$0代表本身,$1代表元素内的第一个,以此类推。
    • monitor(可以传入一个函数,用来监听函数的执行)、unmonitor(取消对函数的监听)。
    • monitorEvents(监听某元素的一个事件或行为的发生)、unmonitorEvents(取消监听)。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("百度一下");
$$("script");

10 + 2;
$_ + 3;

$x("/html/body/div");
$x("/html/body/div/text()");

// Elements选中元素,将底部的Console面板往上拖动,输入内容查看返回数据
$0;
$1;

function m() {};
monitor(m);
m();
// 返回function m called
unmonitor(m);
m();
// 返回undefined

monitorEvents($0, "click");
// 鼠标点击页面按钮时,会返回数组格式的值
unmonitorEvents($0, "click");

F12 Console 面板
https://stitch-top.github.io/2024/04/15/ce-shi-gong-ju/tt06-f12-kai-fa-zhe-gong-ju/tt02-f12-console-mian-ban/
作者
Dr.626
发布于
2024年4月15日 21:15:00
许可协议