4 věci, které můžete dělat v konzoli svého prohlížeče a které žádné rozšíření nedokáže napodobit

Většina lidí někdy stiskla F12 a otevřela konzoli prohlížeče. Je to zeď textu a chyb, které proudí nepřetržitým tokem a vypadají jako zmatečný chaos.

I když konzole prohlížeče (také známá jako konzole vývojáře) vypadá velmi matoucí a jako byste tam neměli být, má několik užitečných triků, které v jiných místech většinou nelze replikovat. Je to proto, že konzole prohlížeče je ve skutečnosti živé prostředí JavaScriptu běžící přímo ve vašem prohlížeči, což znamená, že má přístup k stránce způsobem, který žádné rozšíření nikdy mít nebude.

Upravte jakýkoli text na jakékoli stránce

Zábava, ale ne trvalá

To je jedna z těch zábavnějších. Můžete povolit úpravy přímo na stránce téměř na jakékoli webové stránce, kterou navštívíte, a měnit slova a text podle libosti.

1. Stiskněte F12 pro otevření konzole
2. Vyberte záložku Konzole
3. Zadejte document.designMode='on' a stiskněte Enter

Celá stránka by se měla stát upravitelnou. Můžete měnit text, upravovat nadpisy, měnit ceny, fakta a další informace a obecně si pohrát.

Nic z toho není trvalé; všechno zmizí ve chvíli, kdy stisknete obnovit. Tento malý zábavný trik je opravdu určen pro vývojáře, aby mohli otestovat změny textu na stránce a podobně, než budou zveřejněny.

Ve skutečnosti můžete cílit na různé barvy a písma také z konzole prohlížeče. Například document.querySelector('h1').style.color='red' změní zvýrazněný H1 na červenou, zatímco document.querySelector('body').style.fontFamily='Georgia' přepne text těla na písmo Georgia.

Najděte všechno, co vám webová stránka skrývá

Někdy je tam celá další vrstva mimo dohled

Každá webová stránka má skryté prvky — věci, které prohlížeč načetl, ale nezobrazuje vám je. Některé z nich jsou nudné: složená menu, neaktivní záložky, prvky, které se objeví pouze při interakci s něčím. Ale některé z nich jsou zajímavější než to.

Spusťte toto v konzoli:

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

Vrací seznam všeho na stránce, co je momentálně neviditelné. Procházejte výsledky v konzoli a můžete každou položku prozkoumat. To ukazuje, co obsahuje, její třídu a někdy proč je skrytá před vaším pohledem.

Teď nebudu předstírat, že to vždy přináší zajímavé výsledky. To, co najdete, se značně liší od webu k webu; většinou jsou to jen věci, které vývojáři odstranili pro testování, ale ještě je úplně nesmazali, nebo něco, co se zvažuje pro nasazení, ale ještě není úplně dokončeno.

Můžete však také narazit na obsah, který je skrytý za kontrolou přihlášení, která je vynucena pouze pomocí CSS a ne serverem, což znamená, že obsah je již tam, již načtený, jen není viditelný. Lze jej odkrýt pomocí následujícího řádku:

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

Toto opět nebude fungovat všude a většina webů je v dnešní době mnohem lepší v opravdu uplatňování paywallů a dalších omezení obsahu (tj. na straně serveru). Ale měkké paywally a rozmazaný obsah lze někdy takto získat.

Další funkce, na které můžete narazit, jsou skrytá pole formulářů, neviditelné sledovací pixely a varianty A/B testů, které momentálně nejsou aktivní — okno do mechanismu stránky, který byste neměli vidět z přední části.

Odstraňte prvky stránky pro vaši aktuální relaci

To je vlastně opravdu praktické

Toto je jeden trik s konzolí prohlížeče, který si vždy zapamatujete, protože je prostě tak užitečný. Blokátory reklam a blokátory obsahu fungují z přednastavených seznamů filtrů — blokují to, co jim bylo řečeno, aby blokovaly. Konzole vám umožňuje psát vlastní logiku, živě, proti konkrétní stránce před vámi.

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

Tohle je něco, co jsem během let používal k odstranění otravných, přetrvávajících vyskakovacích oken s cookies, která prostě nechtějí zmizet. A jsem někdo, kdo prohlíží web s povolenými blokátory skriptů.

Problém je v tom, že neexistuje univerzální selektor, protože každá stránka pojmenovává svůj cookie banner jinak. Proto adblockery a blokátory skriptů často nefungují tak, jak by měly.

1. Klikněte pravým tlačítkem na banner cookies
2. Stiskněte Inspektovat pro otevření DevTools s tímto prvkem zvýrazněným
3. Poznamenejte si třídu nebo ID na něm
4. Přejděte do konzole a spusťte document.querySelector('.whatever-the-class-is').remove()

Další možností je použít široké pokrytí k zachycení běžně používaných pojmenovacích konvencí.

document.querySelector('[class*="cookie"], [class*="consent"], [id*="cookie"], [id*="gdpr"]')Podobně jako výše, nebude to fungovat pokaždé, ale často to splní svůj účel, takže to stojí za použití.

Podívejte se přesně, jaká data o vás web ukládá

No, většina dat

Každá stránka, kterou navštívíte, může ukládat data ve vašem prohlížeči: cookies, localStorage, sessionStorage a tak dále. Většina z nich jsou běžná data relace a preference, ale některá z nich jsou odhalující víc, než byste čekali.

Otevřete konzoli na jakékoliv stránce a spusťte:

console.log(localStorage

Může vrátit některé zajímavé informace, v závislosti na webu. Když jsem spustil příkaz na webu BBC Sport, vrátilo se:

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 vypadá jako nesmysl, ale ve skutečnosti říká, že má uložené čtyři položky, spolu s komentářovými nápovědami, nastaveními videa, preferencemi zvuku, a to je vše.

Ale stejný příkaz můžete spustit na stránkách s paywally a podobnými blokacemi, aby se odhalily skryté informace.

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: '{}', …}

Tato webová stránka sleduje počet volných článků, které jste si přečetli, než aktivuje omezení přístupu za platbu, a zároveň zobrazuje své systémy správy GDPR a paywallu. V některých případech můžete být schopni manipulovat s aktivací počtu volných článků...

Konzole prohlížeče není pro každého, ale je mnohem užitečnější, než si myslíte

K používání konzole prohlížeče nemusíte být vývojář. Má celou řadu triků, se kterými se můžete seznámit a začít si přizpůsobovat webové stránky přesně podle svých představ. Konzole vypadá jen zastrašující, protože byla vytvořena pro lidi, kteří v ní tráví své dny, ne proto, že by to, co dokáže, bylo samo o sobě složité.

Myslím, že je to tak, když se do toho opravdu ponoříte, ale je také opravdu užitečné ukázat nám trochu víc o tom, jak web funguje a jak se webové stránky vyvíjejí. Většina toho je snadná na práci a pomáhá vám vidět, že většina toho, co používáme, je prezentace.

Takže příště, až se budeš divit, proč něco nefunguje správně, stiskni F12 a zjistíš víc, než si myslíš.