Der Einstieg ist denkbar einfach. Installieren Sie die Erweiterung, öffnen Sie eine beliebige Webseite und greifen Sie über das Popup oder das schwebende Dock auf mehr als 39 Entwickler-Tools zu. Keine Konfiguration erforderlich.
Erweiterung zu Chrome hinzufügen
Öffnen Sie den Chrome Web Store und suchen Sie nach der Erweiterung „DevSuite Pro“.
Klicken Sie auf „Zu Chrome hinzufügen“ und bestätigen Sie anschließend im Popup-Fenster mit „Erweiterung hinzufügen“.
Webseite öffnen und Tool starten
Besuchen Sie eine beliebige Website, klicken Sie dann auf das DevSuite Pro-Symbol in der Symbolleiste oder nutzen Sie das schwebende Dock auf der Seite.
Wählen Sie ein beliebiges Tool aus der Übersicht. Tools wie der CSS Inspector, Lineale oder die Farbpipette werden sofort auf der aktuellen Seite aktiviert.
Funktionen der Erweiterung
Hauptmerkmale von DevSuite Pro
DevSuite Pro bietet über 39 Entwickler-Tools zur Seiteninspektion, Messung, zum Design und zur Analyse. Beschleunigen Sie Ihren Workflow mit leistungsstarken Funktionen, die direkt in Ihren Browser integriert sind.
CSS Inspector
Fahren Sie mit der Maus über ein beliebiges Element, um sofort dessen CSS-Styles zu sehen und diese live zu bearbeiten. So werden Debugging und Designanpassungen in Echtzeit zum Kinderspiel.
Klicken Sie auf ein beliebiges Element, um dessen Eigenschaften, Dimensionen, Abstände, Schriftarten und Farben zu untersuchen. Verstehen Sie die Seitenstruktur sofort, ohne die DevTools des Browsers zu öffnen.
Lineale und Hilfslinien
Messen Sie Abstände, prüfen Sie die Ausrichtung und fügen Sie pixelgenaue Lineale und Hilfslinien auf jeder Webseite hinzu, um sicherzustellen, dass Ihr Design perfekt ausgerichtet ist.
Farbpipette (Color Picker)
Wählen Sie Farben von jedem Element auf der Seite aus und kopieren Sie HEX-, RGB- oder HSL-Werte mit einem einzigen Klick in Ihre Zwischenablage.
Screenshot aufnehmen
Erstellen Sie Screenshots von der gesamten Seite oder dem sichtbaren Bereich einer beliebigen Webseite und laden Sie diese sofort herunter – ideal für Design-Sharing und Bug-Reports.
Responsive-Tester
Vorschau einer Webseite in verschiedenen Bildschirmgrößen und Geräteauflösungen, um responsives Design zu testen, ohne den Browser zu verlassen.
Häufige Fragen zu den Funktionen und zur Nutzung der DevSuite Pro-Erweiterung. Hier finden Sie vielleicht schon Ihre Antwort.
Wie installiere ich DevSuite Pro?
Besuchen Sie den Chrome Web Store, suchen Sie nach „DevSuite Pro“, klicken Sie auf „Zu Chrome hinzufügen“ und bestätigen Sie die Installation. Nach der Installation erscheint das Erweiterungssymbol in Ihrer Browser-Symbolleiste. Klicken Sie darauf, um sofort auf über 39 Entwickler-Tools zuzugreifen.
Was ist der Unterschied zwischen kostenlosen und Pro-Tools?
Kostenlose Tools (20+) sind für jeden ohne Lizenz verfügbar. Pro-Tools haben ein goldenes PRO-Badge und erfordern eine aktive Pro-Lizenz. Im Popup sehen Sie, welche Tools kostenlos oder Pro sind – kostenlose Tools haben kein Schloss-Symbol, während Pro-Tools leicht ausgegraut erscheinen, bis Sie Ihre Lizenz aktivieren.
Warum funktioniert das Tool auf manchen Websites nicht?
Einige Websites haben strenge Content Security Policies (CSP), die bestimmte Aktionen von Browser-Erweiterungen blockieren. Dies ist besonders bei Bank- und Regierungsseiten üblich. Zudem erlauben interne Chrome-Seiten (chrome://) keine Ausführung von Content-Skripten.
Sind die Änderungen, die ich an der Seite vornehme, dauerhaft?
Nein. Alle Änderungen, die mit Tools wie Element verschieben, Live-Text-Editor, Element löschen/verbergen und dem CSS Inspector vorgenommen werden, sind temporär. Sie betreffen nur das, was Sie gerade in Ihrem Browser sehen. Beim Neuladen der Seite wird alles auf den ursprünglichen Zustand zurückgesetzt.
Wie aktiviere ich meine Pro-Lizenz?
Öffnen Sie das DevSuite Pro-Popup und klicken Sie oben rechts auf das Einstellungs-Symbol. Scrollen Sie zum Bereich „Lizenz“, fügen Sie Ihren Lizenzschlüssel ein und klicken Sie auf „Aktivieren“. Wenn der Schlüssel gültig ist, wechselt das Badge von FREE zu PRO und alle Pro-Tools werden sofort freigeschaltet.
Wie kann ich das schwebende Dock verschieben oder ausblenden?
Sie können das Dock in den Einstellungen verschieben, indem Sie eine andere Position wählen: Oben, Unten, Links oder Rechts. Sie können das Dock auch komplett ausblenden, indem Sie die Option „Dock auf Seiten anzeigen“ deaktivieren oder jederzeit Strg+Umschalt+X drücken.
Sammelt DevSuite Pro Browsing-Daten?
Nein. DevSuite Pro sammelt, verfolgt oder überträgt keine Ihrer Browsing-Daten. Alle Einstellungen werden lokal im Browser gespeichert. Die einzige externe Anfrage erfolgt bei der Lizenzaktivierung, um Ihren Schlüssel mit unserem Server abzugleichen.
Kann ich DevSuite Pro auch in Firefox verwenden?
Ja! DevSuite Pro ist sowohl im Chrome Web Store als auch bei den Firefox Add-ons verfügbar. Es funktioniert in Chrome, Edge, Brave und anderen Chromium-basierten Browsern sowie in Firefox.
