JavaScript direkt im Chrome debuggen und editieren (Chrome Workspaces)


Ich muss gestehen bisher habe ich Chrome immer nur zum Debuggen benutzt und den Code dann im Visual Studio entsprechend geändert, gespeichert und dann wieder im Chrome debuggt.

Als Entwickler lernt man immer wieder etwas neues dazu und wie ich feststellen musste kann man im Chrome auch schon seit längerem, für lokale Projekte den JavaScript Code und auch die CSS Dateien direkt im Browser in den Developer Tools nicht nur debuggen sondern auch direkt bearbeiten und speichern, OHNE eine extra Extension für Chrome installieren zu müssen.

Man benötigt am besten die neuste Version von Chrome und öffne einfach eine Seite die man lokal debuggen möchte in Chrome.

1. Öffnen der Developer Tools in Chrome am einfachsten mit der rechten Maustaste über “Element untersuchen” oder mit F12.

2. Dann in den Developer Tools in den Settings unter Workspace den Ordner hinzufügen in dem sich unser Webprojekt befindet, in meinem Fall die MVC Seite. Dann fragt Chrome ob dieser Vollzugriff auf dieses Verzeichnis bekommt, dies bestätigt man entsprechend.

image

image

image

Danach wird der Ordner auch in den Workspaces mit angezeigt.

image

3. Wenn man jetzt die Settings wieder schließt, und in den Developer Tools auf “Sources” geht, sieht man links unter seiner lokalen Seite auch noch den Ordner den man eben zu den Workspaces hinzugefügt hat, bei mir war dies “Gui.Mvc”.

image

Wenn man jetzt bereits in den passenden Ordern für z.B. seine JavaScript Dateien geht, bei mir im Beispiel im “Gui.Mvc” Ordner unter “ScriptsApp” und dort eine Datei ändert, kann man diese auch bereits speichern. Wichtig ist nur das die Dateien die man bearbeiten möchte auch ausgecheckt sind, denn sonst kann Chrome nicht darauf zugreifen.

Was noch nicht geht ist das Debuggen, denn wenn wir hier einen Haltepunkt setzen, dann wird Chrome diesen nicht “erreichen”.

4. Damit auch das Debuggen in unserem Workspace Ordner funktioniert, müssen wir diesen entsprechend auf unsere URL mappen. Für das Mappen suchen wir uns z.B. eine JavaScript Datei in unserem Workspace Ordner heraus und über die rechte Maustaste wählen wir “Map to network resource” aus.

image

Danach erscheint ein Overlay in dem er die Datei anzeigt. Sollte eine Datei mit dem gleichen Namen mehrmals vorkommen, dann hier den richtigen “Pfad” auswählen wo die eben ausgewählte Datei liegt.

image

Nach dem die Zuordnung vorgenommen wurde, ändert sich auf der linken Seite auch die Auflistung und die Anzeige für “localhost4420” verschwindet.

image

Jetzt können wir alle Dateien die wir wollen bearbeiten und problemlos auch Haltepunkte in den JavaScript Dateien setzen.

image

5. Das ganze lässt sich auch sehr einfach wieder Rückgängig machen, in dem man einfach auf eine Datei im gemappten Pfad geht und dort “Remove network mapping” klickt.

image

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s