console.dir과 console.log의 차이점은 무엇입니까?

Chrome에서 console객체는 동일한 작업을 수행하는 두 가지 방법을 정의합니다.

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

온라인에서 어딘가 dir에서 오브젝트를 복사하기 전에 오브젝트의 사본 을 가져 오는 반면 log콘솔에 참조를 전달하기 만하면 로깅 한 오브젝트를 검사 할 때 오브젝트가 변경되었을 수 있습니다. 그러나 일부 예비 테스트에 따르면 아무런 차이가 없으며 둘 다 기록되었을 때와는 다른 상태의 객체가 표시 될 가능성이 있습니다.

Chrome 콘솔 ( Ctrl+ Shift+ J) 에서이 기능을 사용해보십시오 .

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

이제 [Object]로그 문 아래를 확장하고 foo값이 2로 표시 되는지 확인하십시오 . dir대신을 사용하여 실험을 반복하는 경우에도 마찬가지 입니다 log.

내 질문은, 왜이 두 겉보기에 동일한 기능이 존재 console합니까?

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다른 정상 개체에서 검정 고시를 :

> 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 객체는 다른 동작을 나타냅니다 .

Chrome에서 또 다른 유용한 차이점은 콘솔에 DOM 요소를 보낼 때 존재합니다.

주의:

• console.log HTML과 같은 트리에서 요소를 인쇄합니다
• console.dir JSON과 같은 트리에서 요소를 인쇄합니다.

특히 console.logDOM 요소에 특별한 처리를 제공하는 반면console.dir 그렇지는 않습니다. 이것은 종종 DOM JS 객체의 전체 표현을 보려고 할 때 유용합니다.

Chrome 콘솔 API 참조에는 이 기능 및 기타 기능에 대한 자세한 정보가 있습니다.

Firebug는 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));

다음과 같이 console.dir ()을 사용하여 .toString () 버전 대신 클릭 할 수있는 찾아보기 가능한 객체를 출력하십시오.

console.dir(obj/this/anything)

Chrome 콘솔에서 전체 개체를 표시하는 방법은 무엇입니까?

방화범 사이트 http://getfirebug.com/logging/에서

console.dir (object)를 호출하면> DOM 탭의 소형 버전과 같은 대화 형 객체 속성 목록이 기록됩니다.

Felix Klings의 조언에 따라 크롬 브라우저에서 시도했습니다.

console.dir([1,2]) 다음과 같은 출력을 제공합니다.

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

while console.log([1,2])은 다음과 같은 출력을 제공합니다.

[1, 2]

따라서 console.dir()배열 및 객체에서 프로토 타입 등과 같은 더 많은 정보를 얻는 데 사용해야 한다고 생각 합니다.

차이 사이 console.log()및 console.dir():

간단히 말해서 차이점은 다음과 같습니다.

• console.log(input): 브라우저는 적절한 형식으로 기록합니다
• console.dir(input): 브라우저는 모든 속성을 가진 개체 만 기록합니다

예:

다음 코드 :

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);

Google 개발자 도구에 다음을 기록합니다.

7 개 이전 답변 없음은 언급되지 console.dir지원 추가 인수를 : depth, showHidden, 및 사용 여부colors .

depth(이론적으로) 개체를 console.log지원 하는 기본 2 개 이상의 수준으로 개체를 탐색 할 수있게하는 것이 특히 중요 합니다.

나는 몽구스 객체와 달렸다을했을 때 나는 때문에 실제로는 "이론적으로"작성 console.log(mongoose)및 console.dir(mongoose, { depth: null })출력이 동일했다. 실제로 mongoose객체 에 깊이 재발 한 것은 다음을 사용하는 것입니다 util.inspect.

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