So bearbeiten Sie eine Site live mit dem Web Developer Tool von Firefox

Cum să editați în mod live un site cu instrumentul pentru dezvoltatori web Firefox
⏱️ 5 min read

Würde Ihre Website besser aussehen, wenn das Logo um fünf Pixel nach rechts verschoben würde oder einen blauen Hintergrund hätte? Würde das Hinzufügen eines Rahmens oder von Schatten zu den Bildern in Ihren vorgestellten Posts dazu führen, dass sie mehr platzen? Moderne Browser wie Firefox verfügen über Web Developer Tools, mit denen Sie das Innenleben einer Site überprüfen und Live-Änderungen vornehmen können, um die Ergebnisse in Echtzeit zu verfolgen.

In diesem Tutorial erfahren Sie, wie Sie die Webentwicklertools von Firefox verwenden, um eine Website live zu bearbeiten.

Hinweis: Dieses Tutorial gilt für die meisten Browser, einschließlich Chrome, Opera und Safari.

Lernen Sie die Web Developer Tools kennen

Die Web Developer Tools von Firefox sind ein umfassender Satz von Tools, von der Anzeige aller DOM-Elemente bis zur Messung der Geschwindigkeit. Für dieses Tutorial benötigen Sie nur die Werkzeuge “Inspector” und “Style Editor”.

Starten Sie Firefox und besuchen Sie eine / Ihre Site. Wählen Sie im Hamburger-Menü von Firefox (standardmäßig oben rechts) “Web Developer -> Style Editor” oder drücken Sie die Taste Verschiebung + F7 Kombination auf Ihrer Tastatur.

Das Web Developer-Bedienfeld von Firefox wird auf einer Seite des Fensters angezeigt – normalerweise im unteren Bereich. Sie können die Position ändern, indem Sie oben rechts im Bedienfeld auf die Schaltfläche mit den drei Punkten klicken und „Nach rechts / links andocken“ oder „Separates Fenster“ auswählen.

Live-Bearbeitungsseite mit separatem Firefox-Fenster

Hinweis: Dieses Tutorial zeigt Ihnen nicht, wie Sie HTML und CSS codieren. Hier können Sie die Grundlagen lernen.

Inspektion des Elements

Um das Aussehen eines Elements beeinflussen zu können, müssen Sie es identifizieren können. Klicken Sie auf die allererste Schaltfläche in der Symbolleiste oder drücken Sie Strg + Verschiebung + C. auf Ihrer Tastatur, um den Elementauswahlmodus zu aktivieren.

Live-Bearbeitungsseite mit Firefox Element Picker

Bewegen Sie die Maus über die Site, um verschiedene Elemente der Webseite hervorzuheben. Neben ihnen sehen Sie ihre primäre Kennung in einem Popup.

Live-Bearbeitungsseite mit Firefox Wählen Sie das Logo

Wenn Sie auf ein Element klicken, wird es auf der Registerkarte Inspektor der Entwicklertools ausgewählt.

Live-Bearbeitungsseite mit Firefox Inspector

Wenn Sie das Element finden, das Sie optimieren möchten, klicken Sie mit der rechten Maustaste auf den Eintrag im Developer Tools Inspector und wählen Sie aus dem angezeigten Popup-Fenster “Kopieren -> CSS-Auswahl”.

Live Edit Site mit Firefox Copy Selector

Starten Sie Ihre Live-Bearbeitung

Wechseln Sie mit der CSS-Auswahl Ihres Elements in die Zwischenablage zurück zur Registerkarte Stileditor im Fenster Entwicklertools. Klicken Sie oben links auf die Schaltfläche „+“, um ein neues Stylesheet zu erstellen und an das Dokument anzuhängen.

Live-Bearbeitungsseite mit neuem Firefox-Stylesheet

Fügen Sie Ihre CSS-Auswahl in das neue, leere Stylesheet ein. Fügen Sie ein Leerzeichen hinzu, gefolgt von einer Reihe von öffnenden und schließenden geschweiften Klammern.

Live-Bearbeitungsseite mit Firefox Paste Selector

In CSS wird das Aussehen eines Elements definiert, indem es zuerst mit einem Bezeichner wie diesem CSS-Selektor “ausgerichtet” wird und dann einige Regeln hinzugefügt werden, die sich auf sein Erscheinungsbild auswirken. Alles, was zwischen den öffnenden und schließenden geschweiften Klammern steht, wirkt sich auf das „Zielelement“ aus.

Wenn Sie beispielsweise die folgende Regel hinzufügen:

Dadurch wird das Element, in dem es verwendet wird, nicht angezeigt. Dies ist wahrscheinlich der einfachste Weg, um festzustellen, ob Sie das richtige Element auf Ihrer Seite auswählen. Wenn es verschwindet, war es tatsächlich das, was Sie wollen, und Sie können diese Regel löschen, um andere auszuprobieren. Wenn es nicht verschwunden ist, ist es Zeit, zum Inspektor zurückzukehren und etwas anderes auszuwählen.

Live-Bearbeitungsseite mit Firefox Hintergrundfarbe ändern

Wir werden Ihnen hier nicht zeigen, wie man CSS codiert, aber Sie können mit einigen der gängigen Regeln herumspielen wie:

Sie werden feststellen, dass sich das Element der Site ändert, wenn Sie dem CSS-Stylesheet Regeln hinzufügen.

Denken Sie abschließend daran, dass nichts gespeichert wird. Wenn Ihnen das Aussehen Ihrer Optimierungen gefällt, kopieren Sie Ihren Code irgendwo – in eine TXT-Datei oder in Ihre bevorzugte Notizanwendung -, damit Sie oder ein Designer / Entwickler ihn dem Stylesheet Ihrer Site hinzufügen können, um die Änderungen dauerhaft zu machen. Wenn Sie mehr über CSS erfahren möchten, schauen Sie sich einige Online-Spiele an, um die Fertigkeiten zu beherrschen.

Verbunden:

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Benutzerbild von Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Das könnte dich auch interessieren …

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x