AJAX(특히 jQuery)를 통해 로드된 Javascript를 디버깅하려면 어떻게 해야 합니까?
최근에는 보다 복잡한 프로젝트에서의 코딩 스타일을 페이지(및 그 삽입 스크립트) 로딩으로 변경했습니다.다만, 이러한 스크립트를 로드했을 때에 다음과 같이 디버깅하는 것은 어렵습니다.
jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });
또는
$('#some-container').load('/myOtherPage');
이러한 스크립트는 완벽하게 실행되지만 디버깅을 할 경우 동적으로 로드된 페이지 및 스크립트에서 중단점을 설정하려면 어떻게 해야 합니까?
끊을 js파일에 추가합니다.
debugger;
그런 다음 다른 디버거와 마찬가지로 실행/해제/해제합니다.
동적으로 로드된 스크립트 및 페이지에 대해 작동합니다.제가 아는 한 크롬에서만 작동합니다.
갱신하다
현재 접수된 폼은#(비교적@(기호에서)
IE 조건부 컴파일 스테이트먼트 및 기타 문제와의 경합을 피하기 위해 구문이 변경되었습니다(Oleksandr Pshenychny 및 Varunkumar Nagarajan이 이를 지적한 덕분).
//#sourceURL=/path/to/file
이것은 코드 블록을 식별하는 데 도움이 되는 문자열입니다.
JMac의 또 다른 장점:
저는 "(도메인 없음)이라는 그룹 내의 소스 목록에 js 파일이 표시되어 있었습니다.내가 처음에 놓쳤으니 언급할 가치가 있을지도 몰라!
원래의
나는 이 기사를 접하기 전 일주일 정도 위와 씨름했다.제 개발 환경에 딱 맞는다고 생각합니다(Crome 22는 이렇게 쓰고 있습니다).
Firebug는 개발자 이름의 eval() 버퍼도 지원합니다.다음과 같이 eval(표현식) 끝에 행을 추가합니다.
//@ sourceURL=foo.js
예를 들어 다음과 같은 간단한 html 문서가 있습니다.
<!DOCTYPE html>
<html>
<body>
<p>My page's content</p>
<div id="counter"></div>
<script type="text/javascript">
//if this page is loaded into the DOM via ajax
//the following code can't be debugged
//(or even browsed in dev-tools)
for(i=0;i<10;i+=1) {
document.getElementById('counter').innerText = i;
}
//but if I add the line below
//it will "magically" show up in Dev Tools (or Firebug)
//@ sourceURL=/path/to/my/ajaxed/page
</script>
<body>
</html>
내가 아직 발견하지 못한 것:
- 인라인 스크립트의 스크립트 블록마다 이 작업을 수행해야 합니까?
- 스크립트 블록의 마지막 줄이어야 합니까?(기사에서는 이에 대한 대답이 '그렇다'고 제안합니다.)
이 문제는 일반적으로 새로운 플러그마를 사용하여 해결된 것으로 보입니다.
//# sourceURL=filename
'해시'를 확인합니다.#'at'가 아니라@기호.
이 행을 소스에 포함시키면 디버거에 참조가 표시됩니다.
이미 언급하셨듯이//@ sourceURL. Chrome은 지원하지 않는 것 같습니다.//@ sourceURLinline 스크립트의 경우.평가 표현식에 효과가 있습니다.소스 맵에 관한 이 HTML5 기사에서는 평가 블록 이름 지정 및 코드의 익명 함수 이름 지정에 대해 자세히 설명합니다.
eval을 사용하는 대신 스크립트태그 또는 JSONP를 삽입해 보겠습니다.
언급URL : https://stackoverflow.com/questions/13129904/how-do-i-debug-javascript-which-was-loaded-via-ajax-specifically-jquery
'sourcecode' 카테고리의 다른 글
| 각도 설정 방법JS 출력 이스케이프 HTML (0) | 2023.02.11 |
|---|---|
| angularJS는 Base64 이미지를 표시합니다. (0) | 2023.02.11 |
| woocommerce에 모든 주문을 볼 수 있는 쇼트 코드/페이지가 있습니까? (0) | 2023.02.11 |
| WordPress REST API에서 원시 HTML 출력 가져오기 (0) | 2023.02.07 |
| JObject를 사전으로 변환합니다. 가능합니까? (0) | 2023.02.07 |