2010-04-13 3 views
5

Ich arbeite mit Dojo und mit dem "Module Pattern" wie in Mastering Dojo beschrieben. Soweit ich sehen kann, ist dieses Muster ein allgemeines und weit verbreitetes JavaScript-Muster. Meine Frage ist: Wie debuggen wir unsere Module?JavaScript/Dojo Modul Pattern - wie zu debuggen?

Bisher konnte ich Firebug nicht überzeugen, mir die Quelle meines Moduls zu zeigen. Firebug scheint nur die Dojo-Eval-Anweisung anzuzeigen, die zur Ausführung der Factory-Methode verwendet wird. Daher kann ich meine Modulquelle nicht durchgehen. Ich habe versucht, "Debugger" -Anweisungen in meinen Modulcode zu setzen, und Firebug scheint korrekt anzuhalten, zeigt aber nicht die Quelle an.

Contrived Beispielcode unten. Dies ist nur ein Beispiel ausreichender Komplexität, um die Notwendigkeit des Debugging plausibel zu machen, es ist nicht als nützlicher Code gedacht.

Die Seite

<!-- 
    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 --> 

Das Java-Skript Ich mag würde

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

Antwort

3

(das selbst beantworten, weil es wie ein weit verbreitetes Problem, dessen Lösung scheint nicht bekannt.)

Es scheint, dass man gut debuggen eval-ed-Code in Firebug, dass Dojo vorgesehen tut ein wenig zusammen. Der Trick ist, Dojo so zu konfigurieren, Debugging mit debugAtAllCosts

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

auf Dojo Campus Dies wird beschrieben unter debugging, zu ermöglichen, die auch bemerkt, dass diese Einstellung nicht in der Produktion aus Performance-Gründen wird empfohlen, und schlägt vor, einen Ansatz-Server Side-Conditionality zu steuern, ob ein solches Debugging aktiviert ist.

+0

debugAtAllCosts sollte auf FF und WebKit aus Gründen, die in meiner Antwort – peller

+0

erwähnt werden, im Allgemeinen nicht mehr notwendig sein Alles was ich sagen kann ist, dass ohne die hier gezeigten djconfigs der Debugger die "Eval" -Zeile und nicht den Evaluierungscode anzeigt Nicht nützlich. Mit der djconfig zeige ich die volle Quelle ist sichtbar und ich kann es schön durchgehen. – djna

+0

In Chrome habe ich festgestellt, dass ich die Quelle meiner Module debuggen konnte, aber nicht in Firebug (1.8), deshalb war diese Antwort eine ziemliche Zeitersparnis, danke. – mydoghasworms

1

Das Muster debuggen Wesentlichen xhr ist + eval ... es ist wirklich die eval das ist das Problem ... Firefox Insbesondere ist es nicht möglich, Code von einem eval zurück zu seiner ursprünglichen Quelle zu verfolgen und stattdessen auf den eval call site, plus whatever line offset there is im eval-Puffer zu zeigen. Firebug hat a clever scheme implementiert, um dieses Problem zu umgehen, und einen optionalen Hinweis hinzugefügt, den Loader wie Dojo verwenden können, um den ursprünglichen Dateipfad in einem Kommentar einzubetten. Webkit jetzt supports dieses Schema auch. Es ist nicht perfekt, aber debugger; und andere Breakpoints sollten Sie in den richtigen Puffer bringen.

Ich bin mir nicht sicher, warum nichts davon für Sie arbeiten würde. Welche Version von Firebug verwenden Sie?

+0

Mit Firebug 1.5.3 - und ich denke, ich habe eine Antwort gefunden: debugAtAllCosts, wird das in einem Moment veröffentlichen. – djna

+0

Funktioniert bei mir nicht mit Firebug 1.8, obwohl ich in Chrome arbeite. Die angenommene Antwort hier arbeitete für mich. – mydoghasworms

0

djnas debugAtAllCosts Lösung funktioniert für mich, aus den Gründen, die unter http://dojotdg.zaffra.com/tag/dojorequire/ beschrieben sind.

Allerdings, beachten Sie, dass die Verwendung von debugAtAllCosts bewirkt, dass dojo.require asynchron wird, da es Skripteinfügungen statt xhr + eval verwendet. Dies kann zu Problemen mit Code führen, der erwartet, dass dojo.require synchron ist und nicht mit require selbst aufgerufen wird (wie unter http://kennethfranqueiro.com/2010/08/dojo-required-reading/ beschrieben). In meinem Fall war es der Testcode, den ich vom Komponententest-Framework ausgeführt hatte. So scheiterte die folgenden sagen, dass EntityInfo nicht

var e1 = new EntityInfo(); 

definiert wurde, bis ich es zu

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

@peller, Für mich Firebug 1.6.1 wird mich zum rechten eval Block aber nicht die richtige Datei und Zeilennummern (weil es eine Eval Zeichenfolge anstelle der ursprünglichen Datei) ..

1

Auch wenn Sie eine Version von Firebug weniger als 1.7a10 auch verwenden Vergewissern Sie sich, dass die Option "Decompile for eval() source" in der Dropdown-Liste "scripts" deaktiviert ist (extensions.firebug.decompileEvals in about: config). Wenn aktiviert, denke ich, dass dies dazu führt, dass Firebug die Quelle mit seiner eigenen dekompilierten Version überschreibt und irgendwie den Dateinamen auf dem Weg verliert.

@peller, Dies könnte der Grund sein, warum Ihre Antwort nicht für uns funktioniert hat.

Es ist standardmäßig deaktiviert, aber ich habe es an einem Punkt eingeschaltet und habe es nicht bemerkt.

Es wird auch vollständig in 1.7a10 als Teil der Firebug-Ausgabe http://code.google.com/p/fbug/issues/detail?id=4035 entfernt. Auch verwandte Diskussion bei https://groups.google.com/d/topic/firebug/y2VR17IFHHI/discussion und https://groups.google.com/d/topic/dojo-interest/nWlZdJDlic8/discussion.

0

Ich werde eine weitere Alternative hinzufügen, verwenden Sie Chrome. Es ist toll zum Debuggen von evals (scheint einige Dinge zu fangen, die Firebug nicht hat). Beachten Sie das Problem beim Zwischenspeichern von JS-Dateien - http://code.google.com/p/chromium/issues/detail?id=8742.

Persönlich Firebug ist immer noch meine Hauptumgebung, aber ich benutze jetzt auch Chrome, wenn die Dinge mit evals schwierig werden, um eine zweite Sicht auf das Problem zu bekommen. Chrome hat mir gestern zweimal geholfen mit undefinierten Funktions-/Variablenproblemen beim Dojo-Loader, den Firebug direkt übersprungen hat.

1

Hier ist eine Lösung, die ich für die Unfähigkeit gefunden habe, in dojo.require mudules aus dem Lesen der NGs zu rekrutieren.

ändern

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

zu

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

Dies behebt die weniger als hilfreich undefineddojo._scopeArgs = [undefined]; Fehler, den man sonst sieht.

Verwandte Themen