101

使用谷歌浏览器，如果你console.log是一个对象，它可以让你检查控制台中的元素。例如：

var a = { "foo" : "bar", "whiz" : "bang" };
console.log(a);

这会打印出Object可以通过单击旁边的箭头来检查的内容。但是，如果我尝试记录 HTMLElement：

var b = goog.dom.query('html')[0];
console.log(b);

这会打印出<html></html>通过单击旁边的箭头无法检查的内容。如果我想查看 JavaScript 对象（及其方法和字段）而不仅仅是元素的 DOM，我该怎么做？

4

3 回答 3

188

使用console.dir：

var element = document.documentElement; // or any other element
console.log(element); // logs the expandable <html>…&lt;/html>
console.dir(element); // logs the element’s properties and values

如果您已经在控制台中，您可以简单地键入dir而不是console.dir：

dir(element); // logs the element’s properties and values

要简单地列出不同的属性名称（不包括值），您可以使用Object.keys：

Object.keys(element); // logs the element’s property names

即使没有公共console.keys()方法，如果您已经在控制台中，您可以输入：

keys(element); // logs the element’s property names

但是，这在控制台窗口之外不起作用。

于 2012-03-09T12:11:18.103 回答
31

尝试这个：

console.dir(element)

参考
[视频] Paul Irish 成为控制台高级用户。

于 2012-03-09T12:11:16.523 回答
4

浏览器只打印 html 部分，您可以将元素放在一个对象中以查看圆顶结构。

console.log({element})
于 2020-07-20T06:41:49.593 回答