Tại sao Google Chrome có đầu ra console.log() khác nhau thông qua jQuery?

Question

Khi tôi điều khiển ghi nhật ký một đối tượng jquery ví dụ.

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

tôi nhận được một cái gì đó như thế này

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

Tôi nhớ trước (một tháng trước hoặc lâu hơn), tôi sẽ nhận được một cái gì đó như:

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

là sự thay đổi này trong Chrome chính nó? Hoặc có một sự thay đổi trong jquery? Hoặc tôi thực sự đã làm một cái gì đó để làm cho sản lượng trông khác nhau

Tôi thấy đầu ra thứ hai này dễ đọc hơn nhiều và tôi có thể di chuột qua nó và đánh dấu nó trên trang. Bây giờ tôi nhận được quá nhiều infos nó khá khó để đọc

Answer 1

Điều tôi nghĩ bạn đang nhận thấy là sự khác biệt giữa việc đánh giá một đối tượng jQuery trong bảng điều khiển và hiển thị nó với console.log(). Sử dụng số fiddle của David Thomas, đặt điểm ngắt trên câu lệnh console.log. Khi nó dừng lại ở breakpoint, gõ $s vào giao diện điều khiển và bạn sẽ thấy

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

Sau đó tiếp tục, và bạn sẽ thấy đối tượng tiết in bằng console.log().

Tôi thực sự không biết jQuery hoặc Chrome đang làm gì gây ra sự khác biệt này. Đầu ra khi bạn nhập $s có vẻ là kết quả của $s.toArray(), trong khi console.log() hiển thị đối tượng jQuery thực.

Bằng chứng khác cho thấy đây không phải là hành vi mới - tôi vừa liên kết câu hỏi trùng lặp từ tháng 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

thử ...

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

console.log(s); 

$(s).remove(); 

Nó không phải ở dạng đẹp nhất của mình nhưng kết quả là những gì bạn đang tìm kiếm và tôi chắc chắn rằng bạn có thể đưa ra một chức năng tốt cho nó ...

Về cơ bản tôi đang tạo một div, đặt một bản sao của #item vào trong đó, và mở rộng innerHTML của div ra bàn điều khiển để hiển thị toàn bộ phần tử #item. (Không chỉ bên trong của mụC#) Sau đó, tôi tiêu diệt s để dọn dẹp.

Answer 5

Có có thể có một sự thay đổi với jquery, kiểm tra như thế nào bây giờ họ đang đối phó với các đối tượng dom trong phiên bản 1.9.1

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

nếu bạn thử console.log theo cách này

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

sự đầu ra sẽ giống như

[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] 

nếu bạn kiểm tra xem nó chặt chẽ, bạn sẽ tìm thấy những sản lượng yêu cầu trong mảng trên tại chính 0, vì vậy đầu ra cho dòng sau sẽ

console.log(s[0]); 

Output:

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

còn nếu bạn thử nó mà không jquery đầu ra sẽ là một bạn được yêu cầu

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

Output:

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

PS: đây không phải là một gợi ý đối với jquery nhưng để chứng tỏ họ sẽ có thỏa thuận bằng google-chrome

Correction: Cũng lưu ý rằng đề cập đến đầu ra trong câu hỏi là trong array hình thức trong khi những cách tôi đã đề xuất là trong string

Answer 6

Tôi nhận được kết quả mong đợi cho bảng điều khiển gửi phần tử DOM chứ không phải jquery.

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

Answer 7

Bạn có thể kiểm soát các kiểu sản phẩm của một đầu ra giao diện điều khiển đăng nhập với c phong cách console.log: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

Ví dụ, để ra đặt với một phong cách đơn giản yếu tố dom:

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