[javascript] 브라우저의 디버거 자체에서 동적으로로드 된 JavaScript (jQuery 사용)를 디버깅하는 방법은 무엇입니까?

Program / 글쓴이

동적으로 추가 된 스크립트가 브라우저의 디버거 스크립트 섹션에 표시되지 않습니다.

설명:

나는 사용하고 사용했다

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

myScript.js가 어떤 조건을 충족 할 때 동적으로로드 될 수 있도록 … 그리고 myFunction은 전체 스크립트를로드 한 후에 만 ​​호출 할 수 있습니다.

그러나 브라우저는 디버거의 스크립트 섹션에 동적으로로드 된 myScript.js를 표시하지 않습니다.

브라우저 자체에서 동적으로로드 된 스크립트를 디버깅 할 수있는 모든 목표를 달성 할 수있는 다른 방법이 있습니까?

답변

동적으로로드 된 스크립트에 이름을 지정하여 Chrome / Firefox JavaScript 디버거에 표시되도록 할 수 있습니다. 이렇게하려면 스크립트 끝에 주석을 추가합니다.

//# sourceURL=filename.js

이 파일은 “소스”탭에 다음과 같이 표시됩니다. filename.js . 내 경험상 이름에 \ ‘s를 사용할 수 있지만 /’s를 사용하면 이상한 동작이 발생합니다.

자세한 내용 은 // @ sourceurl의 동적 JavaScript
지원 중단의 중단 점을 참조하세요.

답변

당신은 사용할 수 있습니다 //# sourceURL=및 //# sourceMappingURL=스크립트 파일 또는 스크립트 태그의 끝에서.

참고 : //@ sourceURL 및 //@ sourceMappingURL더 이상 사용되지 않습니다.

답변

OP에 의해 해결 방법으로 제안 된 “// # sourceURL = filename.js”를 사용해 보았지만 이전 시간의 탭에 이미 존재하지 않는 한 소스 패널에 여전히 표시되지 않았습니다. 예외가 발생했습니다.

“디버거”코딩 라인이 그 위치에서 끊어지게했습니다. 그런 다음 Sources 패널의 탭에 있으면 정상적으로 중단 점을 설정하고 “디버거”를 제거 할 수 있습니다. 선.

답변

이러한 방식으로 소스 탭에 나타나는 소스 파일은 (도메인 없음) 그룹에 나타나며 , 디버그하려는 경우 추가해야합니다.debugger; 코드에 줄 해당 줄이 실행되도록해야합니다 (일반적으로 소스 파일 실행 시작) 원하는 곳에 중단 점을 추가하십시오.

debugger;코드에 줄 이없는 프로덕션 단계를 디버깅하는 경우 CharlesProxy를 사용하여 “디 버버 줄이 삽입 된 소스 파일의 새 복사본”에 로컬 맵을 수행하여이를 수행 할 수 있습니다.

답변

IE에서 이런 종류를 추적하려고 할 때 개발 도구 (F12)를 열고 콘솔에서 다음 줄을 사용하여 중단 점을 배치 할 위치를 찾습니다.

debugger;myFunction();

그러면 myFunction()중단 점 으로 들어가서 설정할 수있는 디버거 탭으로 전환됩니다 .

답변