중단 점 설정 및 디버그 eval'd JavaScript

Question

I ^* 클라이언트 측 JS를 사용하여 XML 파일을 구문 분석하고 복잡한 JS 코드를 eval으로 생성합니다. (런타임에서 실행 가능한 재사용 가능한 함수 생성) 그러나 생성되는 코드를 디버깅해야하며 Chrome의 기본 제공 중단 점, 스테핑, 시계 창 등을 사용하려고합니다.

이렇게하는 쉬운 방법은 다음과 같습니다.

• 생성 된 JS 문자열을 콘솔 및/또는 창에 덤프합니다.
• (선택 사항) JSBeautifier과 같은 시험기를 통해 JS를 실행합니다.
• 다른 웹 페이지에 <script src="...">을 통해로드 된 파일에 JS를 붙여 넣습니다. 실제로

^{* 는, 내 친구는 내가 아니라} 대신 eval를 사용

Answer 1

, 수동으로 별도의 파일에/붙여 넣기를 복사하는 대신, 당신은 동적으로로드 할 수 JS,이 일을했다 동적으로 생성 된 <script> 요소에서 data uri을 사용하여 페이지를 생성 한 페이지로 직접 이동합니다. 이 방법을 사용하면 Chrome의 개발자 도구 (및 방화) (Firebug))를 사용하여 data-URI를 스크립트로 선택하고 Pretty Print를 켜고 중단 점을 설정하고 다른 곳으로 이동할 수 있습니다.

var js = createMyJSCodeString(); 
addCode(js); // Right now! Debuggable! 

// Dynamically evaluate JavaScript-as-string in the browser 
function addCode(js){ 
    var e = document.createElement('script'); 
    e.type = 'text/javascript'; 
    e.src = 'data:text/javascript;charset=utf-8,'+escape(js); 
    document.body.appendChild(e); 
}