当前位置：首页>前端>正文

开发者工具如何显示response 开发者工具console怎么用

前端2024-05-05 23:34:41

摘要：工欲善其事，必先利其器。你还只用一行console.log()打天下吗？本文以 Chrome 浏览器为例，介绍了使用console的五大技巧，帮助你更优雅的展示信息，更快捷的定位缺陷。

【!important】如果只能带走一个技巧的话，希望你能尝试使用console.dir()或console.table()打印对象类消息。

前言、什么是console

console API 提供了允许开发人员执行调试任务的功能。console API 通过console对象使用。console对象提供了浏览器控制台调试的接口，可以通过只读属性window.console获取到，也可以简单的通过console引用。

第零式、打开控制台面板

第一步：打开 Chrome 开发者工具：

按F12打开；
在页面元素上右键点击，选择 “检查”；
在 Chrome 菜单中选择更多工具 > 开发者工具；
使用快捷键 Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac)。

第二步：打开控制台面板：

按 Esc 键自动弹出；
点击控制台按钮；
使用快捷键 Ctrl + 2 (Windows) 或 Cmd + 2 (Mac)。
使用快捷键 Ctrl + ] (Windows) 或 Cmd + ] (Mac)。

第一式、打印消息

根据事件级别选择打印消息的类型

通过选择log(日志)、info(信息)、warn(警告)、error(错误)等不同的方法，可以以适当的颜色打印不同事件级别的消息。
点击右键，可以选择另存为…下载消息。
点击按钮所有级别后可以筛选只展示选中的事件级别。

console.log('console.log');
console.info('console.info');
console.warn('console.warn');
console.error('console.error');

开发者工具如何显示response 开发者工具console怎么用,开发者工具如何显示response 开发者工具console怎么用_开发者工具如何显示response,第1张

在log()方法中使用占位符。需要注意的是，当要替换的参数类型和预期的打印类型不同时，参数会被转换成预期的打印类型。

let str = 'str',
    ints = 1,
    floats = 0.5,
    obj = {};
console.log('String: %s, Int: %d, Float: %f, Object: %o', str, ints, floats, obj);
// String: str, Int: 1, Float: 0.5, Object: {}

第二式、优化样式

使用{}包装变量，使输出结果更易读。

let name = 'chair',
		  inventory = 5,
		  unitPrice = 45.99;
console.log(name, inventory, unitPrice);
// chair 5 45.99

console.log({ name, inventory, unitPrice }); // 使用 {} 包装
// {name: 'chair', inventory: 5, unitPrice: 45.99}

使用console.table()将列表型的数据打印成表格。table()方法会把所有元素罗列在每一列，可以使用可选的columns参数选择要显示的列的子集。点击表格的列名可以按升序或降序重排，拖动中间的边框可以调整列宽。

const items = [
  { name: 'chair', inventory: 5, unitPrice: 45.99 },
  { name: 'table', inventory: 10, unitPrice: 123.75 },
  { name: 'sofa', inventory: 2, unitPrice: 399.5 },
];
console.table(items);
console.table(items, ["name"]);

开发者工具如何显示response 开发者工具console怎么用,开发者工具如何显示response 开发者工具console怎么用_Chrome_02,第2张

开发者工具如何显示response 开发者工具console怎么用,开发者工具如何显示response 开发者工具console怎么用_Mac_03,第3张

配合使用console.table()和{}

console.table({ name, inventory, unitPrice });

开发者工具如何显示response 开发者工具console怎么用,开发者工具如何显示response 开发者工具console怎么用_console_04,第4张

使用console.dir()打印显示一个由特定的 JavaScript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。

console.log({ name, inventory, unitPrice }); // 使用 {} 包装
// {name: 'chair', inventory: 5, unitPrice: 45.99}

console.dir({ name, inventory, unitPrice })

开发者工具如何显示response 开发者工具console怎么用,开发者工具如何显示response 开发者工具console怎么用_开发者工具如何显示response_05,第5张

使用console.group()进行消息的分组。

group()创建了一个新的内联分组，后续所有打印内容将会以子层级的形式展示，可调用 groupEnd()来闭合组。
使用console.groupCollapsed()内容打印出的方法默认是折叠的，用户必须点击按钮才能将折叠的内容打开。可调用groupEnd()来闭合组。

console.group();
  console.log('Test message');
  console.group();
    console.log('Another message');
    console.log('Something else');
  console.groupEnd();
console.groupEnd();

开发者工具如何显示response 开发者工具console怎么用,开发者工具如何显示response 开发者工具console怎么用_Mac_06,第6张

console.group();
    console.log('Test message');
    console.groupCollapsed();
            console.log('Another message');
            console.log('Something else');
    console.groupEnd();
console.groupEnd();

开发者工具如何显示response 开发者工具console怎么用,开发者工具如何显示response 开发者工具console怎么用_开发者工具如何显示response_07,第7张

第三式：优化缺陷调试

使用console.assert()断言，如果断言为false，则将一个错误消息写入控制台。如果断言是true，没有任何反应。

console.assert(true,  'the word is %s', 'foo');
console.assert(false, 'the word is %s', 'foo');
// 断言失败： the word is foo

使用console.trace()跟踪，trace()方法向控制台输出一个堆栈跟踪。

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
foo();

开发者工具如何显示response 开发者工具console怎么用,开发者工具如何显示response 开发者工具console怎么用_console_08,第8张

使用console.time()计算时间，time()会启动一个以入参作为特定名称的计时器。

入参用来标记这个计时器，作为参数调用console.timeLog()可在控制台输出计时器的值，作为参数调用console.timeEnd()可以停止计时并将经过的时间在终端中打印出来。
在显示页面中可同时运行的计时器上限为10,000。

console.time('Timer');
let total = 0;
for (let j = 1; j <= 100; j++) {
  total += j;
}
console.timeLog('Timer');      // Timer: 0.066162109375 ms
console.log('Result', total);  // Result 5050
console.timeEnd('Timer');      // Timer: 0.148193359375 ms

使用console.count()输出count()被调用的次数，方法接受一个可选参数label。如果提供了label，会记录使用该特定label调用count()的次数，countReset()会重置与label关联的计数。

for (let i = 0; i < 2; i++) {
  console.count();
}
// default: 1
// default: 2

console.count();
// default: 3

console.count('Bob');
console.count('Bob');
console.countReset('Bob')
console.count('Bob');
// Bob: 1
// Bob: 2
// Bob: 1