{"id":7190,"date":"2016-09-29T17:03:45","date_gmt":"2016-09-29T15:03:45","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/de\/?p=7190"},"modified":"2017-01-12T17:18:11","modified_gmt":"2017-01-12T16:18:11","slug":"fehler-bis-zur-wurzel-verfolgen-debugging-von-typescript-projekten-mit-visual-studio-code","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/fehler-bis-zur-wurzel-verfolgen-debugging-von-typescript-projekten-mit-visual-studio-code\/","title":{"rendered":"Fehler bis zur Wurzel verfolgen: Debugging von TypeScript-Projekten mit Visual Studio Code"},"content":{"rendered":"<p>Visual Studio Code ist eine recht neue Erscheinung, hat aber seit seiner Ver\u00f6ffentlichung <a href=\"http:\/\/www.golem.de\/news\/microsoft-visual-studio-code-wird-open-source-1511-117511.html\" target=\"_blank\">im November 2015<\/a> bereits viel Beachtung gefunden. Auf den ersten Blick k\u00f6nnte man meinen, Visual Studio Code sei nur eine weitere Iteration der Visual Studio-Familie, dem ist aber nicht so. Visual Studio Code ist eine komplette Neuentwicklung und hat abgesehen vom Namen \u201eVisual Studio\u201c nur wenige Gemeinsamkeiten mit seinen Namensvettern vorzuweisen.<\/p>\n<p>Es gibt viele gute Gr\u00fcnde die daf\u00fcr sprechen bei einem neuen Projekt auf TypeScript zu setzen, anstatt auf JavaScript. So bietet einem TypeScript unter anderem die M\u00f6glichkeit seinen Code in Klassen zu strukturieren, um nur mal einen Vorteil zu nennen. In diesem Beitrag m\u00f6chte ich darauf eingehen wie man ein TypeScript-Projekt mit Visual Studio Code debuggen kann.<!--more--><\/p>\n<h3>Warum \u00fcberhaupt Visual Studio Code<\/h3>\n<p>Visual Studio Code ist <a href=\"https:\/\/code.visualstudio.com\/Download\" target=\"_blank\">frei erh\u00e4ltlich<\/a> (unter MIT-Lizenz), quelloffen und kann plattform\u00fcbergreifend eingesetzt werden. All das ist recht bemerkenswert f\u00fcr ein Produkt aus dem Hause Microsoft, deren Produkte ja meist propriet\u00e4r sind und \u00fcberwiegend nur unter Windows laufen.<\/p>\n<p>Visual Studio Code ist stark in der JavaScript-Welt angesiedelt. Es besitzt von Haus aus Support f\u00fcr JavaScript, TypeScript und Node.js. Das minimalistische Interface von Visual Studio Code erinnert stark an andere Editoren mit schlankem Erscheinungsbild, z.B. <a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\">Sublime Text<\/a> oder <a href=\"https:\/\/atom.io\/\" target=\"_blank\">Atom<\/a>.<\/p>\n<p>Aus technischer Sicht sind die Anforderungen an einen JavaScript-Editor erst einmal gering \u2013 er muss lediglich Textdateien im Klartext bearbeiten k\u00f6nnen. Daf\u00fcr reicht bereits <a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\">Notepad++<\/a> aus. Wenn man allerdings komplexe JavaScript-Anwendungen entwickeln m\u00f6chte, ist man f\u00fcr jedes zus\u00e4tzliche Hilfsmittel dankbar. Eine Auswahl der Features von Visual Studio Code sind:<\/p>\n<ul>\n<li>DebuggerAutovervollst\u00e4ndigung<\/li>\n<li>Multi-Cursor Editing<\/li>\n<li>Split-Screen Editor<\/li>\n<li>Git-Integration<\/li>\n<\/ul>\n<p>Dar\u00fcber hinaus kann der Editor \u00fcber ein Erweiterungs-System um neue Funktionen erg\u00e4nzt werden. Man kann \u00fcber den angeschlossenen <a href=\"https:\/\/marketplace.visualstudio.com\/vscode\" target=\"_blank\">Marketplace<\/a> Erweiterungen herunterladen, oder selbst eine eigene <a href=\"https:\/\/code.visualstudio.com\/docs\/extensions\/example-hello-world\" target=\"_blank\">Erweiterung schreiben.<\/a><\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/extensions-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7239\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/extensions-2.jpg\" alt=\"Extensions\" width=\"607\" height=\"475\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/extensions-2.jpg 607w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/extensions-2-300x235.jpg 300w\" sizes=\"auto, (max-width: 607px) 100vw, 607px\" \/><\/a><\/p>\n<h3>\nTypeScript entwickeln mit Visual Studio Code<\/h3>\n<p>F\u00fcr den effektiven Einsatz von Visual Studio Code mit TypeScript ist eine <a href=\"https:\/\/code.visualstudio.com\/docs\/languages\/typescript#_tsconfigjson\" target=\"_blank\">TypeScript-Config-Datei<\/a>\u00a0(`tsconfig.json`) unabdingbar. In ihr werden Optionen gesetzt die das Transpilieren von TypeScript zu JavaScript betreffen. Au\u00dferdem signalisiert eine `tsconfig.json` im Basis-Verzeichnis eines Projekts Visual Studio Code dass es sich um ein TypeScript-Projekt handelt.<\/p>\n<p>Genau wie jeder anderer moderner Code-Editor bietet einem Visual Studio Code Vorschl\u00e4ge zur Autovervollst\u00e4ndigung an. Wenn man die Typing-Definitionen f\u00fcr seine verwendeten Libraries\/Frameworks in sein Projekt eingebunden hat (z.B. mit dem <a href=\"https:\/\/github.com\/typings\/typings\" target=\"_blank\">TypeScript Definition Manager<\/a>) bietet einem Visual Studio Code Autovervollst\u00e4ndigung beim Schreiben an.<\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7204 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_1.png\" alt=\"Typings\" width=\"524\" height=\"327\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_1.png 524w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_1-300x187.png 300w\" sizes=\"auto, (max-width: 524px) 100vw, 524px\" \/><\/a><\/p>\n<p>Falls ein Funktionsaufruf nicht mit der vorgegebenen Typing-Definition \u00fcbereinstimmt, dann wird Visual Studio Code eine Warnung ausgeben.<\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7205 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_2.png\" alt=\"Typings\" width=\"510\" height=\"238\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_2.png 510w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/typings_2-300x140.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<h3>SourceMaps<\/h3>\n<p>Bevor man den Debugger von Visual Studio Code in vollem Umfang benutzen kann, muss man zuerst sein Projekt f\u00fcr die Verwendung von sogenannten SourceMaps konfigurieren.<\/p>\n<p>Durch das Transpilieren von TypeScript nach JavaScript weicht die Struktur der generierten JavaScript-Datei mitunter stark von der TypeScript-Vorlage ab. Damit der Debugger beim zeilenweisen Ausf\u00fchren der JavaScript-Datei nachvollziehen kann, wie diese mit der TypeScript-Vorlage korrespondiert, ben\u00f6tigt er eine SourceMap. Damit beim Kompilieren eine SourceMap erstellt wird f\u00fcgt man der Datei `tsconfig.json` unter `compilerOptions` den Eintrag `&#8220;sourceMap&#8220;: true` hinzu.<\/p>\n<p>Letztlich muss man dem Debugger noch anweisen die SourceMaps auch zu verwenden, in dem man in dem Debug-Task von Visual Studio Code die Option `sourceMaps` auf `true` setzt.<\/p>\n<h3>Breakpoints<\/h3>\n<p>Breakpoints erlauben es, die Ausf\u00fchrung des Programms an einer bestimmten Zeile anzuhalten, damit man in Ruhe Variablen inspizieren und den Programmfluss besser nachvollziehen kann. Unter Umst\u00e4nden m\u00f6chte man, dass die Ausf\u00fchrung nur dann pausiert wird, wenn eine Variable einen bestimmten Wert annimmt. In Visual Studio Code hat man die M\u00f6glichkeit den Breakpoint selbst mit einer Bedingung zu versehen.<\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7199 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_1.png\" alt=\"Breakpoint\" width=\"380\" height=\"181\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_1.png 380w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_1-300x143.png 300w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7200 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_2.png\" alt=\"Breakpoint\" width=\"381\" height=\"181\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_2.png 381w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/breakpoint_2-300x143.png 300w\" sizes=\"auto, (max-width: 381px) 100vw, 381px\" \/><\/a><\/p>\n<p>Im oben genannten Beispiel wird die Ausf\u00fchrung nur dann pausiert wenn \u201euser.name\u201c den Wert \u201emax.mustermann\u201c annimmt.<\/p>\n<h3>Unit-Tests<\/h3>\n<p>Um in einem JavaScript-Projekt eine stabile Code-Basis aufzubauen, sind Unit-Tests unerl\u00e4sslich. Wenn man bereits eine funktionierende Testumgebung f\u00fcr sein Projekt aufgebaut hat, ist es m\u00f6glich die Unit-Tests direkt aus Visual Studio Code zu starten.<\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7203 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing.png\" alt=\"Testing\" width=\"898\" height=\"465\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing.png 898w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing-300x155.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/testing-768x398.png 768w\" sizes=\"auto, (max-width: 898px) 100vw, 898px\" \/><\/a><\/p>\n<p>Dazu muss man die <a href=\"https:\/\/code.visualstudio.com\/docs\/editor\/debugging#_launch-configurations\" target=\"_blank\">Standard-Launch-Konfiguration<\/a> von VSC etwas anpassen. F\u00fcr den Wert `program` tr\u00e4gt man den passenden Aufruf f\u00fcr seine Testumgebung ein. Bei einem NodeJS-Projekt, das mit <a href=\"https:\/\/github.com\/mhevery\/jasmine-node\" target=\"_blank\">jasmine-node<\/a> getestet werden soll, w\u00fcrde der vollst\u00e4ndige Aufruf ` &#8222;program&#8220;: &#8222;${workspaceRoot}\/node_modules\/jasmine-node\/bin\/jasmine-node&#8220;` lauten.<\/p>\n<p>Sollte nun ein Testfall fehlschlagen, kann man den Debugger von Visual Studio Code dazu verwenden, dem Problem bis zu seiner Ursache nachzusp\u00fcren.<\/p>\n<h3>Abschlie\u00dfendes<\/h3>\n<p>Ich hoffe, ich konnte mit diesem Beitrag vermitteln, warum Visual Studio Code ein guter Begleiter f\u00fcr TypeScript-Projekte ist. Durch den eingebauten Debugger, die nahtlose Integration von TypeScript, und die Git-Anbindung kann man sehr viele Arbeitsschritte mit einer einzigen Anwendung abdecken.<\/p>\n<p>Letztlich ist die Wahl des passenden Editors eine sehr pers\u00f6nliche Entscheidung. Falls man nun in der Vergangenheit schlechte Erfahrungen mit Visual Studio-Produkten (oder Microsoft-Produkten generell) gemacht hatte, ist es nur verst\u00e4ndlich wenn man in Zukunft darauf verzichten m\u00f6chte. Aber ich finde, das sollte einen nicht davon abhalten diesem interessanten neuen Editor eine Chance zu geben.<\/p>\n","protected":false},"author":48,"featured_media":0,"template":"","tags":[472,471],"class_list":["post-7190","blog","type-blog","status-publish","hentry","tag-typescript","tag-visual-studio-code"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/7190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/48"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/7190\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=7190"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=7190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}