So bearbeiten Sie Webseiten in Safari mit Inspect Element

Mit seinem Inspect Element-Tool können Sie mit Safari am Front-End-Code jeder Webseite herumbasteln. Wenn Sie testen möchten, wie eine Seite mit verschiedenen Texten oder Bildern aussehen würde, können Sie dies tun, indem Sie ihren Code mit Inspect Element ändern.

Dies ist eine einfache Anleitung für Anfänger, die erklärt, wie Sie mit Inspect Element in Safari experimentieren können, um den Text und die Bilder einer Website mit minimalen Programmierkenntnissen zu bearbeiten.

Was ist Element prüfen?

Inspect Element ist ein Entwicklertool. Es ist in Safari verfügbar, aber auch in anderen Webbrowsern wie Chrome, Firefox und Edge. Mit Inspect Element können Sie hinter den Vorhang einer Website blicken, um ihren Front-End-Code wie HTML und CSS zu enthüllen. Es gewährt Ihnen jedoch keine Sichtbarkeit des Back-Ends wie seiner Datenbanken.

Sie können diesen Code nicht nur sehen, sondern auch optimieren. Das bedeutet, dass Sie das Erscheinungsbild einer Website ändern können. Sie können ein Bild ersetzen, Text umformulieren, eine andere Schriftart verwenden, das Farbschema ändern und vieles mehr. Diese Bearbeitungen sind jedoch lokal. Sie werden niemandem außer Ihnen erscheinen; Sie verschwinden, sobald Sie die Seite aktualisieren oder sich von ihr entfernen.

Warum sollten Sie Inspect Element verwenden?

Inspect Element ist ein großartiges Tool, wenn Sie ein angehender Webentwickler sind. Sie können den Code, der Ihre Lieblingswebsite antreibt, buchstäblich sehen und ihn in einer realen Umgebung nach Ihren Wünschen optimieren. Da sind viele unterhaltsame Einblicke, die Sie durch die Verwendung von Inspect Element gewinnen können.

Geschäftsinhaber können sich beispielsweise Schlüsselwörter ansehen, die auf der Website eines Mitbewerbers enthalten sind, oder Designer können dies tun Verwenden Sie Inspect Element, um eine Schriftart zu identifizieren die sie attraktiv finden oder um schnell ein anderes Farbschema auf ihrer Website zu testen.

Im Moment konzentrieren wir uns auf die Bearbeitung der Grundlagen einer Webseite mit Inspect Element.

So greifen Sie auf Inspect Element in Safari zu

Sie können Inspect Element auf Safari über das Entwicklermenü öffnen:

1. Safari öffnen.
2. Klicken Safari in der oberen Menüleiste.
3. Wählen Sie aus dem Dropdown-Menü aus Einstellungen.
4. Wähle aus Fortschrittlich Möglichkeit.
5. Aktivieren Sie das Kästchen mit der Aufschrift Menü „Entwickeln“ in der Menüleiste anzeigen.

Nachdem Sie diese Option ausgewählt haben, können Sie Rechtsklick auf einer Webseite und wählen Sie aus Element prüfen. Alternativ können Sie auswählen Entwickeln in der Menüleiste und dann Webinspektor anzeigen.

So finden Sie Webelemente in Inspect Element

Um mit der Bearbeitung eines Elements zu beginnen, Rechtsklick was Sie bearbeiten möchten und klicken Sie darauf Element prüfen. Dadurch wird das Entwicklerfenster geöffnet, in dem der relevante Abschnitt hervorgehoben ist. Möglicherweise stellen Sie fest, dass das bestimmte Element, das Sie elementieren möchten (z. B. das Bild oder der Text), ausgeblendet ist. Um es zu finden, verwenden Sie die Pfeile auf der linken Seite, um die verschachtelten Abschnitte zu erweitern.

Um Ihre Auswahl einzugrenzen, klicken Sie auf Zielsymbol aus der Symbolleiste Element prüfen. Wenn Sie nun durch den Code navigieren, wird dieser Abschnitt auf der Website hervorgehoben. Oder Sie können Ihren Cursor verwenden, um einen Abschnitt auf der Website zu lokalisieren. Dies ist praktisch, wenn Sie in einem überfüllten Bereich einer Webseite auf etwas Bestimmtes eingehen möchten.

So bearbeiten Sie den Text einer Website mit Inspect Element

Um einen Textabschnitt bearbeitbar zu machen, nachdem Sie ihn im Quellcode einer Website gefunden haben, Doppelklick es. Sie können neuen Text direkt in den Code eingeben oder vorhandenen Text löschen. Wenn die Bearbeitung für eine bestimmte Textzeichenfolge abgeschlossen ist, drücken Sie Eingeben, und der Text auf der Webseite ändert sich.

Es ist wirklich so einfach! Dies funktioniert nur dann nicht, wenn der Text tatsächlich Teil eines Bildes ist, z. B. eines Logos.

So bearbeiten Sie die Bilder einer Website mit Inspect Element

Während Ihnen Bilder im Frontend visuell erscheinen, erscheinen sie im Website-Code als Links. Du kannst Rechtsklick und Bild und wählen Element prüfen um dorthin zu springen, wo sich dieses Bild im Code befindet. Website-Bilder haben normalerweise die Dateierweiterungen JPG, GIF oder PNG, wenn auch nicht ausschließlich.

Doppelklick diese Bildzeichenfolgen und Sie können sie bearbeiten oder auf Wunsch einfach auf Ihrem System speichern. Wenn Sie das Bild ersetzen möchten, tauschen Sie es gegen eine Ersatzbild-URL aus. Oder Sie können die Codezeichenfolge vollständig löschen, um das Bild aus der Ansicht zu entfernen.

Tauchen Sie mit Safari in Websites ein

Mit dem Inspect Element-Tool von Safari können Sie den Code, der Text und Bildern entspricht, leicht finden und ändern, was so einfach ist wie das Austauschen einer Text- oder URL-Zeichenfolge. Sobald Sie mit der Bearbeitung einer Website mit Inspect Element fertig sind, aktualisieren Sie einfach die Seite und alles wird wieder normal sein.

So ändern Sie den Benutzeragenten und Trick-Websites Ihres Browsers

Lesen Sie weiter

Über den Autor