問題描述
我最近改變了我的編碼風格，使用更復雜的項目來按需"加載頁面(及其嵌入式腳本).但是，很難像加載這些腳本時那樣調試它們:
I have changed my coding style with more complex projects to loading pages (And their embedded scripts) "on demand" recently. However, it is difficult to debug those scripts as when they are loaded like:
jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ });
或
$('#some-container').load('/myOtherPage');
這些腳本運行完美，但如果我在調試，如何在這些動態加載的頁面和腳本中設置斷點?
These scripts run perfectly, but if I'm debugging, how can I set breakpoints in these dynamically loaded pages and scripts?
推薦答案
更新
接受的表單現在帶有 #(井號)而不是 @(符號)
The accepted form is now with a # (hashtag) rather than @ (at symbol)
語法已更改以避免與 IE 條件編譯語句沖突和其他一些問題(感謝 Oleksandr Pshenychnyy 和 Varunkumar Nagarajan 指出這一點)
The syntax was changed to to avoid conflicts with IE conditional compilation statements and some other issues (thanks to Oleksandr Pshenychnyy and Varunkumar Nagarajan for pointing this out)
//#sourceURL=/path/to/file
這實際上可以是任何可以幫助您識別代碼塊的字符串.
This can really be any string that helps you identify the block of code.
JMac 的另一個優點:
An additional good point from JMac:
對我來說，js 文件顯示在源列表中組稱為(無域)".可能值得一提，因為我錯過了一開始！
For me, the js file was being displayed in the sources list within a group called "(no domain)". Might be worth mentioning as I missed it at first!
原創
在遇到 這篇文章.它確實非常適合我的開發環境(我寫這篇文章時是 Chrome 22).
I struggled with the above for about a week before running across this article. It really does work perfectly for my development environment (Chrome 22 as I write this).
Firebug 還支持開發人員命名的 eval() 緩沖區:只需在 eval(expression) 末尾添加一行，例如:
Firebug also supports developer-named eval() buffers: just add a line to the end of your eval(expression) like:
//@ sourceURL=foo.js
例如，給定這個簡單的 html 文檔:
For example, given this simple html document:
<!DOCTYPE html>
<html>
<body>
<p>My page's content</p>
<div id="counter"></div>
<script type="text/javascript">
//if this page is loaded into the DOM via ajax
//the following code can't be debugged
//(or even browsed in dev-tools)
for(i=0;i<10;i+=1) {
document.getElementById('counter').innerText = i;
}
//but if I add the line below
//it will "magically" show up in Dev Tools (or Firebug)
//@ sourceURL=/path/to/my/ajaxed/page
</script>
<body>
</html>
我還沒有發現的東西:
- 是否必須為內聯腳本的每個腳本塊執行此操作?
- 它必須是腳本塊的最后一行嗎?(這篇文章建議的答案是是)
這篇關于如何調試通過 AJAX(特別是 jQuery)加載的 Javascript的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！