Anzeige
Anzeige
Tool-Tipp
Artikel merken

Mit dieser Chrome-Erweiterung wird das Editieren deiner Website zum Kinderspiel

Editieren ohne den Quellcode zu öffnen? Mit dieser Chrome-Erweiterung ist das kein Problem! Wir stellen euch Visual Inspector vor.

Von Jessy Kösterke
1 Min. Lesezeit
Anzeige
Anzeige

(Screenshot: canvasflip.com)

Googles Chrome ist für die meisten Webentwickler die erste Wahl. Was besonders an der guten Performance liegt, den großartigen Dev-Tools sowie der nahezu unüberschaubaren Flut an Erweiterungen – die den Funktionsumfang des Browsers erweitern und ihn so zu einem noch mächtigeren Werkzeug machen.

Anzeige
Anzeige

Jede noch so kleine Änderung im Code live zu schieben wäre ein enormer Aufwand. Und das schlimmste: Die Änderung wäre live, es kann also jeder sehen, dass der Button jetzt nicht mehr blau sondern grün ist. Auch das Screendesign für solche Änderungen anzupassen lohnt sich nicht. Und hier kommen Browser-Erweiterungen ins Spiel! Visual Inspector ist eine davon und will das Editieren zum Kinderspiel machen.

Visual Inspector: Kinderleichtes editieren

Anzeige
Anzeige

Visual Inspector ist eine kostenlose Chrome-Erweiterung und ein Live-Editor, mit dem CSS-Änderungen im Browser schnell umgesetzt werden können. Zum Ändern der Styles werden keine Coding-Skills benötigt, denn der Quellcode wird gar nicht erst geöffnet.

Die Erweiterung öffnet sich als schickes und selbsterklärendes Overlay, das besonders Designern gefallen könnte. Visual Inspector bietet unter anderem Möglichkeiten zum Inspizieren und Messen, auch von Farbe und Typografie. Außerdem lassen sich Design und Text editieren. Besonders praktisch ist das Exportieren der Änderung als PNG-Datei, so können Anpassungen schnell untereinander abgestimmt werden.

Anzeige
Anzeige

(Screenshot: t3n.de)

In Visual Inspector wird außerdem die gesamte Farbpalette sowie Font-Sammlung ersichtlich. Unter Assets sind zusätzlich alle sich auf der Seite befindenden Bild-Dateien zum Download verfügbar.

Ganz ohne Coding-Skills kommen Anwender leider nicht davon, zumindest nicht, wenn sie die Änderungen am Ende live schieben müssen. Um sich allerdings ein temporäres Bild von einer möglichen Anpassung zu machen, ist Visual Inspector eine schnelle Möglichkeit zur Visualisierung.

Anzeige
Anzeige

Außerdem interessant:

 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Tobias Keller

Ich weiß ja nicht,
mir reichen die Chrome eigenen Dev-Tools, ein Color-Picker und
was zum Pixel messen.
Aber für „Laien“ bestimmt ganz interessant,

Antworten
Twibbi

Visual Inspector muss man wirklich ausprobieren.

Antworten
Heinz

Ich bin Laie. Wie Tobias bereits geschrieben, für mich ist das Tool sehr interessant.

Antworten
Zip

Coding, ganz ohne Coding-Skills, toll! Wenn man einfach grundlegend lerne würde was man anbietet, dann wäre man ohne visuelle Tools schneller und exakter unterwegs und wüsste womöglich sogar noch was man tut.

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige