So bearbeiten Sie eine Webseite in Chrome (oder einem anderen Browser)

• Chris Hoffman

  @chrisbhoffman

• 2. Oktober 2019, 08: 00 EDT

Webseiten sind nur Dokumente, die Ihr Webbrowser anzeigt. Aber was wäre, wenn Sie direkt auf einer Webseite eingeben könnten, um sie zu ändern? Sie können und brauchen keine Browsererweiterung—es ist eine Funktion, die in jeden modernen Browser integriert ist.

Diese Funktion nutzt das “ Dokument.DesignMode “ – Funktion, die Sie über die JavaScript-Konsole Ihres Webbrowsers aktivieren können., Es wurde kürzlich von Tomek Sułkowski auf Twitter hervorgehoben, aber es ist so cool, dass wir es mit unseren Lesern teilen müssen.

Mit dieser Funktion können Sie eine Webseite bereinigen, bevor Sie sie drucken, testen, wie Änderungen an einer Webseite aussehen, oder sogar nur Streich Leute. Es wird genau wie das Bearbeiten eines Word-Dokuments sein—kein Durcheinander mit HTML erforderlich.

Um diese Funktion zu aktivieren, besuchen Sie eine Webseite und öffnen Sie dann die Entwicklerkonsole., Um die Konsole in Google Chrome zu öffnen, klicken Sie auf Menü > Weitere Tools > Entwicklertools oder drücken Sie Strg+Umschalt+i.

Während wir hier Chrome als Beispiel verwenden, funktioniert diese Funktion auch in anderen modernen Browsern. So öffnen Sie die Konsole in anderen Browsern:

• Klicken Sie in Mozilla Firefox auf Menü > Webentwickler > Webkonsole oder drücken Sie Strg+Umschalt+K.,
• Klicken Sie in Apple Safari auf Safari > Einstellungen > Erweitert und aktivieren Sie „Menü in der Menüleiste anzeigen“.“Dann, klicken Sie Entwickeln > Zeigen JavaScript-Konsole.
• Klicken Sie in Microsoft Edge auf Menü > Weitere Tools > Entwicklertools oder drücken Sie F12 und dann auf die Registerkarte“ Konsole“.

Klicken Sie auf die Registerkarte“ Konsole „oben im Bedienfeld „Entwicklertools“., Geben Sie Folgendes in die Konsole ein und drücken Sie die Eingabetaste:

document.designMode = 'on'

Sie können die Konsole jetzt schließen, wenn Sie möchten, und die aktuelle Webseite bearbeiten, als wäre es ein bearbeitbares Dokument. Klicken Sie irgendwo, um den Cursor einzufügen und Text einzugeben. Verwenden Sie die Rücktaste oder die Löschtaste, um Text, Bilder und andere Elemente zu entfernen.

Dies ändert nur, wie die Webseite in Ihrem Browser angezeigt wird. Sobald Sie die Seite aktualisieren, sehen Sie das original erneut., Wenn Sie zu einer anderen Webseite oder Registerkarte wechseln, befindet sie sich erst im Entwurfsmodus, wenn Sie die Konsole öffnen und diese Zeile erneut eingeben.

Sie können sogar zurück in die Konsole gehen und den folgenden Befehl ausführen, um den Entwurfsmodus auszuschalten:

document.designMode = 'off'

Die Webseite kann nicht mehr bearbeitet werden, aber Ihre Änderungen bleiben erhalten, bis Sie die Seite das nächste Mal aktualisieren.