2012-02-01 1 views
51

동적으로 추가 된 스크립트가 브라우저의 디버거 스크립트 섹션에 표시되지 않습니다. 내가 사용하는 것이 필요 myScript.js 동적으로 어떤 조건을 충족로드 할 수 있도록브라우저의 디버거 자체에서 동적으로로드 된 JavaScript (jQuery 사용)를 디버깅하는 방법은 무엇입니까?

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

을 사용했다

... 그리고 myFunction이 단지를받은 후 호출 할 수 있습니다 : 설명이

전체 스크립트가로드되었습니다 ...

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

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

+0

가능한 [WebKit, FireBug 또는 IE8 Developer Tool 같은 일부 디버거로 동적로드 JavaScript를 디버그 할 수 있습니까?] (http://stackoverflow.com/questions/1705952/is-possible-to-debug-dynamic- loading-javascript-by-some-debugger-like-webkit-fi) – JerryGoyal

답변

139

동적으로로드 된 스크립트의 이름을 Chrome/Firefox JavaScript 디버거에 표시 할 수 있습니다. 이렇게하려면 스크립트의 끝 부분에 주석을 배치 :

//# sourceURL=filename.js 

이 파일은 다음 filename.js로 "소스"탭에 표시됩니다. 제 경험상 이름에 \를 사용할 수는 있지만 /를 사용하면 이상한 행동을 보입니다. 자세한 내용은

은 다음을 참조하십시오 Breakpoints in Dynamic JavaScript deprecation of //@sourceurl

+3

이것이 올바른 것으로 표시되지 않았으므로이 기능이 실제로 매력처럼 작동하는지 확인하려고합니다. –

+1

이것이 올바른 대답으로 표시되지 않은 이유가 확실하지 않습니다. AFIK, 이것이 최고의 솔루션입니다. – kiprainey

+0

이 답변을 너무 늦게 읽어 주셔서 진심으로 사과드립니다! – TwiToiT

7

내가 사용하는 시도 "// # sourceURL = filename.js"영업에 의한 해결 방법으로 제안되었다,하지만 여전히에 대한 표시되지되었다 내 탭에 이미 존재하지 않는 한 이전에 예외가 발생했을 때 소스 패널에 있습니다.

"디버거; 라인은 그 위치에서 부서 지도록 강요했다. 그런 다음 소스 패널의 내 탭에 정상적으로 중단 점을 설정하고 "디버거"를 제거 할 수 있습니다. 선. 소스 파일은 당신이 그것을 디버깅 할 경우,이 방법은 (NO 도메인)에 표시 그룹 것 소스 탭에 나타나는

+4

소스 탭 아래의 (도메인 없음) 목록에도 나타날 수 있습니다. – Splaktar

+0

또한'debugger;'를 사용해야하고, 스크립트가로드되는 동안 DevTools가 열려 있어야했습니다. – Barmar

0

공지 사항, 당신은 당신의 코드에서 debugger; 라인을 추가해야합니다, 확인 그 라인은 (일반적으로 소스 파일의 실행을 시작할 때) 실행되고 원하는 곳 어디에서든지 중단 점을 추가하십시오.

생산 단계를 디버깅하는 경우 코드에 debugger; 줄이 없을 경우 Charlesvel에서 "debbuger 줄이 삽입 된 원본 파일의 최신 복사본"으로 로컬 맵을 수행하면됩니다 ".

+0

이것은 나를 구해주었습니다! 내가 한 일과 상관없이 디버거 명령을 입력하기 전까지는 파일이 표시되지 않았습니다. 그런 다음 디버거 명령을 제거한 후에도 페이지 재로드 및 세션 디버깅을 지속합니다. –

9

//# sourceURL=//# sourceMappingURL=을 스크립트 파일 또는 스크립트 태그 끝에 사용할 수 있습니다.

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

+0

더 이상 사용되지 않는 정보 : https://developers.google.com/web/updates/2013/06/sourceMappingURL-and-sourceURL-syntax-changed – Pysis

관련 문제