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

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

Diese Funktion nutzt die Funktion "document.designMode", 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 vor dem Drucken bereinigen, testen, wie Änderungen an einer Webseite aussehen, oder einfach nur Streiche spielen. Es ist wie beim Bearbeiten eines Word-Dokuments - kein Durcheinander mit HTML erforderlich.

Um diese Funktion zu aktivieren, besuchen Sie eine Webseite und öffnen Sie die Entwicklerkonsole. Klicken Sie zum Öffnen der Konsole in Google Chrome 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 "Entwicklungsmenü in Menüleiste anzeigen". Klicken Sie dann auf Entwickeln> JavaScript-Konsole anzeigen.
  • Klicken Sie in Microsoft Edge auf Menü> Weitere Tools> Entwicklertools oder drücken Sie F12 und klicken Sie dann auf die Registerkarte "Konsole".

Klicken Sie oben im Bereich "Entwicklertools" auf die Registerkarte "Konsole". Geben Sie Folgendes in die Konsole ein und drücken Sie die Eingabetaste:

document.designMode = 'on'

Sie können jetzt die Konsole schließen, wenn Sie möchten, und die aktuelle Webseite so bearbeiten, als wäre es ein bearbeitbares Dokument. Klicken Sie auf eine Stelle, um den Cursor einzufügen und Text einzugeben. Verwenden Sie die Rücktaste oder die Entf-Taste, 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 sich diese erst im Entwurfsmodus, wenn Sie die Konsole öffnen und diese Zeile erneut eingeben.

Sie können sogar zur Konsole zurückkehren und den folgenden Befehl ausführen, um den Entwurfsmodus zu deaktivieren:

document.designMode = 'aus'

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