Jak edytować dowolną stronę internetową w Chrome (lub dowolnej przeglądarce)

Strony internetowe to tylko dokumenty wyświetlane w przeglądarce internetowej. Ale co by było, gdybyś mógł pisać bezpośrednio na dowolnej stronie internetowej, aby ją zmodyfikować? Możesz i nie potrzebujesz rozszerzenia przeglądarki – jest to funkcja wbudowana w każdą nowoczesną przeglądarkę.

Ta funkcja korzysta z funkcji „document.designMode”, którą można włączyć za pomocą konsoli JavaScript przeglądarki internetowej. Niedawno zaznaczył to Tomek Sułkowski na Twitterze, ale jest tak fajny, że musimy się nim podzielić z naszymi czytelnikami.

To uczucie, gdy po raz pierwszy odkryłeś „document.designMode” pic.twitter.com/bxA1otzCjN

– Tomek Sułkowski (@sulco) 27 września 2019 r

Możesz użyć tej funkcji, aby wyczyścić stronę internetową przed jej wydrukowaniem, przetestować, jak będą wyglądać zmiany na stronie internetowej, a nawet po prostu żartować ludziom. Będzie to przypominało edytowanie dokumentu Worda – nie trzeba mieszać w HTML.

Aby aktywować tę funkcję, odwiedź stronę internetową, a następnie otwórz konsolę programisty. Aby otworzyć konsolę w Google Chrome, kliknij menu> Więcej narzędzi> Narzędzia programistyczne lub naciśnij Ctrl + Shift + i.

Chociaż używamy Chrome jako przykładu tutaj, ta funkcja działa w innych nowoczesnych przeglądarkach, także. Oto jak otworzyć konsolę w innych przeglądarkach:

W przeglądarce Mozilla Firefox kliknij menu> Programista WWW> Konsola internetowa lub naciśnij Ctrl + Shift + K.
W Apple Safari kliknij Safari> Preferencje> Zaawansowane i włącz opcję „Pokaż menu rozwijania na pasku menu”. Następnie kliknij Opracuj> Pokaż konsolę JavaScript.
W przeglądarce Microsoft Edge kliknij menu> Więcej narzędzi> Narzędzia programistyczne lub naciśnij klawisz F12, a następnie kliknij kartę „Konsola”.

Kliknij kartę „Konsola” u góry panelu Narzędzi dla programistów. Wpisz następujące polecenie w konsoli i naciśnij Enter:

document.designMode="on"

Jeśli chcesz, możesz teraz zamknąć konsolę i edytować bieżącą stronę internetową, tak jakby była edytowalnym dokumentem. Kliknij gdzieś, aby wstawić kursor i wpisać tekst. Użyj klawiszy Backspace lub Delete, aby usunąć tekst, obrazy i inne elementy.

To tylko zmienia sposób wyświetlania strony internetowej w przeglądarce. Jak tylko odświeżysz stronę, ponownie zobaczysz oryginał. Jeśli przejdziesz do innej strony internetowej lub karty, nie będzie w trybie projektowania, dopóki nie otworzysz konsoli i nie wpiszesz tego wiersza ponownie.

Możesz nawet wrócić do konsoli i uruchomić następujące polecenie, aby wyłączyć tryb projektowania:

document.designMode="off"

Strona internetowa nie będzie już edytowalna, ale zmiany zostaną zachowane do następnego odświeżenia strony.