Sự khác biệt giữa console.dir và console.log là gì?

Trong Chrome, consoleđối tượng xác định hai phương thức dường như làm cùng một điều:

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

Tôi đã đọc ở đâu đó trực tuyến dircó một bản sao của đối tượng trước khi đăng nhập nó, trong khi logchỉ chuyển tham chiếu đến bàn điều khiển, có nghĩa là khi bạn đi kiểm tra đối tượng bạn đã đăng nhập, nó có thể đã thay đổi. Tuy nhiên, một số thử nghiệm sơ bộ cho thấy rằng không có sự khác biệt và cả hai đều phải chịu đựng các vật thể có khả năng hiển thị ở các trạng thái khác nhau so với khi chúng được ghi lại.

Hãy thử điều này trong bảng điều khiển Chrome ( Ctrl+ Shift+ J) để xem ý tôi là gì:

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

Bây giờ, mở rộng [Object]bên dưới câu lệnh log và lưu ý rằng nó hiển thị foovới giá trị là 2. Điều tương tự cũng đúng nếu bạn lặp lại thử nghiệm bằng cách sử dụng dirthay vì log.

Câu hỏi của tôi là, tại sao hai chức năng dường như giống hệt nhau tồn tại trên console?

Trong Firefox, các hàm này hoạt động hoàn toàn khác: logchỉ in ra một toStringđại diện, trong khi dirin ra một cây có thể điều hướng.

Trong Chrome, logđã in ra một cây - hầu hết thời gian . Tuy nhiên, Chrome logvẫn sắp xếp các lớp đối tượng nhất định, ngay cả khi chúng có thuộc tính. Có lẽ ví dụ rõ ràng nhất về sự khác biệt là một biểu thức chính quy:

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

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

Bạn cũng có thể thấy một sự khác biệt rõ ràng với các mảng (ví dụ, console.dir([1,2,3])) được logged khác với các đối tượng bình thường:

> 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] }
        ...

Các đối tượng DOM cũng thể hiện hành vi khác nhau, như đã lưu ý trên một câu trả lời khác .

Một sự khác biệt hữu ích khác trong Chrome tồn tại khi gửi các phần tử DOM đến bảng điều khiển.

Để ý:

• console.log in phần tử trong cây giống như HTML
• console.dir in phần tử trong cây giống như JSON

Cụ thể, console.logcung cấp xử lý đặc biệt cho các yếu tố DOM, trong khi console.dirkhông. Điều này thường hữu ích khi cố gắng xem đại diện đầy đủ của đối tượng DOM JS.

Có thêm thông tin trong tài liệu tham khảo API của Chrome Console về chức năng này và các chức năng khác.

Tôi nghĩ Firebird làm điều đó khác với các công cụ phát triển của Chrome. Dường như Fireorms cung cấp cho bạn một phiên bản được xâu chuỗi của đối tượng trong khi console.dircung cấp cho bạn một đối tượng có thể mở rộng. Cả hai đều cung cấp cho bạn đối tượng có thể mở rộng trong Chrome và tôi nghĩ đó là nơi mà sự nhầm lẫn có thể đến từ đó. Hoặc đó chỉ là một lỗi trong Chrome.

Trong Chrome, cả hai đều làm điều tương tự. Mở rộng trong thử nghiệm của bạn, tôi đã nhận thấy rằng Chrome có được giá trị hiện tại của đối tượng khi bạn mở rộng nó.

> 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

Bạn có thể sử dụng cách sau để lấy phiên bản được xâu chuỗi của một đối tượng nếu đó là những gì bạn muốn xem. Điều này sẽ cho bạn thấy đối tượng là gì tại thời điểm dòng này được gọi, không phải khi bạn mở rộng nó.

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

Sử dụng console.dir () để xuất ra một đối tượng có thể duyệt mà bạn có thể nhấp qua thay vì phiên bản .toString (), như thế này:

console.dir(obj/this/anything)

Làm cách nào để hiển thị toàn bộ đối tượng trong bảng điều khiển Chrome?

Từ trang web firebird http://getfireorms.com/logging/

Gọi console.dir (đối tượng) sẽ ghi lại một danh sách tương tác các thuộc tính của đối tượng, như> một phiên bản thu nhỏ của tab DOM.

Theo lời khuyên của Felix Klings, tôi đã dùng thử trong trình duyệt chrome của mình.

console.dir([1,2]) đưa ra đầu ra sau:

Array[2]
 0: 1
 1: 2
 length: 2
 __proto__: Array[0]

Trong khi console.log([1,2])đưa ra đầu ra sau:

[1, 2]

Vì vậy, tôi tin rằng console.dir()nên được sử dụng để có thêm thông tin như nguyên mẫu, vv trong mảng và đối tượng.

Sự khác biệt giữa console.log()và console.dir():

Đây là sự khác biệt trong một tóm tắt:

• console.log(input): Trình duyệt đăng nhập theo cách được định dạng độc đáo
• console.dir(input): Trình duyệt chỉ ghi lại đối tượng với tất cả các thuộc tính của nó

Thí dụ:

Các mã sau đây:

let obj = {a: 1, b: 2};
let DOMel = document.getElementById('foo');
let arr = [1,2,3];

console.log(DOMel);
console.dir(DOMel);

console.log(obj);
console.dir(obj);

console.log(arr);
console.dir(arr);

Đăng nhập các mục sau trong google dev tools:

Không ai trong số 7 câu trả lời trước khi đề cập đến việc console.dirhỗ trợ thêm đối số : depth, showHidden, và liệu có nên sử dụng colors.

Quan tâm đặc biệt là depth, trong đó (về lý thuyết) cho phép truyền các đối tượng vào nhiều hơn 2 cấp độ mặc định console.loghỗ trợ.

Tôi đã viết "trên lý thuyết" bởi vì trong thực tế khi tôi có một đối tượng Mongoose và chạy console.log(mongoose)và console.dir(mongoose, { depth: null }), đầu ra là như nhau. Những gì thực sự đệ quy sâu vào mongooseđối tượng đang sử dụng util.inspect:

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));