Chrome DevTools jsou jedním z klíčových důvodů, proč vývojáři s oblibou používají právě tento prohlížeč. Ostatní prohlížeče jsou pro ně často nezajímavé.
Většina z nás ale využívá jen zlomek jeho funkcí, přičemž si nevšímáme mnoha dalších skvělých možností, které byly přidány bez velkého upozornění.
Pojďme se podívat na některé z těchto skrytých pokladů!
Každý preferuje jiný operační systém, hardware, typ zařízení, jeho tvar a podobně. Jedna věc je však společná – téměř všichni používají Chrome, a to výhradně! Zdá se, že válka prohlížečů skončila a Chrome z ní vyšel jako jasný vítěz.
Uživatelé Windows často používají výchozí prohlížeč pouze pro stažení Chrome a následně se o něj kompletně opírají, ignorujíce všechna „doporučení“ Windows. Stejný trend platí i pro produkty Apple (zejména MacBooky a zařízení s větší obrazovkou), kde se uživatelé i vývojáři vyhýbají Safari, a to i přes veškerou snahu a reklamní masáž Applu.
A pokud náhodou Chrome na nějakém zařízení neběží, je velmi pravděpodobné, že tam najdeme jeho odvozenou verzi, jako je Brave nebo Vivaldi. I když technicky tyto prohlížeče nejsou založeny na Chromiu, to je už jiná debata. Běžní uživatelé mohou tyto alternativy preferovat z ideologických nebo specifických důvodů, ale pro vývojáře je Chrome stále jediná volba.
Dokonce i jeho vysoká spotřeba paměti je tolerována. Důvod je prostý: Chrome DevTools.
Zdroj obrázků: Oficiální dokumentace Chrome DevTools
Pokud čtete tento článek, pravděpodobně jste zkušený uživatel, kutil, webový vývojář nebo něco podobného. Proto není nutné vám představovat DevTools, jak se otevírají, jaké mají funkce atd.
Pojďme se tedy rovnou podívat na některé méně známé, ale překvapivě užitečné funkce Chrome DevTools.
Režim Návrhu
Vývojáři často potřebují zkontrolovat prvek na stránce a upravit jeho HTML kód, aby si ověřili vzhled nebo otestovali změny.
Přímá úprava HTML v DevTools však není vždy ideální – probírání se hromadou tagů, hledání správné otevírací/zavírací závorky a řešení nadbytečných mezer při úpravě textu (které ve finálním dokumentu nejsou vidět), to jsou jen některé z problémů. Je to ještě horší, pokud jste designér a nechcete se brodit v kódu.
Zde je snímek obrazovky z jedné ze stránek tohoto webu (etechblog.cz):
Hluboce vnořené HTML a komplikované CSS třídy jsou typické pro moderní webové stránky. Právě v takových situacích není práce s DevTools úplně komfortní. 🤭
Ale DevTools mají funkci nazvanou Režim návrhu, která vám může v mnoha případech ušetřit problémy. S režimem návrhu (mimochodem, to není oficiální název; lidé ho tak nazývají kvůli tomu, jak se aktivuje a co dělá – brzy se k tomu dostaneme!) můžete měnit stránku vizuálně a v reálném čase, stejně jako v textovém editoru nebo tabulce! Háček je v tom, že tato funkce není ve výchozím nastavení aktivní a její aktivace může být pro ne-vývojáře trochu matoucí.
Nicméně, je to celkem jednoduché. Stačí postupovat podle následujících instrukcí. Pro někoho to bude směšně jednoduché, pro jiného možná trochu složitější:
- Ujistěte se, že je webová stránka, kterou chcete upravovat, načtená a aktivní v prohlížeči.
- Otevřete panel DevTools obvyklým způsobem (klávesové zkratky, kliknutím myší atd.). Já osobně používám klávesovou zkratku Opt + Cmd + I na Macu.
- S otevřenými DevTools přejděte na záložku „Konzole“. Někteří z vás si možná klepou na čelo, že to vypadá tak samozřejmě, ale vzpomeňme si na ty, kteří s konzolí a JavaScriptem bojují (z jakéhokoli důvodu).
- Klikněte na první řádek u kurzoru, objeví se výzva k zadání, kde můžete napsat JavaScriptový kód (viz níže screenshot).
- Nyní je potřeba napsat krátký JavaScript kód. Nemusíte se bát, je jednoduchý: document.designMode = „on“. Můžete kód zkopírovat, vložit, nebo napsat, pokud si troufáte. Dbejte na to, aby se formátování nezkopírovalo, potřebujeme pouze čistý text.
- Stiskněte Enter/Return.
„A to je vše?!“
Ano, to je vše!
Nyní můžete libovolně editovat stránku, jako by to byl textový dokument. Podívejte se na video, kde živě upravuji web Spotify pomocí režimu návrhu:
Režim návrhu, jakkoliv je zajímavý, není zázračným řešením. Nemůžete například snadno kopírovat a vkládat tlačítka nebo měnit jejich vzhled. Funkcí oproti plnohodnotnému vizuálnímu editoru stránek je omezeně. Nicméně je skvělý pro případy, kdy potřebujete obsah měnit vizuálně a v reálném čase.
Dá se odůvodněně předpokládat, že vývojáři Chrome testují, jak dobře je tato funkce přijata. Pokud se ujme a najde silné uplatnění, dá se očekávat, že brzy přibydou i další možnosti úprav! 🤞🏻🤞🏻
Simulace Síťových Podmínek
Záložka Síť v Chrome DevTools je možná nejpoužívanější (nemám na to sice data, ale jako webový vývojář trávím v záložce konzole 20-30 % času a zbytek v záložce Síť). Poskytuje informace o požadavcích ze stránky, jejich typu, hlavičkách, stavu, průběhu stahování (obrázky, CSS) a době načítání. Není divu, že je tak často používána.
Přesto se snadno může stát, že přehlédneme funkci, o které se bavíme. Možná jste si nevšimli neškodného rozbalovacího seznamu, kde je uvedeno: Online.
Kliknutím na toto získáte rozbalovací nabídku s různými možnostmi, které vám umožní snížit rychlost sítě: Rychlé 3G, Pomalé 3G, Offline atd. Možností využití je spousta, ale nejčastěji se tato funkce používá pro testování výkonu webu na pomalé síti nebo chování webových aplikací v režimu offline (pokud je aplikace pro offline režim připravena).
Podívejme se na to. Nastavím síť na „Pomalé 3G“ a znovu načtu stejnou stránku z předchozího screenshotu. Všimněte si, že na předchozím screenshotu se při mém současném připojení (40 Mbps broadband) většina zdrojů stahuje za méně než 100 milisekund.
Teď se podívejme, co s tím udělá Pomalé 3G.
Rozdíl je značný!
Všimněte si, že doba načítání zdrojů se nyní pohybuje mezi 5-10 sekundami. Stránky se kompletně načetly za 17,25 sekund! Ano, vím, co si myslíte, ale musíte vzít v úvahu, že při pomalém 3G bude načítání moderní webové stránky trvat několik sekund. Otázka rychlého načítání na pomalých sítích je spíše obchodní rozhodnutí, kde zisky musí odůvodnit úsilí.
Všimněte si také ikony varování na záložce Síť. Chrome vám takto připomíná, že jste provedli nestandardní změnu a možná byste ji měli resetovat, pokud nevíte, co děláte.
Interaktivní Výběr Barev
Kontrola prvků DOM v DevTools je něco, co děláme téměř každý den. Také jsme zvyklí na zobrazení podrobností CSS a víme, že je můžeme upravovat a hned vidět výsledky.
Malá vymoženost, která se mezi tím skrývá, je to, že při kliknutí na vlastnost barvy CSS se objeví známé rozhraní pro výběr barvy!
Není to jednoduchý základní výběr barev. Umožňuje vám ovládat průhlednost, měnit barevné systémy, vybírat barvu přímo ze stránky a mnoho dalšího.
Při experimentování s barvami na webu nemusíte hádat správný odstín. Mnoho lidí rádo navrhuje webové stránky přímo v prohlížeči, pro ně jsou podobné funkce velkým pomocníkem! 🙂
Sledování Prvků Na Stránce
Často se stává, že potřebujeme vědět, co se děje s konkrétním prvkem, který nás zajímá. Obzvlášť, když se používá jQuery v netriviální kódové základně. Obsluhy událostí a logika jsou rozesety všude a hledání chyby může být noční můrou.
Naštěstí pro to má Chrome DevTools užitečnou funkci. Bude sledovat vybraný prvek a události zaznamenávat do konzole. Má to ale malý háček: tato funkce neumožňuje výběr prvků na základě CSS tříd. Takže jQuery $(“#email”) fungovat nebude. 🙂
Podívejme se, jak to zprovoznit. Začneme jednoduchou „kontrolou prvku“ pomocí inspektoru DevTools. Je to stejný nástroj, který používáme každý den.
Na obrázku níže jsem použil inspektora ke zvýraznění textového pole. Zvýrazněním nemyslím, že je prvek zvýrazněný na stránce (jak vidíte, není), ale že je vybrán kurzorem a v DevTools je zvýrazněn odpovídající HTML kód.
Vybraný prvek se tak stane dostupným jako speciální JavaScriptová proměnná $0. Pak musím dát pozor, abych nekliknul myší jinam v okně prohlížeče (hlavně ne na HTML kód) a přejdu do konzole. Tam připojím posluchač událostí pro textové pole pomocí: monitorEvents($0, ‚mouse‘). Část ‚mouse‘ říká Chromu, že chci sledovat jen události spojené s myší.
Po stisknutí Enter/Return se monitorování aktivuje a když najedu na textové pole myší nebo kliknu, zapíšou se události do konzole jako JavaScriptové objekty:
Jak vidíte na screenshotu, zachytily se různé události myši, když jsem kliknul na prvek, napsal jméno a pak myší odjel (psaní, tedy události klávesnice, nebyly zachyceny). Samotné události jsou objekty JavaScriptu, každý s obrovským množstvím informací. Rozbalil jsem objekt události „click“ a jeho vlastnosti se nevešly na jeden snímek obrazovky!
Doporučuji vám tuto funkci hned vyzkoušet, ušetří vám v budoucích projektech spoustu starostí!
Přehledy Výkonu Webových Stránek
Výkon webových stránek je v dnešní době klíčový. I malé zlepšení výkonu se promítá do vyšších pozic v SEO a do spokojenosti uživatelů. Jak ale poznat, které části webu vyžadují pozornost a které jsou v pořádku?
Musíte si najmout tým odborníků a trpělivě několik dní čekat?
V některých případech ano, ale naštěstí v ostatních případech nám pomůže Chrome DevTools. V nejnovějších verzích Chrome (konec roku 2020) najdete v DevTools záložku Lighthouse. Dříve se jmenovala Audity, což je název, který můžete ještě najít v oficiální dokumentaci. Lighthouse byl dříve web pro bezplatnou kontrolu výkonu webu, ale Google ho ukončil (bez vysvětlení). Stejná funkce se naštěstí objevila i v DevTools.
Pro vygenerování přehledu výkonu stačí po načtení stránky, kterou chcete otestovat, stisknout jediné tlačítko:
V pravé části snímku obrazovky vidíte nastavení, která vám umožní ovlivnit to, jaké informace chcete (a co přesně chcete testovat). Jakmile budete s nastavením spokojeni, klikněte na velké modré tlačítko. Za pár sekund dostanete přehled:
Čísla na screenshotu ukazují celkové skóre pro každou kategorii. Kategorie Progresivní webové aplikace (PWA) je zašedlá, protože tento web nemá PWA. Je to obsáhlá zpráva, jak si můžete všimnout podle velikosti posuvníku.
Takto vypadá část sekce o výkonu:
Neříkám, že Lighthouse a jeho návrhy jsou jediné správné řešení, ale jsou velmi užitečné. Majitelé webových stránek a vývojáři mají často jen mlhavou představu o problémech a jejich řešení.
Sám jako webový vývojář se v tom občas ztrácím, protože výkon a testování jsou specializované oblasti. Lighthouse je skvělý, nedoceněný nástroj, který je nyní součástí Chrome DevTools a je velmi užitečný pro majitele firem i vývojáře/sysadminy.
Možnost Editovat Kód
Záložka Zdroje v DevTools umožňuje přístup k souborům načteným webem. Můžeme také upravovat kód, ukládat úryvky atd. To není pro webové vývojáře nic nového. DevTools má ale také několik drobností, které usnadňují život vývojářům zvyklým na své oblíbené IDE.
DevTools používá některé dobře známé klávesové zkratky, které vám ušetří čas. Například Ctrl + D (nebo Cmd + D na Macu) se používá pro označení více výskytů slova. Nebo můžete podržet Ctrl (nebo Cmd na Macu) a klikat na více míst v kódu pro vytvoření více kurzorů. Podívejte se na video:
Pokud se vám to líbí, podívejte se do oficiální dokumentace, kde najdete všechny funkce pro úpravu kódu, které DevTools nabízí.
Řízení Stavu Prvku DOM
Někdy při testování nebo debugování je chování, které sledujeme, dostupné pouze v určitém stavu prvku. To může být časově náročné. Pro mě je to stav „hover“, kdy jsem trávil spoustu času snahou načasovat hover akci nebo přidávat dočasné CSS atd.
Naštěstí Chrome DevTools nabízí snadný způsob, jak změnit stav vybraného prvku. Možnost je dostupná po kliknutí pravým tlačítkem myši na prvek (v záložce Prvky), ale je snadné ji přehlédnout kvůli množství funkcí:
Ano, je to opravdu tak jednoduché!
Nyní nemusíte přidávat do kódu podmíněnou logiku pro testování, psát další CSS nebo dělat složité triky, když chcete pozorovat prvek v jiném stavu.
Panel Nástrojů
Poslední, ale neméně důležitá je funkce Panel Nástrojů. Je to další z těch skrytých, ale neuvěřitelně užitečných funkcí, kterou lze vyvolat pouze pomocí klávesových zkratek. Jak název napovídá, panel nástrojů není jeden nástroj, ale řídicí panel s téměř všemi funkcemi DevTools. Protože existuje hodně funkcí, nechybí ani vyhledávací panel.
Pro aktivaci Panelu nástrojů stiskněte Ctrl + Shift + P (nebo Cmd + Shift + P pro uživatele Mac) v DevTools:
Panel nástrojů je plný možností a překvapení. Věděli jste například, že můžete pořídit screenshot přímo z DevTools?
Vsadím se, že ne. Zkuste do vyhledávacího pole zadat „screenshot“ a uvidíte:
Můžete si vybrat z několika možností pro pořízení screenshotu, včetně možnosti pro vybraný uzel DOM! Prozkoumejte Panel nástrojů a uvidíte sami!
Pokud potřebujete vzdáleně pořídit screenshot webové stránky, vyzkoušejte nástroj etechblog.cz Screenshot.
Závěr
Samotný Chrome je bohatý na funkce, ale DevTools jsou oblastí, kde opravdu exceluje. Jak jste viděli v tomto článku, existuje mnoho dobře ukrytých funkcí – a některé jsou i na očích – o kterých většina uživatelů neví. Proč jsou tyto funkce skryté?
Myslím si, že některé z nich jsou velmi experimentální (jako režim návrhu) a vývojáři Chrome je nechtějí zpřístupnit běžným uživatelům. U ostatních funkcí si myslím, že je to problém s nadbytkem informací: pokud existuje řekněme 120 funkcí, některé z nich mají další podfunkce, je prakticky nemožné navrhnout správné uživatelské rozhraní pro takový scénář. Google také nemá dlouhodobě nejlepší reputaci co se týče UX svých produktů. 🤷🏻♂️
Doufám, že vám byl tento článek užitečný. A co je důležitější, doufám, že vám tento článek dal představu o tom, co se kde skrývá, abyste příště věděli, kam se podívat, když budete něco hledat. 😆