console的api概览

前端很美
136 阅读3分钟

「这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战」

本文，快速通过示例来回顾JavaScript的控制台所有API方法

1.console.log

console.log是是在控制台最常用的打印值的方法。

const name = 'Console!';

console.log('hello,', name);    //hello, Console!

我们也可以使用字符串模板字面量（由 `` 包裹，并使用 ${} 连接变量值）：

console.log(`hello, ${name}`);  //hello, Console!

我们也可以在单个语句中打印多个值：

const key = 'value';
const number = 1;
const fruits = ['apple', 'banana', 'mango'];
const obj = {a: 1, b: 2};
console.log('key:', name, 'number:', number, 'fruits:', fruits, 'obj:', obj);

key: Console! number: 1 fruits: (3) ["apple", "banana", "mango"] obj: {a: 1, b: 2}

我们还有其他的方法打印值:

  • console.debug 就像'debug'日志级别的 console.log. 通常浏览器的默认日志级别是 info 在您将日志级别更改为'debug'之前不会显示。
  • console.info 就像'info'日志级别的 console.log
  • console.warn 向控制台打印警告
  • console.error 将对象作为错误打印到控制台，并包含堆栈跟踪
console.debug('Let me find you');  //不会显示
console.info('Just FYI');
console.warn('I told you !');
console.error('I cannot do it.');

image.png

2.console.assert

你可以使用console.assert 做一些断言测试。第一个参数是断言条件，如果断言条件为假，则会打印第二个参数，否则什么都不会打印出来。

// this will pass, nothing will be logged
console.assert(2 == '2', '2 not == to "2"');

// this fails, '3 not === to "3"' will be logged
console.assert(3 === '3', '3 not === to "3"');

image.png 第二个参数还可以传递对象以显示更多的信息

const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});

3.console.clear

我们可以使用 console.clear 清除控制台：

console.clear();

4.console.count

console.count 方法用于设置计数器。例如，这里我们有两个计数器，一个用于偶数值，一个用于奇数值：

[1, 2, 3, 4, 5].forEach(nb => {
  if (nb % 2 === 0) {
    console.count('even');
  } else {
    console.count('odd');
  }
});

输出：

odd: 1
even: 1
odd: 2
even: 2
odd: 3

console.countReset 方法用于将计数器重置为1，如果在上面的例子之后再执行下面代码：

console.countReset('even');
console.countReset('odd');
console.count('even');
console.count('odd');

输出：

even: 1
odd: 1

5.console.dir

我们可以使用 console.dir 以格式化的方式打印对象的所有内部属性 我们可以使用 console.dir 打印数组或对象的原型方法，

console.dir(["foo", "bar", "qux"]);  //Array

console.dir({a: "foo", b: "bar"});   //Object

▼ Array(3)
  0: "foo"
  1: "bar"
  2: "qux"
  length: 3
  ▼ __proto__: Array(0)
    ➤ concat: ƒ concat()
    ➤ constructor: ƒ Array()
    ➤ ...

▼ Object
  a: "foo"
  b: "bar"
➤ __proto__: Object

我们还可以使用 console.dir 打印函数的作用域和闭包，

var outerFunc  = function(c){ 
  var a = 1;
  var innerFunc = function(d) {
    var b = 2;
    return a + b + c + d;
  }
  return innerFunc;
}
console.dir(outerFunc(3));

输出

ƒ innerFunc(d)
    arguments: null
    caller: null
    length: 1
    name: "innerFunc"
  ➤ prototype: {constructor: ƒ}
  ➤ __proto__: ƒ ()
  ▼ [[[Scopes]]: Scopes[2]
    ➤ 0: Closure (outerFunc) {c: 3, a: 1}
    ➤ 1: Global {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}

6.console.dirxml

我们可以使用 console.dirxml 以树状结构打印HTML中的DOM 元素：

console.dirxml(document.body);

输出

▼ <body>
    <h1>hello</h1>
    <script>
      console.dirxml(document.body);
    </script>
  </body>

7.console.group

我们可以使用 console.group 和 console.groupEnd 将日志消息组合在一起。

console.group("API Details");
console.log("Scheme : HTTPS");
console.log("Host   : example.com");
console.groupEnd();

▼ API Details
  Scheme : HTTPS
  Host   : example.com

请注意，使用 console.group 记录的组消息是展开的。 如果你想让它们默认折叠，你可以使用 console.groupCollapsed 代替：

console.groupCollapsed("API Details");
console.log("Scheme : HTTPS");
console.log("Host   : example.com");
console.groupEnd();

▶ API Details

我们可以将消息进一步分组嵌套。 这允许我们以更干净格式将数据分层打印到控制台：

console.group("API Details");
console.log("Scheme : HTTPS");
console.log("Host   : example.com");

  // nesting
  console.group("User API");
  console.log("Method   : GET");
  console.log("Endpoint : /user");

    // further nesting
    console.group("Query Parameters");
    console.log("id : 1");
    console.groupEnd();

  console.groupEnd();
console.groupEnd();

▼ API Details
  Scheme : HTTPS
  Host   : example.com
  ▼ User API
    Method   : GET
    Endpoint : /user
    ▼ Query Parameters
      id : 1

8.console.table

您可以使用 console.table 以表格格式打印数据。 这种方法对于可视化大型对象和数组非常有用。

var john  = { firstName: "John",  lastName: "Smith", age: 41 };
var jane  = { firstName: "Jane",  lastName: "Doe",   age: 38 };
var emily = { firstName: "Emily", lastName: "Jones", age: 12 };

console.table([john, jane, emily]);

┌─────────┬───────────┬──────────┬─────┐
│ (index) │ firstName │ lastName │ age │
├─────────┼───────────┼──────────┼─────┤
│    0    │  'John'   │ 'Smith'  │ 41  │
│    1    │  'Jane'   │  'Doe'   │ 38  │
│    2    │  'Emily'  │ 'Jones'  │ 12  │
└─────────┴───────────┴──────────┴─────┘
▶ Array(3)

在以处理大对象时，我们还可以选择只打印一部分属性：

console.table([john, jane, emily], ["firstName"]);

输出

┌─────────┬───────────┐
│ (index) │ firstName │
├─────────┼───────────┤
│    0    │  'John'   │
│    1    │  'Jane'   │
│    2    │  'Emily'  │
└─────────┴───────────┘
▶ Array(3)

9.console.time

我们可以通过使用 console.time 启动计时器并使用 console.timeEnd 结束它来打印代码执行所花费的时间。

定时器可以有一个可选的标签，如果你使用带有标签的定时器，那么 console.time 和 console.timeEnd 必须使用相同的标签。

console.time('fetching data');
fetch('https://jsonplaceholder.typicode.com/users')
  .then(d => d.json())
  .then(console.log);
console.timeEnd('fetching data');

fetching data: 0.435791015625ms
▶ (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

10.console.trace

我们可以使用 console.trace() 将方法执行流程的堆栈跟踪打印到控制台。

  const first = () => { second(); };
  const second = () => { third(); };
  const third = () => { fourth(); };
  const fourth = () => { console.trace("The trace"); };
  first();

输出

▼ The trace
  fourth        @ test:4
  third	        @ test:3
  second        @ test:2
  first	        @ test:1
  (anonymous)   @ test:5

我们会在控制台中获得 @file_name:line_number，可以单击以导航到源码。

作者：Ashok kuikel 译者：前端很美 来源：codingnconcepts

avatar
文章
阅读
粉丝