WebKit, FireBug 또는 IE8 Developer Tool과 같은 일부 디버거에서 동적 로딩 JavaScript를 디버깅 할 수 있습니까?


90

에서 내 최근 질문 , 난 이미 동적 로딩 부분보기위한 몇 가지 자바 스크립트 함수를 만들었습니다. 따라서 동적 로딩 JavaScript를 디버깅 할 수 없습니다. 로드 된 모든 JavaScript는 "eval"함수에 의해 평가되기 때문입니다.

그러나 다음 스크립트를 사용하여 현재 문서의 헤더에 스크립트를 동적으로 생성하여 새 JavaScript를 만드는 방법을 찾았습니다. 로드 된 모든 스크립트는 HTML DOM에 표시됩니다 (디버거를 사용하여 찾을 수 있음).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

그런데 대부분의 디버거 (IE8 개발자 도구 모음, Firebug 및 Google Chrome)는 동적 스크립트에 중단 점을 설정할 수 없습니다. 디버깅 가능한 스크립트는 페이지가로드 된 후 처음으로로드되어야하기 때문입니다.

동적 스크립트 내용이나 파일에서 디버깅 할 아이디어가 있습니까?

업데이트 1-테스트를위한 소스 코드 추가

someVariable 값을 디버그하기 위해 다음 xhtml 파일을 사용할 수 있습니다.

<!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">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

대답에서 FireBug에서 테스트합니다. 결과는 아래 이미지와 같이 표시되어야합니다.

대체 텍스트 http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTql0m0ugSGXPaY-PNGugSGXPaY-PNGugSGXPaY-

페이지로드 후 추가되는 "dynamicLoadingScript"스크립트를 참조하십시오.

대체 텍스트 http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yCUDqm41Wc3h0yk/undebugable-firebug-script.PNGbugable-firebug-script.PNGbugable

하지만 FireBug의 스크립트 탭에서는 찾을 수 없습니다.

업데이트 2-동적 로딩 스크립트에서 디버그 중단 점 생성

대체 텍스트 http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAETo4Qoiw/Debugger-VS2010.png

대체 텍스트 http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Acl-UXXbHFE/Debugger-GoogleChrome.png

위의 이미지는 모두 "debugger;"삽입을 보여줍니다. 스크립트의 일부 줄에있는 문은 동적 로딩 스크립트에서 중단 점을 발생시킬 수 있습니다. 그러나 두 디버거 모두 중단 점에서 코드를 표시하지 않습니다. 따라서이를 수행하는 데는 쓸모가 없습니다.

감사,


이에 대한 해결책을 찾았습니까? 나는 여기에 같은 문제가 있습니다.
adamJLev 2010

별도의 파일을 동적으로로드 해보십시오. 즉, 구현에 대해서는 여기를 참조하십시오. queryj.com/2011/03/11/a-lightweight-script-loader- 디버거가 훨씬 더 쉽게 처리합니다.
James Westgate

@infinity, 체크 아웃 내 솔루션
분자 남자

3
2014 년에도 여전히 이미지가 죽었습니다. 다시 올릴 수 있습니까?
TheGeekZn

비슷한 질문이 있지만 이미지가 깨져서 알 수 없습니다. 업데이트 할 수 있습니까?
Eric

답변:


118

동일한 용도로 크롬을 사용할 수도 있습니다. Chrome에는 파서 속성을 지정하고 동적 JS 조각을 파일로 표시하여 찾아보고 중단 점을 설정할 수있는 기능이 있습니다.

설정해야하는 속성은 다음과 같습니다.

//# sourceURL=dynamicScript.js

여기서 dynamicScript.js는 스크립트 파일 브라우저에 표시되어야하는 파일의 이름입니다.

여기에 더 많은 정보

Paul Irish는 Tooling & The Webapp Development Stack 에 대한 훌륭한 강연에서도 이에 대해 간략하게 설명합니다.


