Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Visual Studio Code Grundkurs

Debuggen von JavaScript im Browser

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auch das Debuggen von JavaScript wird mit Visual Studio Code zum Kinderspiel. In diesem Beispiel nutzt Gregor Biswanger dafür eine Extension im Zusammenspiel mit dem Chrome-Browser.

Transkript

In diesem Video sehen wir uns an, wie wir direkt im Browser eine geladene HTML-Seite debuggen können, ohne dass also der JavaScript Code direkt auf Node.js läuft, sondern eben im Browser und ich möchte dennoch, innerhalb von Visual Studio Code ein Breakpiont setzen können. Von Haus aus kann das Visual Studio Code nicht in der aktuellen Version, es gibt dazu allerdings eben eine Extension, die das Ganze ermöglicht. Und zwar nur im Zusammenhang mit dem Chrome-Browser und dazu installieren wir einmal diese Extension, wenn wir hier links und da nur auf "Extensions" klicken und zwar "Install Extension" und dann suchen wir nach Chrome und dann sehen wir schon "Debbuger for Chrome". Das ist diese Erweiterung, die wird einmalig hier heruntergeladen und installiert und sobald Visual Studio Code die Erwartungen heruntergeladen hat, ist eine Visual Studio neu starten. Ok, es ist so weit, dann "Restart Now" und jetzt möchte ich diese "index.html"-Seite automatisch in Chrome öffnen und hier befinden sich dann auch die nötigen JavaScript-Dateien, zum Beispiel ist hier eine AngularJS-Anwendung integriert und dann möchte ich einfach debuggen, wenn ich etwas auf der Oberfläche eingegeben habe und jetzt brauche ich einfach nur F5 drücken und wir bekommen zusätzlich einen weiteren Reiter angezeigt, bei der Auswahl eines "launch.json"-Scripts und ich wähle hier bei Chrome aus. Falls von bereits schon eine "launch.json" besitzt, kann man eben die Konfiguration hier entsprechend nehmen, auf der Extensions-Seite bekommt man auch nochmal diese "json"-Datei angezeigt, hier man verwenden kann, dazu ganz einfach zu der Extension gehen, erstmal die Installierten nochmal anschauen und ich hier einfach auf README im Browser, dann die Dokumentation dazu anschauen, ansonsten wäre das eben hier schonmal von Haus aus die Konfiguration, ohne dass ich nochmal explizit, was machen musste, ich drücke jetzt nochmal die Taste "F5" und Visual Studio Code hat automatisch meine "index.html"-Seite geöffnet und gehen wir auch mal an eine Codestelle, wo ich debuggen möchte, setze hier also den Breakpoint, da ist schon einer gesetzt und wenn ich jetzt drei Buchstaben eingegeben habe, dann haben wir mal Video, zack, landen wir auch an der Codestelle, wir können hier, wie gewohnt, da debuggen. Wir sehen hier den neuen Wert "newValue" Video, wir können auch hier direkt in der Konsole etwas eingeben um auch variablen Werte zu überprüfen, in Global Scope liegen, et cetera, kann natürlich auch in den Debug-Bereich wechseln und wir bekommen exakt wieder den gleichen Komfort, so, wie wir es auch beim Node.js debuggen bekommen. In diesem Video haben wir gesehen, wie wir unsere Anwendung im Chrome starten können und direkt von Visual Studio Code aus debuggen können.

Visual Studio Code Grundkurs

Lernen Sie alles Wichtige kennen, um mit dem kostenlosen Quelltexteditor von Microsoft in die Entwicklung von Webprojekten einsteigen zu können

2 Std. 21 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!