Ustaw punkty przerwania i debugowanie eval'd JavaScript

Question

I ^* Korzystam z JS po stronie klienta do parsowania plików XML i generowania złożonego kodu JS do eval w wyniku. (Generowanie funkcji wielokrotnego użytku uruchamianych przez środowisko wykonawcze). Muszę jednak debugować generowany kod i chcę używać wbudowanych w Chrome punktów przerwania, kroków, podglądu okien itp.

Czy istnieje łatwiejszy sposób na zrobienie tego niż:

• Zrzuć wygenerowany ciąg JS do konsoli i/lub okna.
• Skopiuj skrypt JavaScript
• (opcjonalnie) Uruchom narzędzie JS za pomocą symulatora, takiego jak JSBeautifier.
• Wklej JS do pliku załadowanego przez <script src="..."> na innej stronie internetowej.

^{* faktycznie, mój przyjaciel robił to, nie ja}

Answer 1

Zamiast eval, a zamiast ręcznego kopiowania/wklejania w osobnym pliku, można dynamicznie załadować JS bezpośrednio na stronie, która go wygenerowała, za pomocą elementu data uri na dynamicznie tworzonym elemencie <script>. Dzięki takiemu podejściu narzędzia deweloperskie Chrome (i Firebug) pozwalają wybrać URI danych jako skrypt, włączyć ładny druk, ustawić punkty przerwania i gotowe.

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); 
}