如何調試外部評估和演示腳本

Question

具體例子：從How Big is Your Haystack?

的haystack.js腳本我搜索的答案，一切似乎指向使用//# sourceURL=name.js評論。然而，如何完成這個機制避開了我（也許我只是密集）。

每個人總是指向Debugging JavaScript，但演示已損壞（同源錯誤）。其他常見示例不能提供有關使用諸如此類的外部腳本的信息。

我試過使用Live Edit來插入sourceURL註釋，但到目前爲止，eval腳本從來沒有出現在Sources選項卡中。

有人請走過我完成這項任務的步驟？

UPDATE：這已被證明是一個有趣和煩人的努力。這種特殊的網站讓任務不必要具有以下併發症困難：

• 的haystack.js腳本包括document.write()語句（其中加載使用其他腳本）。腳本重新加載之前必須刪除這些內容，否則DOM將被清除。

• 作者在代碼上使用了一種奇怪的反向密碼形式的模糊處理。因此，在刪除混淆之後，但在評估發生之前，必須修改代碼（包括sourceURL）。

我克服了部分解決方案。 jQuery的加載到頁面後，我運行此腳本：

$.ajax({ 
    url: '/js/haystack.js', 
    dataType: 'text' 
}).done(function(data) { 
    // Remove document.write() statements and append sourceURL comment after obfuscation is removed 
    var refactored = data.replace(/return d/, "return d.replace(/document\.write[^;]+;/g, '') + '\\n//# sourceURL=haystack.js\\n';"); 
    $('head').append('<script type="text/javascript">' + refactored + '</script>'); 
}); 

現在haystack.js出現在（無域）來源標籤的樹。斷點可以設置，但有一些奇怪的行爲。似乎DOM事件處理程序仍然綁定到原始腳本（重新加載的腳本處理程序中的斷點永遠不會到達）。執行pageInit（）再次將處理程序重新綁定到修改後的腳本，但頁面更新仍然不穩定。不知道爲什麼行爲依然存在。我可以遍歷代碼，並且所有內容都正常顯示，但頁面更新似乎落後於代碼。代碼違反幾乎所有JavaScript最佳實踐的事實無疑是一個因素。

Answer 1

這個問題真的很吸引我。我希望我的回答有幫助。我開始與Set breakpoints and debug eval'd JavaScript再擴展有點

這比使用eval，您可以插入腳本元素插入文檔更好plunker

。

var js = "console.log('this is line 1');" 
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.head.appendChild(e); 
} 

然後它會在源選項卡中顯示：

使用eval還通過增加線//@ sourceURL=dynamicScript.js末工作

看到這個plunker

var js = "console.log('this is line 1');\n" + 
"//@ sourceURL=dynamicScript.js;" 
addCode(js); // Right now! Debuggable! 

// Dynamically evaluate JavaScript-as-string in the browser 
function addCode(js){ 
    eval(js); 
} 

請注意，腳本列在（無域）源文件夾下。

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.