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.logHTML과 같은 트리에서 요소를 인쇄합니다console.dirJSON과 같은 트리에서 요소를 인쇄합니다.
특히 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)답변
방화범 사이트
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 개발자 도구에 다음을 기록합니다.
