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
许可协议