Firefox와 비교하여 Chrome 및 Safari 콘솔 개체 표시 이상이 발생하는 이유는 무엇입니까?

브라우저 콘솔의 개체 표시 이상

프로그래밍에서 디버깅에는 콘솔에 있는 개체의 속성과 값을 검사하는 작업이 포함됩니다. 그러나 Chrome, Firefox 및 Safari의 브라우저 콘솔에 개체를 표시할 때 사용자는 예기치 않은 불일치를 경험할 수 있습니다.

Chrome 및 Safari와 Firefox: 개체 값 불일치

질문에 제공된 JavaScript 코드를 고려하십시오.

<code class="javascript">var foo = { bar: 1111 };
console.log(foo);
console.log(foo.bar);
foo.bar = 2222;
console.log(foo);
console.log(foo.bar);</code>

Firefox의 Firebug는 예상 값을 다음과 같이 표시하는 반면:

Object { bar=1111}
1111
Object { bar=2222}
2222

Chrome 및 Safari 콘솔은 특이한 동작을 나타냅니다.

Object { bar=2222}
1111
Object { bar=2222}
2222

불일치 설명

Chrome과 Safari의 콘솔 동작은 디자인 결정에서 비롯됩니다. 객체가 처음에 console.log에 전달되면 참조로 처리됩니다. 동일한 개체에 대한 후속 로깅에는 초기 로그 당시의 값이 아닌 현재 값이 표시됩니다.

콘솔에서 개체 탭이 확장되면 해당 값이 고정되고 원래 개체에서 분리됩니다. . 결과적으로 나중에 개체 값을 변경해도 확장된 탭의 표시에는 영향이 없습니다.

해결 방법

이러한 불일치를 방지하기 위해 개발자는 개체를 직렬화하는 방법을 사용할 수 있습니다. JSON 문자열화와 같은 객체를 객체가 아닌 값으로 변환:

<code class="javascript">console.log(JSON.stringify(foo));</code>

위 내용은 Firefox와 비교하여 Chrome 및 Safari 콘솔 개체 표시 이상이 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!