JavaScript Wie debuggen normale Leute mittels VSCode eigentlich VanillaJS?

[Kokujou]

Moin nochmal

Man würde doch meinen dass VSCode eine einfache eingebaute Möglichkeit bietet JavaScript zu debuggen oder? Tja. Pustekuchen. Was ich rausgefunden hab sind folgende Schritte:

1. Installiere eine Debugger Extension, in meinem Fall für Firefox
2. Konfiguriere die launch.json (ich rede hier übrigens über "attach") - soweit so gut.
3. Gehe in die about:config und konfiguriere 4 Werte um - ernsthaft?
4. konfiguriere Firefox um sodass er mit bestimmten command line argumenten startet wie --start-debugging-server (?!?!?!)

Und nachdem ich all das gemacht habe funktioniert es nach wie vor nur im Bedarfsfall.
Also ... wenn ich C# debuggen will drücke ich auf den Knopf und das wars. also frage ich mich nachvollziehbarer weise... gibt es noch eine andere schnellere, einfachere und vor allem stabilere Möglichkeit?

Ich habe übrigens keinen Build Prozess, es sind einfach nur JavaScript files, kein typescript, kein build, nichts.

 

[Defender1st]

Keine Ahnung, was du da in about:config konfigurieren musst - aber ich mach einfach nur den Browser auf, starte die Website, drücke F12 pack meinen Breakpoint dahin wo ich ihn haben will und fang an.

Völlig egal welcher Browser. Die haben quasi alle eingebaute Debugtools.

 

[tollertyp]

@Defender1st: Den Punkt mit VS Code hast du gelesen?

 

[Defender1st]

Schon. Aber wenn es keinen build Prozess oder ähnliches braucht dann is vscode auch nur nen besserer Editor.

Und der eingebaute Debugger in den Browsern ist meiner Meinung nach sehr gut. Und es ist eben eine einfache Alternative wenn das konfigurieren für vscode zu kompliziert ist

 

[tollertyp]

Aber wenn es keinen build Prozess oder ähnliches braucht dann is vscode auch nur nen besserer Editor.

Und wenn es das alles braucht, ist VS Code auch nur ein besserer Editor. Der in C# aber auch problemlos debuggen kann mit entsprechenden Extensions.

Aber es ist doch naheliegend, dass man gerne dort debuggt, wo man den Code editiert.

Und mit Verlaub, das ist eine reine Relativierung von dem, was du oben geschrieben hast.
Deine erste Antwort hat doch überhaupt keinen Bezug zu VS Code, sonst hättest du ihn doch darauf hingewiesen.

Und es ist eben eine einfache Alternative wenn das konfigurieren für vscode zu kompliziert ist

Komisch, dass das nicht in der ersten Antwort steht...

 

[netzgestaltung]

ich benutz eigentlich nur einen text-editor (gedit) und debugge mittels logs oder browser(Firefox) Fehlermeldungen. es gibt(gab) extensions für sublime-text, also sicher auch für vsc oder war das direkt im browser die den browser nach datei-speichern automatisch reloaden.

 

[kim88]

JavaScript im Browser debuggen macht gerade bei komplexen JavaScript durchaus Sinn. Die Browser JavaScript Engine sind eben auch unterschiedlich. Daher Dinge die in Chrome funktionieren funktionen evtl in Safari oder Firefox nicht oder verhalten sich teilweise anders und umgekehrt.

Was bringt mit ein Debug im Code Editor der eine Chromium Engine hat, wenn das nachher in Firefox laufen soll?

 

[tollertyp]

kim88, inwiefern das dann heißt, dass man im Browser und nicht in VS Code debuggen muss, kann ich nicht rauslesen. Dein Einwand ist richtig: Man muss auf verschiedenen Browsern testen. Aber an der Stelle sollte es dann egal sein, ob man die Browser-Debug-Tools nutzt.
Im Gegenteil, deine Aussage legt sogar eher nahe in VS Code zu debuggen, wenn man die gleiche Stelle in verschiedenen Browsern anschauen will.

@Kokujou: Hast du mal andere Browser probiert, z.B. Edge, der ja unter Windows eh "dabei" ist?

