JavaScript

JavaScript 中的 Console-API

Posted by cl9000 on June 17, 2020

达到完美境界并不是无以复加，而是无可去除。——<安托万·德·圣·埃克苏佩里>

作者：Ashish Lahoti
译者：cl9000
来源：https://codingnconcepts.com/javascript/console-api-walkthrough/

在本文中，我们将通过一些简单的例子演示 JavaScript 的 Console API 方法

1. console.log

console.log 是将值记录到控制台的最常用方法:

1
2
3
const name = 'Console!';

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

我们还可以使用 String Template Literal（使用 ${} 包裹 变量值）：

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

我们还可以在单​​个语句中将多个值记录到控制台：

1
2
3
4
5
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.log，我们还有其他方法可以将值记录到控制台：

  • console.debug 就像带有“调试”日志级别的 console.log 一样。通常，浏览器的默认日志级别为 info，直到您将日志级别更改为 debug才会显示。
  • console.info 就像 console.log 具有“ info”日志级别
  • console.warn 将警告打印到控制台
  • console.error 将对象作为错误打印到控制台，并包括堆栈跟踪
1
2
3
4
console.debug('Let me find you');  //won't be displayed
console.info('Just FYI');
console.warn('I told you !');
console.error('I cannot do it.');

Just FYI
➤ ⚠️ I told you !
➤ ⓧ I cannot do it.

2. console.assert

您可以使用进行一些断言测试 console.assert。

第一个参数是一个表达式，如果计算结果为false，则断言失败，第二个参数作为错误输出到控制台。

1
2
3
4
5
// 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"');

➤ ⓧ Assertion failed: 3 not === to “3”

您还可以在断言失败时输出的第二个参数中传递一个对象：

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

Output
➤ ⓧ Assertion failed: ➤ {x: 5, y: 3, reason: “x is expected to be less than y”}

3. console.clear

您可以使用 console.clear 以下命令清除控制台：

1
console.clear();

4. console.count

console.count方法用于计算使用相同提供的标签调用它的次数。例如，这里有两个计数器，一个用于偶数，一个用于奇数：

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

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

console.countReset如果我们在上面的示例之后执行以下操作，则该方法用于将计数器重置为1，

1
2
3
4
console.countReset('even');
console.countReset('odd');
console.count('even');
console.count('odd');

Output
even: 1
odd: 1

5. console.dir

您可以使用以下命令以格式化的方式打印对象的所有内部属性 console.dir

我们可以打印的原型方法数组或对象使用console.dir，

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

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

Output
▼ 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，

1
2
3
4
5
6
7
8
9
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));

Output
▼ ƒ 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

您可以使用树状结构以HTML格式打印DOM元素 console.dirxml

1
console.dirxml(document.body);

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

7. console.group

您可以使用console.group和将日志消息分组在一起console.groupEnd。

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

Output
▼ API Details
Scheme : HTTPS
Host : example.com

请注意，使用记录的组消息console.group最初已扩展。如果您希望默认情况下将它们折叠起来，则可以console.groupCollapsed改用：

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

Output
▶ API Details

您可以进一步将消息分组到嵌套级别。这样，您就可以以干净的格式将层次结构数据打印到控制台：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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();

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

8. console.table

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

1
2
3
4
5
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]);

Output

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

您还可以选择以这种方式处理大型对象时仅打印少量属性：

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

Output

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

9. console.time

您可以通过以 console.time 开头 和 以 console.timeEnd 结束来打印代码执行所花费的时间。

计时器可以有一个可选标签，如果您使用带标签的计时器，则两者 console.time 和 console.timeEnd 标签应具有相同的标签。

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

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

10. console.trace

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

1
2
3
4
5
const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace("The trace"); };
first();

您将获得控制台输出，可以单击以导航到源。@ file_name:line_number

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

11. console.log格式

console.log 还提供了格式设置，以使我们的日志消息在其他消息中脱颖而出。这使我们能够在控制台中找到重要消息。

  • %s 将值格式化为字符串
  • %d 或 %i 将值格式化为整数
  • %f 将值格式化为浮点数
  • %o 用于打印为可扩展的 DOM 元素
  • %O 用于打印为 JavaScript 对象
  • %c 用于将 CSS 样式规则应用于第二个参数指定的输出字符串

我们将值格式化为字符串，整数和浮点数：

1
2
console.log('The %s is turning %d in next %f months', 'kid', 18, 2.5);
//The kid is turning 18 in next 2.5 months

让我们看看将DOM打印为可扩展HTML元素树或JSON对象树有什么大惊小怪的：

1
2
3
console.log('%o', document.body);   //Print HTML element tree

console.log('%O', document.body);   //Print JSON object tree

Output
▶ <body class="body" data-gr-c-s-loaded="true"> ... <body>
▶ body.body

您可以像这样打印彩色格式化的日志消息：

1
2
3
4
5
6
const red = 'color:red';
const orange = 'color:orange';
const green = 'color:green';
const blue = 'color:blue';

console.log('%cHello %cWorld %cfoo %cbar', red, orange, green, blue);

Output
Hello World foo bar

还可以使用多个样式属性将时尚的横幅打印到控制台：

1
2
3
4
5
console.log(
'%cThanks for reading %cCodingNConcepts :)',
'color: #000; font-weight: bold; font-size: 1.5rem; border: 1px solid black; padding: 5px; margin-right: 5px;',
'color: #e22d30; font-weight: bold; font-size: 2rem; text-shadow: 0 0 5px rgba(0,0,0,0.2);',
);

参考

…

关注【公众号】，了解更多。
关注【公众号】，了解更多。
关注【公众号】，了解更多。


赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！



FEATURED TAGS
JavaScript
FRIENDS