console.log에 객체의 현재 상태를 표시하려면 어떻게해야합니까?

애드온 (및 대부분의 다른 브라우저)이없는 Safari에서는 호출 된 console.log상태가 아니라 마지막 실행 상태에서 객체를 표시합니다 console.log.

console.log해당 줄에서 객체의 상태를 얻으려면 출력하기 위해 객체를 복제해야합니다 .

예:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}

찾고 계신 것 같습니다 console.dir().

console.log()객체에 대한 참조를 인쇄하기 때문에 원하는 것을 수행하지 않으며 열 때마다 변경됩니다. console.dir객체를 호출 할 때 객체의 속성 디렉토리를 인쇄합니다.

아래 JSON 아이디어는 좋은 아이디어입니다. JSON 문자열을 구문 분석하고 .dir ()이 제공하는 것과 같은 탐색 가능한 객체를 얻을 수도 있습니다.

console.log(JSON.parse(JSON.stringify(obj)));

기록 당시의 상태를보고 싶을 때 일반적으로하는 것은 JSON 문자열로 변환하는 것입니다.

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

바닐라 JS :

@evan의 대답 은 여기에 가장 좋습니다. JSON.parse / stringify를 사용하여 객체의 복사본을 효과적으로 만듭니다.

console.log(JSON.parse(JSON.stringify(test)));

JQuery 전용 솔루션 :

특정 시점에 객체의 스냅 샷을 만들 수 있습니다. jQuery.extend

console.log($.extend({}, test));

실제로 여기서 발생하는 것은 jQuery가 test객체의 내용 으로 새 객체를 생성 하고 로깅하는 것이므로 변경되지 않습니다.

AngularJS (1) 특정 솔루션 :

Angular는 copy동일한 효과에 사용할 수 있는 기능을 제공합니다 .angular.copy

console.log(angular.copy(test));

바닐라 JS 래퍼 기능 :

다음은 랩핑 console.log하지만 로그 아웃하기 전에 객체를 복사 하는 함수입니다 .

나는 대답에서 비슷하지만 덜 강력한 기능에 대한 응답으로 이것을 썼습니다. 그것은 여러 인수를 지원하고, 것입니다 하지 그렇지 않은 경우 일을 복사하려고 일반 객체.

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

사용법 예 :consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

그것은 > Object콘솔에서 만 현재 상태를 표시되지 않습니다. 실제로 객체 읽기를 지연시키고 있으며 확장 할 때까지 속성입니다.

예를 들어

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

그런 다음 첫 번째 통화를 확장하면 두 번째 통화가 끝나기 전에 전화를 걸면 정확 console.log합니다.

Xeon06의 힌트를 사용하여 객체에서 JSON을 구문 분석 할 수 있으며 다음은 객체를 덤프하는 데 사용하는 로그 함수입니다.

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}

유틸리티를 정의했습니다.

function MyLog(text) {
    console.log(JSON.stringify(text));
}

콘솔에 로그온하고 싶을 때 간단하게 수행합니다.

MyLog("hello console!");

잘 작동합니다!

사람이 읽을 수있는 방식으로 객체를 기록 할 수 있습니다.

console.log(JSON.stringify(myObject, null, 2));

각 레벨에서 2 개의 공백이있는 오브젝트를 들여 쓰기합니다.

JavaScript를 사용하여 JSON을 예쁘게 인쇄하려면 어떻게해야합니까?

디버거 라이브러리를 사용하는 옵션이 있습니다.

https://debugjs.net/

웹 페이지에 스크립트를 포함시키고 로그 문을 넣으십시오.

<script src="debug.js"></script>

벌채 반출

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}

나는 이것을 제안하기 위해 총을 맞을 수도 있지만, 이것은 한 걸음 더 나아갈 수 있습니다. 콘솔 객체 자체를 직접 확장하여 더 명확하게 만들 수 있습니다.

console.logObject = function(o) {
  (JSON.stringify(o));
}

이것이 시공간 연속체에서 어떤 유형의 라이브러리 충돌 / 핵 붕괴 / 찢어짐을 일으키는 지 모르겠습니다. 그러나 그것은 내 qUnit 테스트에서 아름답게 작동합니다. :)

콘솔을 연 후 페이지를 새로 고치거나 요청을 대상 페이지에 제출하기 전에 콘솔을 열기 만하면됩니다.

콘솔에서 전체 개체를 인쇄하십시오.

console.dir(object);