Normalerweise verwenden wir beim Bearbeiten einer Webseite ein bestimmtes Bearbeitungswerkzeug wie Adobe Dreamweaver, CoffeeCup, Bluefish oder eines der anderen Entwicklungswerkzeuge. Aber was ist, wenn wir nur ein Brainstorming durchführen oder etwas auf einer Live-Seite ausprobieren möchten? Wir könnten eine Kopie der Seite in unserem Tool Ihrer Wahl erstellen und damit herumspielen. Oder wir können es in unserem Webbrowser tun. In diesem Tutorial erfahren Sie, wie Sie eine Webseite in Ihrem Browser bearbeiten.
Firefox wird als Developer Tools bezeichnet und nennt das Feature Inspect Element, während Chrome es Inspect nennt. In beiden Fällen kann der Browser einen Blick hinter die Kulissen Ihres Designs werfen und sich den Code ansehen, der das Design steuert. Diese Funktion ist sehr bekannt und wird häufig verwendet. Was nicht ganz so bekannt ist, ist die Möglichkeit, Änderungen an diesem Code im laufenden Betrieb vorzunehmen.
Änderungen, die Sie vornehmen, werden nicht gespeichert und wirken sich nicht auf die Live-Wiedergabe aus. Wenn Sie die Seite nicht in Ihr Entwicklertool laden möchten, können Sie auf diese Weise experimentieren.
Bearbeiten Sie eine beliebige Webseite in Ihrem Browser
Dreamweaver und ähnliche Tools verfügen über einen integrierten Browser-Emulator, der simuliert, wie ein Design in verschiedenen Browsern aussehen wird. So gut sie auch sind, sie sind nicht immer genau und Sie stellen beim Start einer Site häufig fest, dass das, was in Ihrem Entwicklertool fantastisch aussah, in einem eigenständigen Browser etwas anders aussieht.
Normalerweise starten Sie die Site auf einem internen Webserver und testen sie in einem Browser, bevor Sie sie aus diesem Grund live starten. Wenn eine Seite bereits online ist oder Sie nur etwas ausprobieren möchten, müssen Sie sie nicht kopieren und in Ihr Entwicklungstool laden. Sie können einfach das Entwicklertool des Browsers verwenden.
Ich benutze Firefox, also zeige ich Ihnen, wie man das benutzt. Chrome ist jedoch ähnlich.
- Öffnen Sie eine Webseite, mit der Sie experimentieren möchten, in Ihrem Browser.
- Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wählen Sie Überprüfen.
Sie sollten sehen, wie sich Ihre Seite in zwei Teile aufteilt, wobei unten ein neuer Bereich mit Code angezeigt wird. Dieser Code ist die treibende Kraft der von Ihnen ausgewählten Seite. Über die Registerkarten oben auf der unteren Registerkarte können Sie auf verschiedene Seitenelemente zugreifen. Zum Beispiel sehen wir Inspector, Console, Debugger, Style Editor und so weiter in Firefox.
Wenn Sie mit dem Mauszeiger über die Zeilen im unteren Bereich fahren, werden verschiedene Bereiche der Webseite hervorgehoben. Die Codezeile, in der Sie sich während der Hervorhebung befinden, ist der Code, der diesen Teil der Seite beeinflusst.
- Wenn Sie das Erscheinungsbild der Seite ausprobieren möchten, versuchen Sie es mit dem Stil-Editor.
- Wenn Sie mit der Funktionsweise der Seite herumspielen möchten, versuchen Sie es mit Konsole oder Eingabehilfen.
- Wenn Sie Fehler beseitigen oder ein Problem lösen möchten, verwenden Sie die Konsole oder den Debugger
Leistung ist nützlich für SEO vor Ort, aber Speicher, Netzwerk und Speicher werden nicht so oft verwendet.
Denken Sie daran, dass Sie in den Entwicklertools so viel herumspielen können, wie Sie möchten, und dass dies keine Auswirkungen auf die Site hat. Etwaige Änderungen werden nur an der Darstellung der Seite in Ihrem individuellen Browser vorgenommen, Sie haben keinen Einfluss auf die Website selbst. Sobald Sie das Tool schließen, gehen alle Änderungen verloren.
Änderungen an einer Seite vornehmen
Jetzt wissen Sie, dass Sie alles ändern können, was Sie möchten, ohne die eigentliche Website zu beeinträchtigen. Lassen Sie uns ein wenig Spaß haben. Suchen Sie auf der Seite ein Element, das Sie bearbeiten möchten. Sie können eine Schriftart, eine Schriftfarbe, ein Hintergrundbild oder was auch immer Sie möchten ändern. In diesem Beispiel werde ich die Schriftfarbe der Banner-Überschrift ändern.
- Klicken Sie mit der rechten Maustaste auf das genaue Element, das Sie ändern möchten, und wählen Sie Überprüfen aus.
- Markieren Sie die Zeile entweder mit 'title' oder 'H1', damit der Text im oberen Bereich hervorgehoben wird.
- Navigieren Sie zu den beiden linken Fenstern und suchen Sie die Schriftfarbe.
- Ändern Sie den Wert in einen anderen Wert oder wählen Sie den Farbpunkt aus, um einen Selektor zu verwenden.
Ihre Änderung wird dynamisch angezeigt, sobald Sie die Änderung abgeschlossen haben. Sie können Farbe, Größe, Schriftart, Hintergrund und alles über die Schriftart ändern. Sie können die Arbeit nicht speichern, aber Ihre Änderungen bleiben für diese Sitzung erhalten.
Sie können alles an der Seite ändern, was ideal ist, wenn Sie eine Idee haben und diese schnell prüfen möchten, bevor Sie alle Ihre Entwicklungs-Apps starten. Sie müssen sich nur merken, welche Änderungen Sie vorgenommen haben und wo, da Sie sie hier nicht speichern können. Sie müssen einen Screenshot machen oder die Änderungen aufzeichnen und in Ihren Entwicklertools replizieren, damit sie erhalten bleiben.
Das Bearbeiten einer Webseite in Ihrem Browser ist eine gute Möglichkeit, um mit Seiten zu experimentieren oder herumzuspielen. Es ist auch eine gute Möglichkeit, ein wenig über die Webentwicklung zu lernen, ohne sich in teure Entwicklertools einkaufen zu müssen. Jetzt weißt du wie, geh und spiele!