Ergänzung (26. Oktober 2023)

Also hier ist es eigentlich beschrieben:
https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug

1. Installiere eine Debugger Extension, in meinem Fall für Firefox

Ich nehme an die da oben hast du genommen,

2. Konfiguriere die launch.json (ich rede hier übrigens über "attach") - soweit so gut.

Kannst du die mal zeigen?

3. Gehe in die about:config und konfiguriere 4 Werte um - ernsthaft?

Was ist das Problem?

4. konfiguriere Firefox um sodass er mit bestimmten command line argumenten startet wie --start-debugging-server (?!?!?!)

Du musst den halt einfach mit dem Befehl/Argument starten, ist das ein Problem?
Umkonfigurieren musst du da nichts.

Wie sieht denn dein Workflow genau aus, wenn du debuggen willst?
Kannst du beschreiben, wann es mal geht und wann nicht?

Kann es sein, dass dein Firefox der Browser ist, den du normal auch nutzt?

 

[Kokujou]

Schon. Aber wenn es keinen build Prozess oder ähnliches braucht dann is vscode auch nur nen besserer Editor.

Und der eingebaute Debugger in den Browsern ist meiner Meinung nach sehr gut. Und es ist eben eine einfache Alternative wenn das konfigurieren für vscode zu kompliziert ist

da magst du recht haben aber es ist schon echt penetrant dauernd den browser aufmachen zu müssen, dann zu dem file zu navigieren und dort den breakpoint zu setzen, du jonglierst hier quasi mit zwei browsern.
manchmal wenn ich zu genervt bin ist das auch meine Notfall-Lösung, aber ich bin trotzdem etwas enttäuscht dass offenbar die ach so tollen IDEs da keine bessere Möglichkeit haben.

ich benutz eigentlich nur einen text-editor (gedit) und debugge mittels logs oder browser(Firefox) Fehlermeldungen. es gibt(gab) extensions für sublime-text, also sicher auch für vsc oder war das direkt im browser die den browser nach datei-speichern automatisch reloaden.

ja... wenn ich zu genervt vom debugger bin, schreib ich auch haufenweise console logs. bei einfachen Problemen ganz okay, aber stell dir vor das problem ist komplexer und du pflasterst deinen code mit 100 console logs zu.

@Kokujou: Hast du mal andere Browser probiert, z.B. Edge, der ja unter Windows eh "dabei" ist?

so wie ich das verstanden hab ist es dasselbe. Da muss man auch irgendeinen Port beim Debugging Server öffnen und irgendeine Voodoo-Magie zum konfigurieren machen. und das finde ich doch sehr hacky, besonders wenn firefox dann mit der roten adressleiste so alarmierend aussieht, als wäre das was ich tue ein Verbrechen gegen die Menschheit

Kannst du die mal zeigen?

{
            "type": "firefox",
            "request": "attach",
            "name": "Debug using Firefox",
            "pathMappings": [
                {
                    "url": "https://myhostname/IISRoot/webcomponents
                    "path": "${workspaceFolder}"
                }
            ]
        }

es ist halt nicht so als wäre das alles nicht machbar, ein paar about:config werte ändern, aber firefox umzukonfigurieren sodass es standardmäßig mit command lines startet, die nicht nur die adressleiste rot färben sondern auch das launchen von weiteren instanzen verbietet ist schon etwas penetrant und vor allem fühlt sich das alles so hacky an.
wenn ich mit Visual Studio ein C# Programm oder eine Blazor anwendung debugge drücke ich auf den Knopf und das Problem ist gegessen, aber bei Javascript muss ich mich in einen Firefox server einklinken.

Manchmal funktioniert es dann aber in letzter Zeit erreicht er immer öfter meine Breakpoints nicht und scheint mich komplett zu ignorieren, obwohl ich die Konifguration nicht geändert hab.

 

[tollertyp]

es ist halt nicht so als wäre das alles nicht machbar, ein paar about:config werte ändern, aber firefox umzukonfigurieren sodass es standardmäßig mit command lines startet

