101

Google Chromeを使用すると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>横の矢印をクリックしても検査できないものが印刷されます。要素のDOMだけでなく、JavaScriptオブジェクト（そのメソッドとフィールドを含む）を表示したい場合は、どうすればよいですか？

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)

参考
[ビデオ]コンソールのパワーユーザーになることについてのPaulIrish。

于 2012-03-09T12:11:16.523 に答える
4

ブラウザはhtml部分のみを印刷し、要素をオブジェクトに配置してドーム構造を確認できます。

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