4 rzeczy, które możesz zrobić w konsoli przeglądarki, których żadne rozszerzenie nie może powielić

Większość ludzi w pewnym momencie nacisnęła F12 i otworzyła konsolę przeglądarki. To ściana tekstu i błędów płynąca w nieustannym strumieniu, wyglądająca jak pomieszany bałagan.

Chociaż konsola przeglądarki (znana również jako konsola deweloperska) wygląda bardzo myląco i tak, jakbyś nie powinien tam być, ma w zanadrzu kilka przydatnych sztuczek, których nie da się naprawdę powtórzyć w większości innych miejsc. Wynika to z faktu, że konsola przeglądarki jest w rzeczywistości aktywnym środowiskiem JavaScript działającym bezpośrednio w Twojej przeglądarce, co oznacza, że ma dostęp do strony w sposób, w jaki żadna wtyczka nigdy nie będzie miała.

Edytuj dowolny tekst na dowolnej stronie

Zabawa, ale nie na stałe

To jest jedna z bardziej zabawnych opcji. Możesz włączyć edycję na stronie prawie na każdej napotkanej stronie internetowej, zamieniając słowa i tekst według własnego uznania.

Naciśnij F12, aby otworzyć konsolę
Wybierz kartę Console
Wpisz document.designMode='on' i naciśnij Enter

Cała strona powinna stać się edytowalna. Możesz zmieniać tekst, edytować nagłówki, wymieniać ceny, fakty i inne informacje, i ogólnie grzebać w wszystkim.

Nic z tego nie jest trwałe; wszystko znika w momencie, gdy naciśniesz odśwież. Ta zabawna mała sztuczka jest naprawdę dla programistów do testowania zmian w tekście na stronie i tym podobnych, zanim zostaną udostępnione na żywo.

Możesz faktycznie zmieniać różne kolory i czcionki także z konsoli przeglądarki. Na przykład document.querySelector('h1').style.color='red' zmienia kolor nagłówka H1 na czerwony, podczas gdy document.querySelector('body').style.fontFamily='Georgia' zmieni czcionkę tekstu w treści na Georgia.

Znajdź wszystko, co strona internetowa przed tobą ukrywa

Czasami istnieje cała dodatkowa warstwa niewidoczna

Każda strona internetowa ma ukryte elementy — rzeczy, które przeglądarka załadowała, ale Ci nie pokazuje. Niektóre z nich są nudne: zwinięte menu, nieaktywne zakładki, elementy, które pojawiają się tylko wtedy, gdy wchodzisz w interakcję z czymś. Ale niektóre są ciekawsze niż to.

Uruchom to w konsoli:

document.querySelectorAll('[hidden], [style*="display: none"], [style*="visibility: hidden"]')

Zwraca listę wszystkiego na stronie, co jest obecnie niewidoczne. Klikaj wyniki w konsoli, aby móc je wszystkie sprawdzić. Pokazuje, co zawiera, jego klasę, a czasami także, dlaczego jest ukryte przed Twoim widokiem.

Teraz, nie będę udawał, że daje to zawsze interesujące wyniki. To, co znajdziesz, różni się znacznie w zależności od strony; przez większość czasu to po prostu rzeczy, które deweloperzy usunęli na potrzeby testu, ale jeszcze nie całkowicie skasowali, albo coś, co jest rozważane do wdrożenia, ale nie jest całkowicie skończone.

Jednak możesz również znaleźć treści, które są ukryte za sprawdzeniem logowania, które jest wymuszane wyłącznie przez CSS, a nie przez serwer, co oznacza, że treść już tam jest, już została załadowana, po prostu nie jest widoczna. Można ją odkryć, używając następującej linii:

document.querySelector('.paywalled-content').style.display = 'block'

Ponownie, to nie zadziała wszędzie, a większość stron internetowych w dzisiejszych czasach jest znacznie lepsza w rzeczywistym egzekwowaniu paywalli i innych bramek treści (tj. po stronie serwera). Jednak miękkie paywalle i zamazane treści czasami można w ten sposób wydobyć.

Inne funkcje, na które możesz natknąć się, to ukryte pola formularzy, niewidoczne piksele śledzące oraz warianty testów A/B, które obecnie nie są aktywne — okno na mechanizmy strony, których nie powinieneś widzieć od strony front-endowej.

Usuń elementy strony dla bieżącej sesji

To jest naprawdę przydatne

