設置斷點並調試eval'd JavaScript

Question

I ^*正在使用客戶端JS來解析XML文件並生成複雜的JS代碼，結果爲eval。 （生成由運行時啓動的可重用函數）。但是，我需要調試正在生成的代碼，並且希望使用Chrome的內置斷點，步進，觀察窗等。

Is there一個更簡單的方法來做到這一點比：

• 轉儲生成的JS字符串到控制檯和/或窗口。
• 複製JavaScript
• （可選）通過一個美化工具（如JSBeautifier）運行JS。
• 將JS粘貼到在另一個網頁中通過<script src="...">加載的文件中。

^{* 實際上，我的一個朋友在做這個，不是我}

Answer 1

而不是使用eval，而不是手動複製/粘貼到一個單獨的文件，你可以動態加載JS直接在通過在動態創建的<script>元素上使用data uri生成它的頁面中。通過這種方法，Chrome的開發工具（和Firebug）允許您選擇data-URI作爲腳本，打開漂亮打印，設置斷點，然後離開。

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