JS 파일 디버깅 - 클라이언트 측 코드

Question

런타임에 메소드가 호출되는 순서를 쉽게 알 수 있습니까?

예 : JS 파일에는 약 15 가지 방법이 있습니다. 일부 비동기 호출이 있습니다. 비동기 호출을 사용하면 호출되고 실행되는 순서를 알 수 없습니다. 그래서 : 우리가 (개발자 도구, IE \ Chrome \ FF를 사용하여) 디버깅 할 수있는 방법이 있다면 알려주고 싶습니다. 어떤 비동기 호출이 먼저 호출되었고 그들이 호출되는 순서를 알려주는 도구.

감사합니다.

Answer 1

ryan S가 제안 했으므로 console.log를 사용하면 코드 실행 순서를 확인할 수 있습니다. 그래서 console.log ("1 : [description]")를 추가 할 수 있습니다.

Answer 2

Chrome 개발자 도구를 사용하면 소스 패널을 사용하여 자바 스크립트를 디버깅 할 수 있습니다.

오른쪽에서 XHR 중단 점을 비롯한 다양한 이벤트 유형에 대한 중단 점을 추가 할 수 있습니다.

중단 점이 트리거되면 실행이 중지되고 실행 흐름을 단계별로 실행할 수 있습니다.

Firefox와 IE에는 비슷한 도구가 있습니다. 주어진 답변 옆에

Answer 3

, 당신은 또한 로깅 오브젝트의 방법을 포장 할 것 유틸리티를 작성할 수 있습니다

은 다음과 같이 될 것이다 :

function addLogging(object) { 
    Object.keys(object).forEach(function (key) { 
     if (typeof object[key] === 'function') { 
      var originalFn = object[key]; 
      object[key] = function() { 
       console.log('before calling', key); 
       var result = originalFn.apply(this, arguments); 
       console.log('after calling', key); 
       return result; 
      } 
     } 
    }); 
} 

당신이 lodash wrap 방법을 사용할 수 있습니다 도와주세요.

오래 전에 나는 위의 코드와 같은 비슷한 관한 질문 대답했다 : 그것은 완벽하게 생성자를 처리하지 않은 jQuery logger plugin

를, 그래서 그런 문제가 있었다. 여기에 fixed resulting code이 있습니다.

sinon.js도 볼 수 있으며 스파이를 제공하며 스파이 기능 호출 순서를 결정할 수 있습니다. 그러나 이것만으로는 너무 어려울 수도 있습니다. 조금 느려지기도합니다.

이 방법은 에서 일반적으로 수행되는 방법입니다. 당신은 그것에 대해 검색 할 수 있고 아마도 AOP 라이브러리를 사용하려고 시도 할 수 있습니다. meld은 인기있는 것입니다.

chrome의 console.log 대신 console.timeline을 사용할 수 있습니다. 올바르게 사용하면 큰 시야를 제공합니다.