5
누군가 MVC3 / Razor에 문제가있는 경우 @ 기호를 이스케이프해야합니다. // @@ sourceURL = dynamicscript.js 그리고 그냥 fyi, 위의 내용은 방화범에서도 작동합니다.
parsh apr

1
이 기능은 동적 인라인 자바 스크립트에도 사용할 수 있습니다. 그러나 해당 스크립트에 일부 예외가있는 경우 소스 목록에 표시되지 않습니다.
로마 Snitko

4
새 구문은 "// # sourceURL = dynamicScript.js"입니다. @에서 #로 변경
Cekk

3
- 소스의 크롬 개발자 도구 섹션에 업데이트 된 링크입니다 매핑 developer.chrome.com/devtools/docs/...
chrismarx

3
저에게는 js 파일이 "(도메인 없음)"이라는 그룹 내의 소스 목록에 표시되었습니다. 처음에는 놓 쳤기 때문에 언급 할 가치가 있습니다!
JMac

21

"디버거"를 추가해보십시오. 동적으로 추가하는 자바 스크립트의 문. 이로 인해 중단 점 설정에 관계없이 해당 줄에서 중지됩니다.


내가 찾을 수있는 것은 code.google.com/p/fbug/issues/detail?id=1259 입니다. 그건 그렇고, 스크립트를 동적으로로드하기 위해 (하지만 src 속성을 사용하여) 헤드에 추가하는 스크립트 태그를 사용하며,이 방법으로 추가 된 코드는 초기 페이지와 함께로드되지 않더라도 모든 브라우저에서 디버그 할 수 있습니다.
Joeri Sebrechts

스크립트 태그를 추가하는 데 사용하는 정확한 코드는 무엇입니까? OP와 동일한 문제가 발생하여 Chrome에서 동적으로로드 된 JS 파일을 디버깅 할 수 없습니다. 고마워!
adamJLev 2010

var loaderNode = document.createElement ( "script"); loaderNode.setAttribute ( "type", "text / javascript"); loaderNode.setAttribute ( "src", url); document.getElementsByTagName ( "head") [0] .appendChild (loaderNode);
Joeri Sebrechts

18

예, Google 크롬을 사용하여 동적으로로드 된 JavaScript를 디버깅 할 수 있습니다.

debugger;동적으로로드 된 JS 파일에 대해 추가 또는 기타 속성 을 추가 할 필요가 없습니다 . 디버그하려면 아래 단계를 따르십시오.

방법 1 :

제 기술 책임자는 동적으로로드 된 Javascript 메서드를 디버그하는 매우 쉬운 방법을 보여주었습니다.

  1. 크롬 콘솔을 열고 메소드 이름을 쓰고 엔터를 누르세요.
    제 경우 GetAdvancedSearchConditonRowNew
    에는 JS 메서드가로드 된 경우 메서드의 정의가 표시됩니다.

여기에 이미지 설명 입력


  1. 메서드의 정의를 클릭하면 디버깅을 위해 전체 JS 파일이 열립니다. :)

여기에 이미지 설명 입력


방법 2 :

예를 들어, ajax호출 을 사용하여 버튼을 클릭하면 JS 파일을로드합니다 .

  1. networkGoogle 크롬 개발 도구에서 탭 열기
  2. 일부 자바 스크립트 파일을로드하고 일부 자바 스크립트 함수를 호출하는 컨트롤 (예 : 버튼)을 클릭합니다.
  3. 네트워크 탭을 관찰하고 JS 기능을 찾으십시오 (내 경우에는 RetrieveAllTags?_=1451974716935)
  4. 그 위로 마우스를 가져 initiater가면 동적으로로드 된 JS 파일 (접두사 포함 VM*)을 찾을 수 있습니다 .

크롬 -1에서 동적 로딩 JavaScript 디버그


  1. 해당 VM*파일을 클릭 하여 엽니 다.
  2. 해당 파일에서 원하는 곳에 디버거를 넣으십시오.

