Programing

Safari에서 console.log의 기본 동작을 어떻게 변경합니까?

lottogame 2020. 6. 16. 21:32
반응형

Safari에서 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));

This indents the object with 2 spaces at each level.

How can I pretty-print JSON using JavaScript?


There is an option to use a debugger library.

https://debugjs.net/

Just include the script into your web page and put log statements.

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

Logging

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

I may be shot for suggesting this, but this can be taken one step further. We can directly extend the console object itself to make it more clear.

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

I don't know if this will cause some type of library collision/nuclear meltdown/rip in the spacetime continuum. But it works beautifully in my qUnit tests. :)


Simply refresh the page after you open the console or open the console before you submit the request to the targeted page....


Just print whole object on console.

console.dir(object);

참고URL : https://stackoverflow.com/questions/7389069/how-can-i-change-the-default-behavior-of-console-log-in-safari

반응형