console.log({ myVariable });

我认为 这条推文 可能是我的所有推文中转发量最高的，但我不知道现在该如何验证。 我在这里重新阐述一下这个巧妙的小技巧，因为写博客既酷又有趣。

我过去在调试 JavaScript 时经常这样做

console.log("myVariable: ", myVariable);

但现在我这样做是因为它更容易快速输入

console.log({ myVariable });

并且您不会错过 DevTools 中的任何内容

既然这是一篇博文，我就可以稍微详细说明一下……

那里的输出显示（实际上，console.log 本身）是 DevTools 的功能，但语法不是。 通过在 JavaScript 中使用花括号，我创建了一个对象。 我不必将对象分配给任何东西，它可以只是存在。

{
  foo: "bar"
}

当您将对象传递给函数时，例如 myFunction({ config: options });，您会经常看到这种情况。“技巧”在于，当您创建对象时，您可以通过仅提供变量来“缩写”它，这使其变得隐含）。就像

const fruit = "apple";

// Shorthand
let x = {
  fruit
}

console.log(x);

// Normal way, literally the same exact thing
x = {
  "fruit": fruit
}

console.log(x); // identical

当您有一个变量并像 console.log({ myVariable }); 那样记录它时，您正在使用该简写对象创建语法，并且它会像它变成的对象一样被记录。

这个想法的一个缺点是，有时 DevTools 选择将其输出为 ▶ Object，您必须单击以打开才能查看值。 我不知道它何时选择这样做以及何时不这样做的方法是什么。 如果您不喜欢这样，或者通常不喜欢对象的输出格式，您可能更喜欢 console.table({ myVariable }); 格式