JavaScript/Dojo模塊模式 - 如何調試？

我正在使用Dojo並使用Mastering Dojo中描述的「模塊模式」。就我所見，這種模式是一種廣泛使用的JavaScript模式。我的問題是：我們如何調試我們的模塊？JavaScript/Dojo模塊模式 - 如何調試？

到目前爲止，我還沒有能夠說服Firebug向我展示我的模塊的來源。 Firebug似乎只顯示用於執行工廠方法的dojo eval語句。因此我無法通過我的模塊源代碼。我已經嘗試在模塊代碼中放置「調試器」語句，並且Firebug似乎正常停止，但不顯示源代碼。

以下構建示例代碼。這只是一個足夠複雜的例子，使調試的必要性合理，它並不是有用的代碼。

頁

<!-- 
    Experiments with Debugging 
--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <title>console me</title> 

    <style type="text/css"> 
     @import "../dojoroot/dojo/resources/dojo.css"; 
     @import "../dojoroot/dijit/themes/tundra/tundra.css"; 
     @import "edf.css"; 
    </style>  

    <script type="text/javascript" src="../dojoroot/dojo/dojo.js"> 
    </script> 

    <script type="text/javascript" > 
     dojo.registerModulePath("mytest", "../../mytest"); 

     dojo.require("mytest.example"); 

     dojo.addOnLoad(function(){ 
     mytest.example.greet();      
     }); 
    </script> 

    </head> 
    <body class="tundra"> 
    <div id="bulletin"> 
     <p>Just Testing</p> 
    </div> 
    </body> 
</html> 
<!-- END: snip1 -->

的Java腳本，我想調試

dojo.provide("mytest.example"); 
dojo.require("dijit.layout.ContentPane"); 

/** 
* define module 
*/ 
(function(){ 
     //define the main program functions... 
     var example= mytest.example; 
     example.greet= function(args) { 

      var bulletin = dojo.byId("bulletin"); 

      console.log("bulletin:" + bulletin); 

      if (bulletin) { 
       var content = new dijit.layout.ContentPane({ 
        id: "dummy", 
        region: "center" 
        }); 
       content.setContent('Greetings!'); 

       dojo._destroyElement(bulletin); 
       dojo.place(content.domNode, dojo.body(), "first"); 
       console.log("greeting done"); 
      } else { 
       console.error("no bulletin board"); 
      }   
     } 
})();

來源

2010-04-13 djna

（回答這個自己，因爲它似乎是一個常見的問題，其解決方案是不爲人所熟知。）

看來，一個可以在Firebug調試很好EVAL-ED代碼提供了道場確實有點合作。訣竅是配置道場使用debugAtAllCosts

<script type="text/javascript" src="/dojoroot/dojo/dojo.js" 
     djConfig="parseOnLoad: true, debugAtAllCosts: true"></script>

，使這種調試這debugging，其還指出，在生產性能方面的原因，不推薦此設置，建議使用服務器的方法下的道場校園描述以控制是否啓用此類調試。

來源

2010-04-13 15:31:01 djna

debugAtAllCosts在FF和WebKit上通常不再需要，因爲我的回答中提到的原因 – peller 2010-04-13 17:19:47

我只能說沒有這裏顯示的djconfigs，調試器顯示「eval」行而不是eval-ed代碼，步進是沒有用。我用djconfig顯示完整的源代碼是可見的，我可以很好地進行分析。 – djna 2010-04-14 05:36:46

在Chrome中，我發現我能夠調試我的模塊的源代碼，但不能在Firebug（1.8）中使用，所以這個答案相當省時，謝謝。 – mydoghasworms 2011-10-19 07:50:11

模式基本上是XHR + EVAL ......說實在的，這就是問題...火狐EVAL特別是沒有辦法跟蹤eval中的代碼返回到其原始源代碼，而是指向eval緩衝區中的eval call site, plus whatever line offset there is。 Firebug已經實現a clever scheme來解決這個問題，並添加了一個可選的提示，像Dojo這樣的加載器可以使用它將原始文件路徑嵌入到註釋中。 Webkit現在也是supports這個方案。這不是完美的，但debugger;和其他斷點應該讓你進入正確的緩衝區。

我不知道爲什麼這些都不會爲你工作。你使用的是哪個版本的Firebug？

來源

2010-04-13 15:07:48 peller

使用Firebug 1.5.3 - 我想我已經找到了一個答案：debugAtAllCosts，稍後會發布。 – djna 2010-04-13 15:23:57

不適用於Firebug 1.8，儘管使用Chrome。這裏接受的答案爲我工作。 – mydoghasworms 2011-10-19 07:52:15

djna的debugAtAllCosts解決方案適用於我，原因如下：http://dojotdg.zaffra.com/tag/dojorequire/。

但是請注意，使用debugAtAllCosts會導致dojo.require變爲異步，因爲它使用腳本插入而不是xhr + eval。這可能會導致希望dojo.require的代碼出現問題，這些問題是同步的，而不是使用require本身引入的（如http://kennethfranqueiro.com/2010/08/dojo-required-reading/所述）。在我的情況下，它是測試我已經由單元測試框架運行的代碼。所以下面的失敗說EntityInfo沒有定義

var e1 = new EntityInfo();

，直到我把它改成

dojo.addOnLoad(function() { 
    var e1 = new EntityInfo(); 
}

@peller，對我來說螢火1.6。1將帶我到右邊的eval塊，但不是正確的文件和行號（因爲它是一個評估字符串，而不是原始文件）..

來源

2011-01-10 20:50:57 studgeek

此外，如果您使用的是Firebug版本低於1.7a10驗證腳本下拉禁用（extensions：firebug.decompileEvals在about：config中）的「Decompile for eval（）源」。啓用時，我認爲這會導致Firebug用自己的反編譯版本覆蓋源文件，並且沿途也會丟失文件名。

@peller，這可能是爲什麼你的答案不適合我們。

它在默認情況下是禁用的，但我在某個時候打開它並沒有意識到它。

它也被完全刪除在1.7a10作爲螢火蟲問題http://code.google.com/p/fbug/issues/detail?id=4035的一部分。還有關於https://groups.google.com/d/topic/firebug/y2VR17IFHHI/discussion和https://groups.google.com/d/topic/dojo-interest/nWlZdJDlic8/discussion的相關討論。

來源

2011-02-08 13:52:34 studgeek

我會再添加一個替代方案，使用Chrome。調試evals非常好（似乎可以捕捉到Firebug沒有的東西）。請注意緩存JS文件的問題 - http://code.google.com/p/chromium/issues/detail?id=8742。

個人螢火蟲仍然是我的主要環境，但我現在也在使用Chrome瀏覽器時，事情變得棘手與evals得到第二個問題的看法。 Chrome昨天幫助我兩次，用Firebug跳過的dojo加載器的未定義的函數/變量問題）。

來源

2011-02-08 13:56:18 studgeek

這是我找到的解決方案，因爲無法通過讀取NG來遞歸到dojo.require模塊。

變化

<script src="dojoroot/dojo/dojo.js" type="text/javascript">

到

<script src="dojoroot/dojo/dojo.js.uncompressed.js" type="text/javascript">

此固定小於有用 undefineddojo._scopeArgs = [未定義];否則看到的錯誤。

來源

2011-07-21 15:46:48

JavaScript/Dojo模塊模式 - 如何調試？

回答

相關問題