Ich habe bereits gesagt, dass du Firefox nicht so umkonfigurieren musst. Wo steht das? In welcher Doku?
Wichtig ist halt, wenn du debuggen willst, dann musst das vorher machen. Irgendeinen Tod wirst du da halt sterben.

Wie soll VS Code denn debuggen, ohne dass es mit dem Firefox-Prozess irgendeine Kommunikation macht? Wenn du damit Probleme hast, wirst du nur die integrierten Dev-Tools nutzen können.

Manchmal funktioniert es dann aber in letzter Zeit erreicht er immer öfter meine Breakpoints nicht und scheint mich komplett zu ignorieren, obwohl ich die Konifguration nicht geändert hab.

Und du bist dir sicher, dass die Breakpoints durchlaufen wurden? Z.B. durch zusätzliche Konsolen-Log-Ausgaben?

 

[Kokujou]

Vielleicht ein anderer Ansatz... Technisch ist es ja so, debuggen funktioniert indem man mit dem Browser kommuniziert, der Browser macht das Debugging und leitet es an unser tool weiter, darum muss man den debugging server starten und entsprechend about:config dinge umstellen. (das steht übrigens in der doku https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)

aber es gibt ja vielleicht noch eine andere möglichkeit, vielleicht weiß das ja jemand... es ist ja nicht so dass wir nur übers file system laufen. Man hat einen Server, in meinem Fall benutze ich den IIS (vermutlich etwas overkill)

Also frag ich mich ob man nicht über den IIS debuggen kann, so macht es ja auch mein backend, da hänge ich mich an den IIS Worker Prozess an. geht das auch mit Javascript oder sind das konfliktierende Technologien?

 

[tollertyp]

Der IIS hat damit aber halt gar nichts zu tun. Der ist für die Auslieferung des Codes (HTML/JS) an den Browser zuständig, mehr aber auch nicht.

 

[Kokujou]

schade... hatte gehofft der hat... wat weiß ich, irgendeine api mit der man network requests intercepten könnte oder sich an den IIS worker prozess dranhängen könnte um so debuggen zu können oder so. schade.

 

[sandreas]

Viele wissen auch nicht, dass es ein Schlüsselwort in JavaScript gibt, um einen Breakpoint zu setzen (statt manuell über die Browser-Console zu gehen)...

console.log("vor breakpoint");
debugger; // setzt via code einen Breakpoint
console.log("nach breakpoint");

Das kann sehr hilfreich sein und funktioniert auch in asynchronen Methoden.

 

[Player49]

wenn ich mit Visual Studio ein C# Programm oder eine Blazor anwendung debugge drücke ich auf den Knopf und das Problem ist gegessen, aber bei Javascript muss ich mich in einen Firefox server einklinken.

Das liegt doch auch daran das C# kompiliert werden muss bevor das Programm ausgeführt werden kann, demnach wird der Code beim kompilieren auch debuggt. Javascript Code wird doch nicht in dem Sinne kompiliert (und deshalb auch nicht debuggt) sondern nur von einem Interpreter (z.B. dem Browser) gelesen und ausgeführt. Du schreibst: "in einen Firefox Server einklinken", das ist richtig aber am Ende wenn du den Code laufen lassen willst soll das ganze doch sowieso auf einem Server laufen oder zumindest in einer Laufzeitumgebung (wie z.B. Node.js )? Wenn du einfach nur wissen willst ob dein Syntax korrekt ist, öffne deine Datei (html + javascript) einfach mit dem Browser, falls er nicht korrekt ist, siehst du das dann. Wenn ich meinen Code aber auf Semantik prüfen möchte, dann schreibe ich einfach das Wort "debugger" in meinen Code, danach öffne ich den Browser und drücke F12. Dann kann ich Schritt für Schritt durch die Anwendung springen (so weit es möglich ist).

 

[JP-M]

Und ansonsten debuggen "normale Leute" JavaScript eben, indem sie die IDE ihrer Wahl mit dem Debugger-Interface des Interpreters ihrer Wahl (Chrome, Firefox, Node ...) verbinden. Da machste nix dran ;-)