크롬 -1에서 동적 로딩 JavaScript 디버그



이것을 너무 둔하게 만드는 Google에 수치심. 1 / 부끄러움 = 그것을 꺼내는 것에 대한 명성 (부끄러움의 역) :)
toddmo

16

나는 그 목적으로 Google 크롬을 사용하고 있습니다.

스크립트 탭의 크롬에서 '모든 예외에서 일시 중지'를 활성화 할 수 있습니다.

여기에 이미지 설명 입력

그런 다음 코드 라인 어딘가에 넣으십시오 try{throw ''} catch(e){}. Chrome은이 줄에 도달하면 실행을 중지합니다.

편집 : 수정 된 이미지이므로 내가 말하는 것이 더 명확해질 것입니다.


Google Chrome에서 개발하려면 jQuery 팀에보고 한 것처럼 jQuery 또는 다른 로딩 스크립트가 DOM에 스크립트를 추가 할 때 현재 동적 스크립트의 이름을 나타내는 텍스트를 삽입해야합니다. 하지만 작업 할 시간이 없습니다. bugs.jquery.com/ticket/8292
Soul_Master

@Soul_Master,하지만 내 방법을 사용하면 텍스트를 삽입 할 필요가 없습니다. 동적 스크립트 줄에 삽입 try{throw ''} catch(e){}한 다음 '모든 예외에서 일시 중지'모드를 활성화하면 exeption이 발생하면 Chrome이 실행을 중지합니다. 여러 번 확인했습니다. 다른 이미지를로드했습니다. 내가 말하는 것이 더 분명합니다.
분자 남자

크롬에서는 "debugger;"문을 사용하여 디버거 패널이 열려있을 때 문에서 중단 할 수 있습니다. 디버거 패널이 닫혀 있으면 Chrome은이를 무시합니다.
dinesh ygv 2014 년

@dineshygv, 당신은 지금 할 수 있습니다. 하지만 3 년 전에는 할 수 없었습니다. debugger당시 동적으로 생성 된 스크립트에서는 작동하지 않습니다.
Molecular Man

10

평가 코드에 다음과 같은 "이름"을 지정해야 할 수도 있습니다.

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

그렇다면 debugger"업데이트 2" 의 접근 방식이 작동 할 것 같습니다.


예. 나는 그것을 참조. 나는 이미 오랫동안이 버그를 jQuery 팀에보고했다. bugs.jquery.com/ticket/8292
Soul_Master

1
경고! 설명 된 기술로 인해 IE7에서 오류가 발생하므로 //@ sourceURL=blah프로덕션 상태로 두지 마십시오 .
Jethro Larson

그것은 아마의 debugger문제, (확실히 JS 무시)하지 소스 주석의 원인 부분
카일 심슨

즉, 조건부 컴파일에 문제가 발생할 수 있습니다. 예 : javascriptkit.com/javatutors/conditionalcompile.shtml
이드로 라슨

5

