GrapesJS DevTools: Ein Entwickler-Panel in deinem Editor

Wir haben grapesjs-devtools veröffentlicht , ein Open-Source-(MIT)-Plugin, das dem Editor ein dockbares Entwicklerpanel hinzufügt. Die Idee ist einfach: Wie bei den DevTools Ihres Browsers, aber anstatt die Seite zu inspizieren, inspizieren Sie den internen Zustand des Editors selbst. Wenn man (CMD+Shift+Dauf macOS) klicktCtrl+Shift+D, öffnet sich der ganze Editor: der Komponentenbaum, angewandte Stile, der Ereignisstrom, ein REPL und sogar ein KI-Assistent, der GrapesJS-Fragen mit funktionierenden Codebeispielen beantwortet.

Live-Demo wechseln Sie direkt im Header zwischen dem Standard-Webpage-Preset und GrapesJS Studio, öffnen Sie das Panel mit dem Hotkey und stöbern Sie sich um.

Warum das existiert

GrapesJS ist ein mächtiges Werkzeug, aber der Großteil seines internen Zustands ist unsichtbar. Komponenten, Traits, CSS-Regeln, Manager, der Eventbus †– all das lebt in Backbone-Modellen, und wenn etwas schiefgeht, grabt man es manuell aus der Browserkonsole aus. Jeder, der ein Plugin oder eine benutzerdefinierte Komponente geschrieben hat, kennt die Schleife: Abonniere ein Ereignis, logge die Nutzlast, justizieren, abmelden, wiederholen.

DevTools nimmt diesen Grind weg. Alles, was früher manuelles Graben erforderte, ist jetzt live in einem Panel sichtbar.

Was ist drinnen

Das Panel besteht aus Modulen, jedes kann in der Konfiguration deaktiviert werden, falls du es nicht brauchst.

Components einen Live-Komponentenbaum mit Zwei-Wege-Auswahl, der mit der Leinwand synchronisiert ist. Klickt man auf einen Knoten im Baum, wird die Komponente auf der Leinwand ausgewählt, und umgekehrt. Attribute und Traits sind direkt im Panel bearbeitbar, und jede Komponente kann als JSON kopiert werden.

Styles zeigen, welche CSS-Regeln tatsächlich auf das ausgewählte Element angewendet werden, wobei kaskadenüberschriebene Eigenschaften durchgestrichen werden und Inline-Bearbeitung durchgeführt wird. Außerdem eine projektweite Regelsuche und ein Dead-Rule-Scanner, der Regeln findet, die zu nichts passen.

Ereignisse sind ein Protokoll jedes Editor-Ereignisses über einen einzelnen Listener: Gruppen- und Textfilter, Pause, Frequenzstatistiken und Payload-Inspektion für jedes Ereignis. Die Liste ist virtualisiert, sodass selbst ein lautes Projekt das Panel nicht einfriert.

Konsole ein REPL miteditorund$0 (der ausgewählten Komponente) in Scope, History, Autocomplete Oneditor. und fertigen Snippets. Kein Browser-DevTools mehr offen lassen, nur um den Editor etwas zu "fragen".

Speichere einen JSON-Baum deiner Projektdaten, strukturelle Unterschiede zwischen Snapshots, Export/Import und Live-HTML/CSS mit Syntax-Hervorhebung.

Managers – ein Überblick über Blöcke, Traits, Selektoren, Geräte und geladene Plugins. Ein Klick auf einen Selektor springt direkt zum Filtern im Styles-Modul.

Perf-Live-Metriken (Komponentenanzahl, CSS-Regelanzahl, Anzahl der Editor-Listener, Undo-Stack-Größe), ein Canvas-Rerender-Timer und ein Leckdetektor, der auf einem einfachen Prinzip basiert: Nehmen Sie eine Basislinie und vergleichen Sie später.

Leinwand-Überlagerungen auf der Leinwand: Markiere alle Komponenten farblich codiert nach Verschachtelungstiefe, Boxmodell des ausgewählten Elements, einempointer-eventsSchalter für den Leinwandkörper und Scroll-to-Select.

Schnappschüsse erfassen und stellen den vollständigen Projektzustand wieder her (Daten + Auswahl + Gerät), mit Export/Import und optionaler lokaler Speicher-Persistenz.

Der KI-Assistent

Der KI-Tab verdient einen eigenen Bereich. Es ist kein "Chat um des Chats willen": Der Assistent versteht den Kontext des Redakteurs. Klicke auf "Element auswählen", klicke auf einen beliebigen Teil der Benutzeroberfläche, ein Panel, einen Button, einen Manager oder wähle einfach eine Komponente auf der Leinwand aus und frage so etwas wie "Wie füge ich hier einen weiteren Button hinzu?". Du bekommst eine Erklärung plus ein einsatzbereites Beispiel für GrapesJS-Code, gestreamt in Markdown, mit kopierbaren Codeblöcken.

Claude, ChatGPT und Gemini werden unterstützt. Standardmäßig gehen Anfragen direkt aus dem Browser (praktisch für die Entwicklung, da die Benutzeroberfläche ehrlich gesagt warnt), aber für die Produktion gibt es zwei intelligentere Modi:

• Im Proxy-Modus wird es auf deinen eigenen Endpunkt gerichtet und der API-Schlüssel verlässt deinen Server nie. Der Browser sendet den nativen Anfrage-Body des Anbieters an Ihren Proxy, der den Schlüssel addiert und die Antwort zurückstreamt. Ein minimaler Proxy ist buchstäblich ein Dutzend Zeilen Express, ein Beispiel gibt es im README.
• OpenAI-kompatible Backends OpenRouter, Ollama, LM Studio, Together und jedes andere Gateway. Möchten Sie einen kostenlosen lokalen Assistenten über Ollama? Fertig.

Ein guter Gast in deinem Editor sein

Wir haben hart daran gearbeitet, Devtools wie höfliche Hausgäste verhalten zu lassen:

• Keine Undichtigkeiten.Alle Event-Abonnements laufen über eine SingleEditorBridge, die sie beim Schließen editor._eventsdes Panels wieder auf den Ausgangswert zurücklegt.
• Faul.Module werden beim ersten geöffneten Tab montiert; Timer und RAF-Schleifen stoppen bei der Deaktivierung.
• Nicht-invasiv.Das Panel ist einposition: fixedOverlay und schreibt niemals in das Canvas-iframe (die einzige Ausnahme ist der explizitepointer-eventsSchalter).
• Keine Laufzeitabhängigkeiten.Die Benutzeroberfläche ist schlicht DOM, große Listen virtualisiert, und der Baum rendert Kinder faul, Projekte mit 1000+ Komponenten reagieren zuverlässig.

Wo wir in private APIs schauen (die Perf-Listener-Metrik liest die interne Struktur von Backbone), ist sie isoliert undtry/catchdegradiert zu, anstattn/adas Panel zum Absturz zu bringen.

Probier es aus

npm install grapesjs-devtools 

import grapesjs from 'grapesjs'; import devtools from 'grapesjs-devtools'; import 'grapesjs-devtools/dist/style.css'; const editor = grapesjs.init({ container: '#gjs', plugins: [devtools], }); 

Kompatibel mit GrapesJS.>= 0.21.0 Alles ist konfigurierbar: Dock-Position (unten/rechts/links), Größen, Thema (dunkel/hell/automatisch), Hotkey, Module.

Das Panel ist außerdem erweiterbar: Ein benutzerdefiniertes Modul ist einfach eine Klasse mitmount/deactivate/destroydie einen Kontext mit denEditorBridgefür sichere Abonnements erhält.