5

Dies ist eine ziemlich komplizierte Frage, die mit dem, was derzeit verfügbar ist, einfach unmöglich sein kann, aber wenn es einen einfachen Weg dazu gäbe, wäre es sehr groß.Bruchfreie Haltepunkte (Trace-Punkte) in Javascript?

Ich debugge etwas JavaScript in Chrome, und weil es sehr ereignisgesteuert ist, bevorzuge ich Trace-Berichte über den Code (was aufgerufen wurde, usw.) anstelle von Haltepunkten. Also, wo auch immer ich einen Haltepunkt lasse, möchte ich den lokalen Funktionsnamen und die Argumente sehen.

Der nächstgelegene ich bekommen kann, ist ein bedingter Haltepunkt in fallen, wie folgt aus:

Sample trace

Es gibt zwei große Probleme mit diesem Ansatz:

  1. Einfügen dieser in jedem Haltepunkt ist zu schwerfällig. Menschen würden es mit größerer Wahrscheinlichkeit verwenden, wenn es für jeden Haltepunkt als Standardaktion gewählt werden könnte.
  2. In Google Chrome werden die Protokollaufrufe zweimal ausgelöst.

Irgendwelche Ideen auf einen Weg, um eines dieser Probleme zu überwinden? Ich denke, es könnte in IE with VS möglich sein, aber die Benutzeroberfläche dort scheint gleichermaßen umständlich.

+1

Wenn Sie dies nur zum Verfolgen von DOM-Ereignissen benötigen, können Sie versuchen, die Methode ['monitorEvents()'] (http://www.briangrinstead.com/blog/chrome-developer-tools-monitorevents) der Konsole zu verwenden. – kpozin

+0

Ich habe tatsächlich monitorEvents an einem Punkt versucht, indem ich Pseudo-Events für Nicht-DOM-Objekte geworfen habe. Sie können ziemlich weit kommen, indem Sie Fehler überwachen, aber es hat nicht die feinkörnige Filterung, die ich brauchte. – Chris

Antwort

0

Ich konnte nichts finden, um dies zu tun, also ich wrote my own.

Jetzt, anstatt console.log Aufrufe ständig einzufügen und zu entfernen, lasse ich die Anmeldung und sehe es nur wenn nötig.

Warnung: Der unten angegebene Code ist nicht getestet.

var debug = TraceJS.GetLogger("debug", "mousemove"); 
$('div').mousemove(function(evt) { 
    debug(this.id, evt); 
}); 

Jedesmal, wenn die Maus über eine DIV bewegt wird, erzeugt es ein LogEvent getaggt [ „mousemove-“, {id dieses Elements}]

Der Spaßteil selektiv an in der Lage ist, beobachten Veranstaltungen. Wenn Sie nur wollen mousemove- Ereignisse für das Element #a sehen, die in der Konsole den folgenden Aufruf:

TraceJS('a'); 

Wenn ich alle mousemove- Ereignisse sehen möchten, können Sie anrufen:

TraceJS('mousemove'); 

Nur Ereignisse, die passen Sie Ihren Filter werden angezeigt. Wenn Sie TraceJS aufrufen (kein Argument), werden die Protokollaufrufe nicht mehr angezeigt.

1

Die beste Option, die ich gefunden habe, war, den Javascript-Code im Chrome-Javascript-Panel zu bearbeiten und eine console.log hinzuzufügen.

Es würde nur funktionieren, nachdem die Seite geladen wurde (außer Sie können es sich leisten, nach der Aktualisierung einen Unterbrechungspunkt zu setzen und dann die Protokollierungszeilen hinzuzufügen) und (schlimmer) Sie müssten es jedes Mal tun, wenn Sie die neu laden Seite.

Viel Glück bei Ihrer Suche!

1

IE11 hat jetzt "tracepoints", unabhängig von Visual Studio. Sie tun genau das, was Sie vor drei Jahren gefragt haben. Ich sehe sie noch nicht in Chrome oder anderen Browsern, aber hoffentlich werden sie sich bald durchsetzen!

+0

Cool! https://msdn.microsoft.com/en-us/library/ie/dn255007(v=vs.85).aspx Ich mag eigentlich die Bibliothek, die ich jetzt eingerichtet habe, da ich Trace-Punkte in der ganzen Zeit hinterlassen und sie drehen kann nach Bedarf ein- und ausschalten. Schätze, das ist was passiert. – Chris