UPDATE : 지원되지 않는 브라우저 (읽기 : IE)에서 오류 를 방지하기 위해 sourceUrl 구문이 변경되었습니다 (@이 #로 대체 됨 ). 세부


2

제공 한 코드와 다음과 같은 디버거 문으로 Chrome (12.0.742.112) 사용

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

나를 위해 작동합니다.

실행하기 전에 일부 JavaScript (모든 jQuery 선택기의 범위를 현재 부분> 뷰 div로 제한)를 수정해야합니다.

html 본문에 스크립트 요소를 만드는 대신 선택기 변경 사항을 부분보기의 이벤트에 바인딩하면 더 분명해질 수 있습니다 (옳지 않은 느낌).

이런 식으로 할 수 있습니다

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

이 코드는 HTML이 엉망이되지 않는 특정 요소에 마우스가있는 동안 수행되는 모든 jQuery 선택 작업에 ​​항상 제한 선택기를 추가합니다.

(여전히 해커처럼 보이지만 누군가가 더 나은 해결책을 가지고있을 수 있습니다)

건배


1

Firebug에서는 페이지가로드되고 스크립트가 삽입 된 후 해당 스크립트를 볼 수 있어야합니다. 그렇게 할 때 적절한 위치에 중단 점을 설정할 수 있으며 페이지를 새로 고칠 때 유지됩니다.


네가 옳아. 작동하지 않습니다. 나는 eval ()으로 시도했고 Firebug를 사용하면 중단 점을 설정할 수 있습니다. eval ()을 사용할 수없고 스크립트 태그를 설정해야하는 이유가 있습니까? 더 일반적으로이 동적 자바 스크립트를 서버에서 별도의 .js 파일로 제공 할 수없는 이유가 있습니까? 해결하려는 문제는 무엇입니까?
Moishe Lettvin 2009

실행하기 전에 일부 JavaScript (모든 jQuery 선택기의 범위를 현재 부분보기 div로 제한)를 수정해야합니다. 아니면 내 최근 질문을 해결할 아이디어가 있습니다. 자세한 내용은 최근 질문을 참조하십시오.
Soul_Master 2009

1

동적으로로드 된 Javascript는 WebKit 또는 FireBug 디버거가있는 브라우저에 의해 여전히 구문 분석되어야하므로 무슨 일이 있어도 디버거의 영향을받습니다. IE8의 개발자 도구도 마찬가지라고 생각합니다.

따라서 코드는 디버거의 대상이므로 오류가 발생하지 않으면 해당 파일이나 텍스트에 문제가 발생하지 않습니다.

다른 것은 script.text = "alert('Test!');";유효하지 않으므로 원하는 모든 브라우저에서 작동하지 않습니다.script.innerHTML = "alert('Test!');";

비록 innerHTML은 HTML이 아닌 HTML 태그 내부의 코드를 의미하지만 가장 많이 사용하는 사람들이 이것을 사용하므로 잘못 설명됩니다.

업데이트 2 용으로 편집 됨

Chrome을 사용하는 두 번째 업데이트에서이 작업을 수행했습니다.

go to about : blank 콘솔을 열고 지난

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

그러면 about : blank가 표시된 상태로 스크립트 탭이 중단되고 열립니다 (볼 수 없음).

그런 다음 오른쪽에 호출 스택 목록이 표시되고 두 번째 (익명 함수)를 클릭하면 표시됩니다.

따라서 파일에는 실행중인 코드 인 (익명 함수)가 있고 거기에 중단 점이 표시됩니다. 그래서 당신은 올바른 것을 알고 있습니다.


0

Google Chrome (또는 Safari ) 개발자 도구를 사용하여 JavaScript를 한 줄씩 실행할 수 있습니다.

개발자 도구 >스크립트 >디버그 할 스크립트를 >오른쪽에서 선택하거나 줄 번호 를 클릭하여 중단 점을 설정합니다.


0

한 가지 옵션을 사용하여 코드에 console.log ( '') 문을 추가하고 싶습니다. 이 문이 콘솔에 나타나면 줄 번호가 연결됩니다. 해당 번호를 클릭하여 소스의 위치로 이동하고 중단 점을 설정할 수 있습니다. 이 접근 방식의 단점은 페이지를 다시로드해도 중단 점이 유지되지 않으며 디버거를 추가하기 전에 코드를 실행해야한다는 것입니다.


0

현재 Google Chrome 브라우저 또는 기타 최신 브라우저의 경우 다음 이미지와 같은 개발자 도구를 사용하여 평가 된 코드를 쉽게 검색 할 수 있습니다.

  1. 일부 동적 로딩 파일을 시뮬레이션합니다.

여기에 이미지 설명 입력

  1. 보도 Ctrl 키 + 시프트 + F 에서 소스 탭 위의 함수를 검색합니다.

여기에 이미지 설명 입력

중단 점을 생성하고이를 테스트하는 함수를 실행합니다.

여기에 이미지 설명 입력

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.