爲什麼Google Chrome通過jQuery有不同的console.log（）輸出？

Question

當我控制檯登錄一個jQuery對象，例如。

var s = $("#item"); 
console.log(s); 

我得到這樣的

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…] 

之前（一個月前左右）我還記得，我會得到這樣的：

[<div id="item">pas</div>] 

是在Chrome本身這種變化？或者有jQuery的變化？或者我實際上做了一些事情，使輸出看起來不同

我覺得這第二個輸出更容易閱讀，我可以將鼠標懸停在此並將其標記在頁面上。現在我得到了太多的信息，它很難看

Answer 1

我想你注意到的是在控制檯中評估一個jQuery對象並用console.log()顯示它的區別。使用David Thomas的fiddle，在console.log語句上設置一個斷點。當它停在斷點處，鍵入$s到控制檯，你會看到

[<div id="item">pas</div>] 

然後繼續，你會看到console.log()打印的詳細對象。

我不確定jQuery或Chrome在做什麼導致這種差異。輸入$s時的輸出似乎是$s.toArray()的結果，而console.log()顯示的是真正的jQuery對象。

更多的證據表明，這不是新行爲 - 我只是從11月份鏈接了一個重複的問題。

Answer 2

var s = $("#item").html(); 
console.log(s) 

Answer 3

if div value printed on div .. then plz menstion html(). 

    var s = $("#item").html(); 

    console.log(s); 

Answer 4

嘗試...

var s = $("<div>").append($("#item").clone()).html(); 

console.log(s); 

$(s).remove(); 

這不是在其最漂亮的形式，但結果是你在找什麼，我相信你能拿出一個很好的功能因爲它...

基本上我創建一個div，將#item的副本放入它中，然後將div的innerHTML輸出到控制檯以顯示整個#item元素。 （不只是＃item的innerHTML） 然後我銷燬s來清理。

Answer 5

是的，有可能是用jQuery的變化，檢查它們是如何與DOM對象版本1.9.1

http://jsfiddle.net/5HJ3L/1/

現在正在處理，如果你以這種方式

var s = $("#item"); 
console.log(s); 

的嘗試console.log輸出將像

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…] 
0: div#item 
context: document 
length: 1 
selector: "#item" 
__proto__: Object[0] 

，如果你選擇了它觀察你會發現在關鍵0上述陣列所需的輸出，所以輸出以下行會

console.log(s[0]); 

輸出：

<div id="item">pas</div> 

此外，如果你嘗試沒有jQuery的輸出將是你所需要的一個

var e = document.getElementById('item'); 
console.log(e); 

輸出：

<div id="item">pas</div> 

PS：這不是對jQuery的，但一個建議，以顯示他們將如何通過google-chrome

校正來處理：另外要注意的問題是輸出一提的是在array形式，而方式我已建議在string

Answer 6

我得到了預期的結果發送DOM元素，而不是jQuery的控制檯。

console.log($("div")[0]) 

Answer 7

您可以控制使用C風格的console.log控制檯日誌輸出的輸出方式：https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

例如，要出去放一個簡單的DOM元素風格：

console.log("%o", document.body)