To jest jedna sztuczka w konsoli przeglądarki, którą zawsze będziesz pamiętać, ponieważ jest po prostu tak przydatna. Blokery reklam i blokery treści działają na podstawie gotowych list filtrów — blokują to, co zostało im polecone do blokowania. Konsola pozwala Ci pisać własną logikę na żywo, w odniesieniu do konkretnej strony przed Tobą.

document.querySelector('.cookie-banner').remove()

To coś, czego używałem przez lata, aby usuwać irytujące, uporczywe wyskakujące okienka plików cookie, które po prostu nie chcą zniknąć. A jestem osobą, która przegląda internet z włączonymi blokadami skryptów.

Problem polega na tym, że nie ma uniwersalnego selektora, ponieważ każda strona nazywa swój baner ciasteczkowy inaczej. Dlatego bloker reklam i blokery skryptów nie zawsze wykonują swoją pracę.

Kliknij prawym przyciskiem myszy baner ciasteczek
Naciśnij Inspect, aby otworzyć DevTools z wyróżnionym tym elementem
Zwróć uwagę na klasę lub identyfikator na nim
Przejdź do konsoli i uruchom document.querySelector('.whatever-the-class-is').remove()

Inną opcją jest użycie szerokiego przeglądu, aby uchwycić powszechnie stosowane konwencje nazewnictwa.

document.querySelector('[class*="cookie"], [class*="consent"], [id*="cookie"], [id*="gdpr"]')Podobnie jak powyżej, nie działa to za każdym razem, ale wystarczająco często spełnia swoją funkcję, więc warto tego używać.

Zobacz dokładnie, jakie dane o Tobie przechowuje strona

Cóż, większość danych

Każda odwiedzana przez Ciebie strona może przechowywać dane w Twojej przeglądarce: ciasteczka, localStorage, sessionStorage i tak dalej. Większość z nich to zwykłe dane sesji i preferencje, ale niektóre mogą być bardziej ujawniające, niż byś się spodziewał.

Otwórz konsolę na dowolnej stronie i uruchom:

console.log(localStorage

Może zwrócić ciekawe informacje, w zależności od strony. Kiedy uruchomiłem polecenie na stronie BBC Sport, zwróciło:

Storage {bbc-comments-hint-status: '{"firstSeen":1777283791259}', smphtml5_vbr: '1604', dashjs_audio_settings: '{"settings":{"lang":"en","audioChannelConfiguration":"2","role":"main"},"timestamp":1779795600000}', dashjs_video_bitrate: '{"bitrate":"146011.500","timestamp":1779795600000}', length: 4}

Co wygląda jak bełkot, ale w rzeczywistości mówi, że ma przechowywane cztery elementy, wraz z podpowiedziami w komentarzach, ustawieniami wideo, preferencjami audio i na tym mniej więcej wszystko.

Ale możesz uruchomić tę samą komendę na stronach z paywallami i podobnymi blokadami, aby ujawnić ukryte informacje.

Storage {_sp_non_keyed_local_state: '{"gdpr":{"_sp_v1_data":"1218095","_sp_v1_p":"695"},"usnat":{}}', likeTagList: '{}', pageview: '{"value":"1","expiry":1779369954289}', _sp_local_state: '{"gdpr":{"mmsCookies":["_sp_v1_ss=1:H4sIAAAAAAAAAI…mmsCookies":[],"propertyId":39759,"messageId":0}}', likeModList: '{}', …}

Ta strona śledzi liczbę przeczytanych przez Ciebie darmowych artykułów, zanim zostanie uruchomione wyłączenie paywalla, a także ujawnia swoje systemy zarządzania RODO i paywalla. W niektórych przypadkach możesz być w stanie manipulować wyzwalaczem darmowych artykułów...

Konsola przeglądarki nie jest dla każdego, ale jest o wiele bardziej przydatna, niż myślisz

Nie musisz być programistą, aby korzystać z konsoli przeglądarki. Posiada ona wiele funkcji, które możesz opanować i zacząć dostosowywać strony internetowe dokładnie tak, jak chcesz. Konsola wygląda po prostu onieśmielająco, ponieważ została stworzona dla osób, które spędzają w niej całe dni, a nie dlatego, że to, co potrafi, jest z natury skomplikowane.

Chodzi o to, że tak jest, kiedy naprawdę się w to zagłębisz, ale jest to również bardzo przydatne, aby pokazać nam trochę więcej o tym, jak działa internet i jak tworzone są strony internetowe. Większość z tego jest łatwa do obsługi, i pomaga zobaczyć, że większość tego, czego używamy, to prezentacja.

Więc następnym razem, gdy będziesz się zastanawiać, dlaczego coś nie działa prawidłowo, naciśnij F12 i dowiesz się więcej, niż myślisz.