planetquake.eu

Ich bekomm beruflich grade recht viel mit Javascript (genauer gesagt jQuery) zu tun und hab das gefühl nicht besonders effektiv damit zu entwickeln
Und zwar code ich in der IDE, wechsel dann zum Browser, refresh die Seite und guck dann was das JS macht (und klick ggf. vorher noch irgendwo rum damit eventhandler etc aufgelöst werden).
Dazu nutz ich console.log() zum ausgeben von Variablen oder guck halt direkt im was sich ändert (kommt halt drauf an was ich grade mache).

Find ich persönlich nicht sonderlich komfortabel und bremst mich in der Entwicklung aus
Direkt im Browser zu entwickeln stell ich mir da irgendwie besser vor.
Allerdings funzen die ganzen jQuery Sachen (selectoren etc) im Firebug nicht. Also irgendwie auch nicht so das wahre :/

Wie entwickelt ihr? Habt ihr Tipps? Wie kann mans besser machen?

Ach so, falls wichtig:
IDE: PHPStorm
Browser: FF (vorzugsweise) bzw Chrome

IDE: Netbeans (hat mit die beste Javascript Unterstützung unter den IDE's)
Browser: Firefox mit Firebug.

Ich schreib den code in der IDE, öffne dann Firefox um es auszuprobieren,
setze gegebenenfalls Breakpoints mit Firebug und geh dann step für step durch.

Variablen kann man in Firebug leicht auslesen über 2 Wege:

1. Hover mit der Maus über der Variable.
2. Direkte Ausgabe einer Variable oder Teil einer Variable mittels Firebug Console.
Einfach Variablennamen oder Funktion dort eingeben zeigt das Ergebnis in voller länge an.

Bin mittlerweile auf "FireQuery" gestoßen. Damit gehen dann auch die jQuery Selektoren in der Console. Scheint zu taugen
Das mit den Breakpoints ist mir neu gewesen. Muss ich gleich mal testen. thx

wow, der thread könnte von mir kommen, genau die selbe problematik hab ich auch grad
Edit: IDE VS2010 mit irgendwelchen javascript plugins und Browser FF8

Wie setze ich denn die breakpoints und was ist das eigentlich?

Javascript wird Zeile für Zeile ausgeführt.
Wenn du einen Breakpoint an einer Zeile setzt, wird die Ausführung gestoppt wenn die Ausführung des Codes an diese Zeile gerät.
Du kannst dann variablen inspizieren und verändern, und die Ausführung entweder normal fortsetzen oder schritt für schritt weiter machen um zu sehen wie dein Code eigentlich ausgeführt wird.

So setzt man in firebug einen Breakpoint:
- Firebug öffnen
- Auf den Script Tab wechseln.
- Gegebenenfalls die Seite neu laden damit die Scripte zu sehen sind.
- Dort oben links die gewünschte Datei auswählen.
- Links in der Zeilen-nummer clicken um einen Breakpoint zu setzen oder entfernen.
- Oben rechts gibt es buttons zum refreshen, fortsetzen und stück für stück weiter zu gehen.
- Die letzten 3 buttons sind:
- .Step into .. in eine funktion hineingehen (wenn an der aktuellen zeile ein funktionsaufruf steht)
- .Step over .. über einen funktionsaufruf hinwegspringen (also drauf warten bis die funktion zurückkehrt und dann weitermachen)
- .Step out .. aus einem funktionsaufruf zurückkehren
- Mit der maus über einen variablennamen hovern zeigt den inhalt der variable.

Warum funktionieren die Jquery-Selektoren nicht in Firebug? Ich benutze die dort häufig.