WebKit, FireBug 또는 IE8 Developer Tool과 같은 디버거에서 JavaScript를 동적으로 로드하는 것을 디버깅할 수 있습니까?
최근 질문에서 일부 뷰를 동적으로 로드하기 위한 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 Developer Toolbar, Firebug 및 Google Chrome)는 동적 스크립트에서 중단점을 설정할 수 없습니다.디버깅 가능한 스크립트는 페이지 로드 후 처음 로드해야 하기 때문입니다.
동적 스크립트 콘텐츠 또는 동적 파일을 사용할 때 디버깅에 대한 아이디어가 있습니까?
업데이트 1 - 테스트용 소스 코드 추가
다음 xhtml 파일을 사용하여 someVariable 값을 디버깅할 수 있습니다.
<!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에서 테스트합니다.결과는 아래와 같이 표시됩니다.
페이지 로드 후에 추가된 "dynamic Loading Script"를 보세요.
그러나 FireBug의 스크립트 탭에는 없습니다.
업데이트 2 - 동적 로드 스크립트에서 디버깅 중단점 생성
위의 두 이미지 모두 스크립트의 일부 행에 "debugger;" 문을 삽입하면 동적 로드 스크립트의 중단점이 발생할 수 있습니다.단, 양쪽 디버거에 브레이크 포인트에 코드가 표시되지 않습니다.그러므로 이것은 쓸모가 없다.
감사해요.
크롬도 같은 용도로 사용할 수 있습니다.Chrome에는 파서 속성을 지정하고 동적 JS 부분을 파일로 표시하여 탐색 및 중단점을 설정할 수 있는 기능이 있습니다.
설정할 필요가 있는 어트리뷰트는
//# sourceURL=dynamicScript.js
여기서 dynamicScript.js는 스크립트파일 브라우저에 표시되는 파일의 이름입니다.
자세한 내용은 이쪽
Paul Irish는 Tooling & The Webapp Development Stack에 대한 훌륭한 강연에서도 이에 대해 간략히 언급하고 있습니다.
동적으로 추가할 Javascript에 "debugger;" 문을 추가해 보십시오.이것에 의해, 브레이크 포인트 설정에 관계없이, 그 회선으로 정지합니다.
네, Google Chrome을 사용하여 동적으로 로드된 JavaScript를 디버깅할 수 있습니다!
추가 debugger;JS에 대해서입니다.하다
방법 1:
내 테크니컬 리더는 방금 동적으로 로드된 Javascript 메서드를 디버깅하는 매우 쉬운 방법을 보여 주었다.
- 크롬을 입력합니다.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.GetAdvancedSearchConditonRowNew
JS 메서드가 로드된 경우 메서드의 정의가 표시됩니다.
- 메서드의 정의를 클릭하면 디버깅을 위해 전체 JS 파일이 열립니다. : ).
방법 2:.
들어 JS파일을 불러오는 때 있습니다.ajaxdiscl.discl.discl을 클릭합니다.
- .
networkchrome 개발 탭Google Chrome 탭탭탭탭 탭탭탭 。 - javascript 파일을 로드하고 javascript 함수를 호출하는 컨트롤(예: 버튼)을 클릭합니다.
- 하고, 그기능을 이는 JS입니다).
RetrieveAllTags?_=1451974716935) - 위에 를 올려놓으세요.
initiater로딩된 파일( 접두사 JS 이 있습니다.VM*를 참조해 주세요.
- '아예'를 클릭해 주세요.
VM*파일을 엽니다. - 해당 파일에 원하는 위치에 디버거를 넣습니다.d
구글 크롬을 사용하고 있습니다.
chrome at scripts 탭에서 '모든 예외 일시 중지'를 활성화할 수 있습니다.
.try{throw ''} catch(e){}크롬은 이 라인에 도달하면 실행을 중지합니다.
편집: 이미지를 수정하여 더 선명하게 표현합니다.
eval'd 코드에는 다음과 같은 "이름"을 붙여야 합니다.
http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/
'가 될 것 같아요.debugger그럼 '업데이트 2'의 접근법이 작동해야 합니다.
업데이트: 지원되지 않는 브라우저(읽기: IE)에서 오류를 방지하기 위해 sourceUrl 구문이 변경되었습니다(@는 #로 대체됨).상세
입력한 코드와 다음과 같은 디버거 문장으로 Chrome(12.0.742.112) 사용
script.text = "debugger;var someVariable = 0;\n" +
"someVariable = window.outerWidth;\n" +
"alert(someVariable);";
잘 먹히네요.
실행하기 전에 JavaScript(모든 jQuery 셀렉터의 스코프를 current partial > view 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 선택 작업에 항상 제한 셀렉터를 추가합니다.
(아직도 해커처럼 느껴져 더 나은 해결책을 가진 사람이 있을 수 있음)
건배.
Firebug에서는 페이지가 로드되고 스크립트가 삽입된 후에 해당 스크립트를 볼 수 있습니다.이 경우 적절한 위치에 중단점을 설정할 수 있으며, 페이지를 새로 고칠 때 중단점이 유지됩니다.
동적으로 로드된 Javascript는 여전히 브라우저에 의해 해석되어야 합니다.여기에는 WebKit 또는 FireBug 디버거가 있기 때문에 어떤 경우에도 디버거의 대상이 됩니다.IE8의 개발자 툴도 마찬가지라고 생각합니다.
따라서 코드는 디버거의 대상이 되기 때문에 오류가 발생하지 않는 한 문제가 발생한 파일 또는 텍스트에는 포함되지 않습니다.
는 ★★★★★★★★★★★★★★★★★★★.script.text = "alert('Test!');";하지 않기 하지 않습니다.한 것은 「」입니다.script.innerHTML = "alert('Test!');";
비록 그 내면이긴 하지만HTML은 HTML 태그 안에 있는 코드가 아니라 HTML 태그 안에 있는 코드를 의미하기 때문에 가장 많이 사용하는 사람들이 이를 위해 사용하므로 잘못 설명됩니다.
업데이트 2 편집
그리고 Chrome을 사용한 두 번째 업데이트에서는 이렇게 했습니다.
이동처: 콘솔을 위쪽으로 빈칸으로 엽니다.
var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";
document.getElementsByTagName('head')[0].appendChild(script);
그러면 스크립트 탭이 깨지고 약: 공백으로 표시됩니다(표시할 내용이 없습니다).
다음으로 우측에 콜스택목록을 표시하고 두 번째(익명함수)를 클릭하면 표시됩니다.
따라서 파일에는 실행 중인 코드인 (익명의 함수)가 있으며, 그 안에 중단점이 표시됩니다.그러니 넌 제대로 된 사람을 알거야
Google Chrome(또는 Safari) 개발자 도구를 사용하여 JavaScript를 한 줄씩 실행할 수 있습니다.
도구 발발 developer developer developer developer developer> " " ">디버깅할 합니다.>오른쪽에 있는 기호를 일시 중지하거나 줄 번호를 클릭하여 중단점을 설정합니다.
코드에 console.log("") 문을 추가하는 옵션 중 하나입니다.콘솔에 이 문이 뜨면 회선번호가 관련지어집니다.이 숫자를 클릭하면 원본 위치로 이동하여 중단점을 설정할 수 있습니다.이 접근법의 단점은 페이지 새로고침 후에도 중단점이 유지되지 않고 디버거를 추가하기 전에 코드를 통과해야 한다는 것입니다.
언급URL : https://stackoverflow.com/questions/1705952/is-possible-to-debug-dynamic-loading-javascript-by-some-debugger-like-webkit-fi
'source' 카테고리의 다른 글
| json 파일을 mongo로 Import하는 올바른 방법 (0) | 2023.03.22 |
|---|---|
| 클래스 이름을 JSON Jackson 일련화의 루트 키로 사용 (0) | 2023.03.22 |
| create-react-app을 TypeScript와 함께 사용할 수 있습니다. (0) | 2023.03.22 |
| Angularjs 필터가 null이 아닙니다. (0) | 2023.03.22 |
| Jackson을 사용하여 오버로드된 메서드를 사용하여 JSON을 개체로 역직렬화 (0) | 2023.03.22 |