ProgramingTip

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

bestdevel 2020. 10. 13. 08:12
반응형

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


동적으로 추가 된 펼쳐지는 브라우저의 디버거 펼쳐 섹션에 표시되지 않습니다.

설명 :

나는 사용하고 사용했습니다

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를 사용하면 이상한 동작이 발생합니다.

자세한 내용 은 // @ sourceurl의 Dynamic JavaScript deprecation의 중단 점을 참조하십시오.


은 사용할 수 당신 있습니다 //# sourceURL=//# sourceMappingURL=펼쳐 파일 또는 펼쳐 태그의 끝에서.

참고 :

//@ sourceURL//@ sourceMappingURL더 이상 사용하지 않는 문서.


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

"디버거"코딩 라인이 그 위치에서 더러워지게되었습니다. 그런 다음 소스 패널의 탭에 있으면 중단 점을 설정하고 "디버거"를 제거 할 수 있습니다. 선.


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

debugger;코드에 줄 이없는 단계를 사용하여 "디 버버 줄이 삽입 된 소스의 새 복사본"에 로컬 맵을 수행하여 수행 할 수 있습니다.


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

debugger;myFunction();

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

참고 URL : https://stackoverflow.com/questions/9092125/how-to-debug-dynamically-loaded-javascript-with-jquery-in-the-browsers-debugg

반응형