Firebug를 사용하여 Ajax 코드 디버깅 중
Ajax 호출에서 디버깅 코드가 반환된 몇 가지 문제가 있습니다. 특히 json에서 반환된 함수(오류가 Firefox에 갇히지 않음)입니다. Internet Explorer에서 이러한 문제를 디버깅하기 시작한 시점까지(파이어폭스 관련 문제인 것 같습니다.Venkman이 이러한 오류도 감지하지 못하므로) Ajax 호출에서 json으로 반환된 코드를 디버깅할 수 있는 방법을 알고 있습니까?
편집됨 03/04/2009 15:05
모두의 답변에 감사드립니다만, 제가 제 자신을 충분히 설명하지 못한 것 같습니다.기본적인 디버깅을 할 만큼 Firebug를 충분히 알고 있지만, Ajax 호출에서 문제가 있는 코드를 가져올 때 문제가 발생합니다.다음 HTML 파일이 있다고 가정해 보겠습니다(정확하게 작동하려면 동일한 폴더에 프로토타입이 있어야 합니다).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<script>
function ajaxErrorTest()
{
new Ajax.Request('data.json', {
'method': 'get',
'onSuccess': function(data){
if(data.responseJSON.func)
data.responseJSON.func();}});
}
</script>
<input type="button" value="test" onclick="ajaxErrorTest();" />
</body>
</html>
그런 다음 data.json 파일의 내용은 다음과 같습니다.
{'func':function(){console.log('loaded...');alert('hey');}}
브라우저에서 페이지를 로드하고 '테스트' 버튼을 클릭하면 콘솔에 내용이 표시되고 '헤이'라는 경고 상자가 표시됩니다.이제 data.json 파일을 다음과 같이 변경합니다.
{'func':function(){console.log('loaded...');alerts('hey');}}
...그리고 '테스트' 버튼을 다시 클릭합니다(페이지를 다시 로드할 필요가 없습니다;-) 콘솔 라인이 표시되지만 알림 상자는 표시되지 않습니다...오류 없음!!!이것이 제가 디버깅하려는 종류의 오류입니다.
콘솔 패널(탭)을 클릭하여 활성화합니다.HTTP 요청에 포함된 모든 정보와 함께 모든 HTTP 요청이 탐지됩니다.요청에 저장된 JSON과 오류(500/404/ 등)를 확인하기 위해 사용합니다.
또한 도메인별로 콘솔 패널을 활성화해야 합니다.일반적으로 세 개의 하위 탭(헤더, 게시 및 응답)이 있습니다.저는 AJAX를 디버깅할 때 주로 포스트/응답 탭을 많이 사용합니다.
Net 탭을 사용하여 XHR(XMLHttpRequests)에 대한 요청만 필터링할 수 있습니다.
추가 팁:
- 당신의 코드나 콘솔 패널에서 console.dir(당신의 객체)를 주저하지 마세요.그러면 개체의 전체 상태와 속성이 표시됩니다.
- 요청/응답 HTTP 헤더를 확인합니다. 때로는 인코딩의 문제일 수도 있습니다.
- 어떤 이벤트/사용자 작업이 이 XHR 호출을 트리거했는지 모를 경우 AJAX 호출 직전에 console.trace()를 추가할 수 있습니다.이렇게 하면 전체 통화 스택을 얻을 수 있습니다.
편집:
다른 컨텍스트에서 실행된 코드
제가 생각해낸 유일한 방법은 (못난) 시도/캐치로 당신의 코드를 둘러싸는 것입니다.코드가 다른 자바스크립트 컨텍스트에서 실행되기 때문인 것 같습니다.
<script>
function ajaxErrorTest()
{
new Ajax.Request('data.json', {
'method': 'get',
'onSuccess': function(data){
try{
if(data.responseJSON.func)
data.responseJSON.func();}});
} catch (err) {
console.dir(err);
}
}
</script>
이 코드는 자세한 오류 메시지를 제공합니다.
ReferenceError: alerts is not defined
실행 상황을 바꾸는 것이 문제를 해결할 수 있을지 정말 의심스럽습니다.프로토타입으로 어떻게 하는지는 모르겠지만 jquery를 사용하면 쉽게 할 수 있습니다.
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
이 문제가 검색된 실제 JSON과 관련이 있는지 잘 모르겠습니다.당신은 당신의 것에 직접 오류를 던져볼 수 있습니까?onSuccessFirebug 콘솔에 표시되는지 확인합니다.이와 같은 것:
onSuccess: function() { alerts('hey'); }
이 경우 Firebug 1.7에서 이 문제를 해결해야 합니다.
파이어폭스에서 넷/콘솔 탭을 조합하여 사용할 것입니다.
파이어폭스의 넷 탭에서 json 결과를 복사합니다.
그런 다음 결과를 콘솔의 변수에 붙여넣고 위반 기능을 실행해 보십시오.
이 경우 다음을 붙여넣었습니다.
var x = {'func':function(){console.log('loaded...');alerts('hey');}}
x.func();
이것을 실행하면 파이어버그에서 이 오류가 발생합니다.참조 오류: 경고가 정의되지 않았습니다.
다른 사람들이 언급했듯이 콘솔 탭에서 AJAX URL을 확장하여 반환된 JSON/Javascript를 확인합니다.
그런 다음 이를 콘솔 탭의 실행/평가 패널에 복사하면 오른쪽 아래에 위/아래 화살표가 있습니다. 위를 클릭하면 오른쪽에 텍스트 영역으로 변경되고 아래를 클릭하면 아래를 따라 한 줄이 표시됩니다.
Ajax 호출이 반환되는 경우:function(){alert("hello")}
그런 다음 다음과 같은 방법을 사용할 수 있습니다.
x = eval('function(){alert("hello")}')
x();
이렇게 하면 반환된 아약스를 실행할 수 있습니다.
중단점을 사용하여 디버그하려면 HTML 보기를 사용하여 태그를 만든 다음(Firebug의 HTML 보기 사용) 이 태그 내의 함수에 코드를 붙여넣습니다.그런 다음 중단점을 설정하고 run'/eval 패널에서 이전 기능을 호출하여 실행할 수 있습니다.
이 방법이 제대로 작동하면 분명 제어할 수 없는 버그가 있지만 json을 텍스트/일반으로 다시 보내고 변수에 할당한 다음 평가하여 문제를 해결할 수 있습니다.
이것은 간단합니다. 저는 항상 FIDDLER를 사용하여 아약스 호출을 디버깅합니다.
Fiddler는 컴퓨터와 인터넷 사이의 모든 HTTP(S) 트래픽을 기록하는 웹 디버깅 프록시입니다.Fiddler를 사용하면 모든 HTTP(S) 트래픽을 검사하고 중단점을 설정하고 수신 또는 발신 데이터를 "fiddle"할 수 있습니다.Fiddler에는 강력한 이벤트 기반 스크립팅 하위 시스템이 포함되어 있으며 아무 것이나 사용하여 확장할 수 있습니다.NET 언어.
저는 fiddler라는 HTTP Proxy Debugger를 사용하는데, 이는 제 AJAX 문제를 디버깅하는 데 항상 잘 작동합니다.사용자가 볼 수 있도록 모든 HTTP 요청 및 응답을 캡처합니다.http://www.fiddlertool.com/ 에서 무료로 이용할 수 있습니다.
디버깅하려는 오류는 네이티브 파이어폭스 콘솔에서 꽤 볼 수 있습니다.예: "도구" - "오류 콘솔"
물론, 당신은 그것이 발생한 후에 그것을 볼 수 있지만 잘못된 라인 번호를 가지고 있습니다(거의 유사함).
게시물에 언급된 특정 이슈는 파이어폭스에 대한 것으로 알고 있습니다.저는 AJAX 호출에서 나오는 자바 스크립트를 일반적으로 디버깅하는 방법을 구글링할 때 이 페이지를 시작했고 많은 다른 사람들이 그럴 것이라고 확신합니다.
제 경우 스크립트 태그가 포함된 HTML을 반환하고 있었습니다. 예를 들어, 파이어버그의 AJAX 요청에서 내려온 자바스크립트에 구문 오류가 있다면 예외나 오류가 발생하지 않을 것입니다.AJAX 콘텐츠는 렌더링되지 않습니다.
구글 크롬 빌트 디버거에서는 제기된 오류를 볼 수 있지만 코드를 통과할 수는 없습니다.만약 당신이 발을 내딛고 싶지 않다면, 당신은 그것을 위한 더미 페이지를 만들어야 할 것입니다.
그것이 지금까지 제가 얻을 수 있는 최선입니다.
동적으로 로드한 라이브러리 또는 Javascript 코드를 사용할 때 //@source라는 문구를 사용할 수 있습니다.javascript 코드의 시작 부분에 있는 URL=foo.js는 foo.js를 할당하는 이름입니다. 디버거는 해당 이름으로 표시합니다.이것은 제가 불벌레에서 생각하는 크롬에서 사실입니다.이 경우 동적으로 로드된 Javascript(또는 json) 코드에 중단점을 배치할 수 있습니다.
실행을 중지할 코드 행으로 "debugger;"를 사용합니다.이렇게 하면 로드된 소스 코드를 디버거의 소스 섹션에서 사용할 수 있습니다.크롬에서 작동하는 것은 확실합니다.
언급URL : https://stackoverflow.com/questions/606794/debugging-ajax-code-with-firebug
'programing' 카테고리의 다른 글
| PowerShell에서 어레이 변수 비교 (0) | 2023.08.15 |
|---|---|
| 64비트 시스템에서 32비트 모드로 Oracle Client 실행 (0) | 2023.08.15 |
| 스크립트로 작성한 후 SQL Management Studio에서 테이블이 존재함을 인식하지 못함 (0) | 2023.08.15 |
| Oracle USING 절 모범 사례 (0) | 2023.08.15 |
| jspinner를 사용하여 전체 HTML 페이지 로드 쿼리 (0) | 2023.08.15 |