Chrome开发者工具三个小技巧

Hello，这篇文章的内容来自订阅的邮件，所以没办法给出链接。
作者是ng-book的Nate，或许大家网上可以找到原文。

1. console.table

这个应该很直观明显，可以直接在console上试试。

console.e.jpg

2. 在console.log中使用CSS

用法就是：

console.log(
  "%cHello, World!",
  "font-size:600%;color:salmon;font-weight:bold;font-family:Mongoose; text-transform: uppercase;"
);

注意到第一个参数前面的%c没有，表示需要应用CSS样式。这样的特性甚至可以让我们加载图片（作为背景图片）。

let src = "https://imgur.com/jFhFXNB.png";
let img = new Image();
img.onload = () =>
  console.log(
    "%c+",
    "background: url(" +
      src +
      "); background-size: 252px 314px; color transparent; padding: 150px 122px"
  );
img.src = src;

3. 使用await

使用下面的代码感受一下：

const url = "https://world.openfoodfacts.org/api/v0/product/737628064502.json";
// Ew
fetch(url)
  .then(response => response.json())
  .then(body => console.log(body));

// let's try using await
let response = await fetch(url).then(response => response.json());

结果如下图：

console-await.e.jpg