Moderne JavaScript DevTools in Chrome

Vue.js DevTool

Alles ändert sich, auch JavaScript. Oder besser gesagt die Art wie JavaScript eingesetzt wird. FrĂĽher ist man mit den DevTools von Chrome hingegangen und hat sich fein in der Console angeschaut, was eigentlich Sache ist. FrĂĽher hat man JavaScript allerdings auch eher punktuell eingesetzt. NatĂĽrlich geht das auch heute noch via console.log – aber schön ist anders! Was hat sich also geändert am Einsatz von JavaScript? Da sind primär zwei grundlegende Ă„nderungen zu nennen

– Templates (MVC-Architektur)
– Single-Page-Webanwendungen

Zumindest letzteres entwickelt sich bei einem Debugging schnell zu einer sehr nachhaltigen und dummen Aufgabe. Vor allem deshalb weil man ständig gegen den Cache des Browsers ankämpft. Erschwerend kommt hinzu, das es recht lange dauern könnte, bis die Anwendung neu geladen und initialisiert ist. Im Bereich der Single-Page-Webanwendungen existiert der Status „Seite fertig geladen“ fast nicht mehr. Stattdessen läuft ein fortlaufender Prozess der ständig auf Aktionen wartet bzw. auch permanent Daten im Hintergrund aktualisieren könnte.

Wie also die modernen Frameworks unterstĂĽtzen, um geeignete Werkzeuge in den DevTools zu besitzen? Die Antwort ist relativ einfach: fĂĽr fast jedes groĂźe Framework existiert inzwischen ein Chrome Plugin, das die bereits bestehenden DevTools des Browsers erweitern. Installiert man das passende Plugin gehen die DevTools spezialisiert auf das Framework ein, erlauben ein besseres Debugging und erlauben eine besser Ansicht von Datenstrukturen!

Hier eine Liste der entsprechenden Chrome Plugins:

Ähnliche Beiträge

Einfach mal eine Ansi-Grafik auf die Homepage pack... FrĂĽher, als alles noch besser war, und ich mich in Mailboxen herumgetrieben habe, gabs immer coole Ansi-Intros. Am Anfang waren es nur einfache Schrif...
TransformJS – einfache Transforms mit JavaSc... CSS Transforms sind eigentlich fester Bestandteil jedes Browser - dummerweise in jedem Browser ein klein wenig anders, und dummerweise auch mit andere...
Entwurfsmuster fĂĽr JavaScript Entwurfsmuster (englisch: Design Patterns) sind eine Art Best Practice fĂĽr Programmiersprachen. Also der optimale Weg ein Ziel zu erreichen. Entwurfsm...
Bei der Navigation mit der Tastatur arbeiten In letzter Zeit hat sich das Web durch Online-Anwendungen auf die Fahne geschrieben, Desktop-Anwendungen ablösen zu wollen bzw. zu ersetzen. Die Ansät...

Schreibe einen Kommentar