console.dir和console.log有什麼區別？

Question

在Chrome瀏覽器中console對象定義了兩個方法，似乎做同樣的事情：

console.log(...) 
console.dir(...) 

我聽說網上說dir拍攝對象的副本記錄之前，而log只是傳遞的參考控制檯，這意味着當你去檢查你記錄的對象時，它可能已經改變了。然而，一些初步測試表明，沒有任何區別，並且它們都有可能在不同狀態下顯示對象，而不是在它們被記錄時。

在Chrome控制檯試試這個（按Ctrl + 移 + Ĵ），看看我的意思是：

> o = { foo: 1 } 
> console.log(o) 
> o.foo = 2 

現在，展開[Object]日誌語句下面，請注意，顯示foo，值爲2.如果使用dir而不是log重複實驗，情況也是如此。

我的問題是，爲什麼這兩個看似相同的函數存在於console？

Answer 1

在Firefox中，這些功能的行爲完全不同：log只打印出toString表示，而dir打印出一個瀏覽樹。

在Chrome中，log已經打印出一棵樹 - 大部分時間爲。但是，Chrome的log仍然將特定類別的對象串起來，即使它們具有屬性。也許的差的最明顯的例子是一個正則表達式：

> console.log(/foo/); 
/foo/ 

> console.dir(/foo/); 
* /foo/ 
    global: false 
    ignoreCase: false 
    lastIndex: 0 
    ... 

還可以看到與陣列明顯的差異（例如，console.dir([1,2,3])），其log從正常對象GED不同：

> console.log([1,2,3]) 
[1, 2, 3] 

> console.dir([1,2,3]) 
* Array[3] 
    0: 1 
    1: 2 
    2: 3 
    length: 3 
    * __proto__: Array[0] 
     concat: function concat() { [native code] } 
     constructor: function Array() { [native code] } 
     entries: function entries() { [native code] } 
     ... 

DOM物體也表現出不同的行爲，as noted on another answer。

Answer 2

從螢火蟲網站 http://getfirebug.com/logging/

調用console.dir（對象）將記錄一個對象的屬性的交互式上市，像>的DOM選項卡的微縮版。

Answer 3

使用console.dir（）輸出可瀏覽的對象，你可以通過替代的ToString（）版本，請點擊，這樣的：

console.dir(obj/this/anything) 

How to show full object in Chrome console?

Answer 4

我認爲螢火蟲與Chrome的開發工具不同。它看起來像Firebug給你一個字符串版本的對象，而console.dir給你一個可擴展的對象。兩者都爲Chrome提供了可擴展的對象，我認爲這是混淆可能來自的地方。或者這只是Chrome中的一個錯誤。

在Chrome中，兩者都做同樣的事情。擴大您的測試範圍，我注意到Chrome在展開對象時會獲取對象的當前值。

> o = { foo: 1 } 
> console.log(o) 
Expand now, o.foo = 1 
> o.foo = 2 
o.foo is still displayed as 1 from previous lines 

> o = { foo: 1 } 
> console.log(o) 
> o.foo = 2 
Expand now, o.foo = 2 

如果這是您想要查看的內容，您可以使用以下命令獲取對象的字符串化版本。這會告訴你在調用這一行時該對象是什麼，而不是當你展開它時。

console.log(JSON.stringify(o)); 

Answer 5

繼Felix Klings的建議之後，我在我的Chrome瀏覽器中試用了它。

console.dir（[1,2]）給出以下輸出：

陣列[2]

0:1

1:2

長度：2

_ 原 _：數組[0]

雖然的console.log（[1,2]）給出以下輸出：

[1,2]

所以我認爲應該使用console.dir（）來獲取像數組和對象中的原型等更多信息。

Answer 6

將DOM元素髮送到控制檯時，Chrome中存在另一個有用的差異。

說明：

• console.log打印在HTML狀樹中的元件
• console.dir打印在一類JSON樹

具體的元件，console.log給出DOM元素的特殊處理，而console.dir沒有。當試圖查看DOM JS對象的完整表示時，這通常很有用。

有關此功能和其他功能的更多信息，請參閱Chrome Console API reference。