Chrome DevTools je jedním z největších důvodů, proč se vývojáři odmítají dotýkat jakéhokoli jiného prohlížeče.
Ale většina z nás používá jen hrstku funkcí a zapomíná na mnoho dalších ohromujících funkcí, které se uvolňují potichu.
Pojďme odhalit některé z těchto skrytých drahokamů!
Každý má svůj oblíbený operační systém, hardwarovou platformu, typ zařízení, tvar zařízení atd. Jedno je však všem společné — používají prohlížeč Chrome a pouze prohlížeč Chrome! Myslím, že lze s jistotou říci, že války prohlížečů skončily a Chrome přesvědčivě zvítězil.
Uživatelé systému Windows používají výchozí prohlížeč pouze ke stažení prohlížeče Chrome a poté jej používají, přičemž ignorují všechna „doporučení“ systému Windows. Totéž platí pro zařízení společnosti Apple (zejména MacBooky a zařízení s větší obrazovkou), kde se uživatelé a vývojáři vyhýbají Safari, a to navzdory mnoha silným tvrzením a taktikám společnosti Apple.
A pokud na zařízení není spuštěn Chrome, je vysoká pravděpodobnost, že na něm běží vedlejší produkt kompatibilní s Chrome, jako je např Statečný nebo Vivaldi. Ano, vím, technicky tyto prohlížeče nejsou založeny na Chrome, ale to je jiná diskuze. Průměrný uživatel může používat tyto jiné prohlížeče z ideologických nebo speciálních důvodů, ale pokud jde o vývojáře, není v dohledu žádný jiný prohlížeč než Chrome.
I to, že je to monstrum požírající paměti, je ignorováno. Důvod je jednoduchý: Chrome DevTools.
Zdroj obrázků: Oficiální dokumenty Chrome DevTools
Nyní, pokud čtete tento článek, je bezpečné předpokládat, že jste buď zkušený uživatel, kutil, webový vývojář nebo něco podobného. Nikdo z nás proto nepotřebuje představovat DevTools, jak je otevřít, jeho různé funkce atd.
Místo toho, aniž bychom ztráceli čas, se rovnou ponořme do některých méně známých, ale překvapivě užitečných funkcí Chrome DevTools.
Table of Contents
Režim návrhu
Jednou z věcí, které vývojáři běžně dělají, je kontrola prvku na stránce a poté úprava jeho HTML, aby si něco zobrazili nebo otestovali účinek změny.
Práce s HTML přímo v DevTools však není úplně nejhladší věc – brodit se polévkou tagů, napínat oči ve snaze najít správnou otevírací/uzavírací závorku a potýkat se s směšným množstvím mezer při úpravách textu (bílé znaky, které v dokumentu, který vidíte, jasně chybí), jsou některé z problémů, se kterými se můžete vypořádat. Je to ještě horší, pokud jste designér a nechcete probírat nepořádek.
Zde je snímek obrazovky z jedné ze stránek tohoto webu (etechblog.cz):
Hluboce vnořené HTML a tajemné, matoucí třídy CSS jsou typické pro všechny dnešní netriviální webové stránky, což je místo, kde je zkušenost s DevTools přinejmenším suboptimální. 🤭
Existuje však funkce DevTools nazvaná Design Mode, která může v mnoha případech zmírnit bolest. Pomocí režimu návrhu (mimochodem to není oficiální název; lidé jej pojmenovali jen kvůli tomu, jak se aktivuje a co dělá – nebojte se, brzy se dočkáme!) se změní stránku lze vytvořit vizuálně a živě, stejně jako editaci tabulkového procesoru nebo textového editoru! Jediný háček je v tom, že tato funkce není ve výchozím nastavení zapnutá a její aktivace je trochu bolehlav, zvláště pro nevývojáře.
V každém případě je to docela jednoduché; vše, co musíte udělat, je postupovat podle níže uvedených pokynů. V závislosti na tom, kde na křivce uživatelské náročnosti sedíte, to může být směšně snadné nebo středně obtížné. Co dělat:
- Ujistěte se, že je načtena webová stránka, kterou chcete upravit, a že si ji právě prohlížíte (to znamená, že dotyčná karta je aktivní).
- Otevřete panel DevTools způsobem, který obvykle děláte (klávesové zkratky, kliknutí myší, cokoliv). Rád používám klávesové zkratky a na Macu to udělám Opt + Cmd + I.
- Nyní s otevřenými nástroji DevTools přejděte na kartu s názvem „Konzola“. Někteří z vás možná koulí očima nad tím, jak hloupé a samozřejmé to všechno vypadá, ale hej, vzpomeňme také na (stovky?) tisíce lidí, kteří tam venku bojují při práci s konzolí prohlížeče a JavaScriptem (z jakéhokoli důvodu ).
- Klikněte na první řádek vedle kurzoru, čímž se zobrazí výzva k zadání, a nyní tam můžete napsat kód JavaScript (viz snímek obrazovky o něco níže).
- Nyní musíme napsat nějaký JavaScript kód. Neznepokojujte se, protože to, co potřebujete napsat/zapsat, je velmi krátké a jednoduché: document.designMode = „on“. Můžete také zkopírovat a vložit kód z této stránky (pokud tak učiníte, ujistěte se, že se nezkopíruje formátování – potřebujeme pouze prostý text), nebo pokud jste si jisti, napište jej.
- Stiskněte Enter/Return.
„A je to??!“
Jo, to je vše!
Nyní můžete libovolně upravovat stránku, jako by to byl dokument. Podívejte se na toto ukázkové video, kde živě upravuji web Spotify pomocí režimu návrhu:
Funkce Design Mode, jakkoli vzrušující, není stříbrná kulka; nemůžete například snadno kopírovat a vkládat tlačítka, měnit jejich vzhled a podobně. Skutečný počet věcí, které dokáže ve srovnání s vysněným vizuálním editorem webových stránek, je velmi nízký; nicméně řeší případy použití, kdy je třeba obsah měnit vizuálně a za běhu.
To znamená, že není příliš přitažené za vlasy tvrdit, že lidé z Chrome testují, jak dobře je tato funkce přijímána; pokud najde dobrý příjem a silný případ použití, je rozumné očekávat, že brzy budou následovat výkonnější možnosti úprav! 🤞🏻🤞🏻
Simulace síťových podmínek
Karta Network v Chrome DevTools je možná nejpoužívanější (samozřejmě na ní nemám data, ale jako webový vývojář mám tendenci používat kartu Console možná 20–30 % času a po zbytek času karta Síť). Poskytuje nám nejrůznější informace o požadavcích ze stránky, jejich typu, metadatech/záhlaví, stavu, průběhu stahování aktiv (obrázky, šablony stylů atd.), dobách načítání a tak dále. S tak neuvěřitelnou užitečností není divu, že karta Síť je nejčastější.
A přesto je snadné minout funkci, o které diskutujeme; možná jste si nevšimli neškodného rozevíracího seznamu, který uvádí jasné: Online.
Pokud na toto kliknete, zobrazí se rozbalovací nabídka s různými možnostmi, které vám umožní snížit rychlost sítě: Rychlé 3G, Pomalé 3G, Offline atd. I když pro tuto možnost mohou existovat různé případy použití, nejběžnějším je testování webu výkon na pomalých sítích nebo chování webových aplikací v režimu offline (za předpokladu, že takové možnosti byly přidány).
Podívejme se na to. Nastavím síť na „Slow 3G“ a znovu načtu stejnou stránku z předchozího snímku obrazovky. Než to udělám, všimněte si na předchozím snímku obrazovky, jak při mém současném síťovém připojení (40 Mbps širokopásmové připojení) se většina prostředků stahuje za méně než 100 milisekund.
A teď je čas podívat se, co s tím pomalé 3G udělá.
Jaký rozdíl!
Všimněte si, že doba načítání prostředků je nyní v rozmezí 5–10 sekund. Stránky byly také plně načteny za 17,25 sekund! Ano, vím, co si myslíte, ale musíte vzít v úvahu, že v pomalé síti 3G bude načítání jakékoli moderní webové stránky trvat několik sekund. Zda chcete rychlé načítání na pomalých sítích, je jiná věc, i když celkově to musí být obchodní rozhodnutí, kde zisky ospravedlňují úsilí.
Na snímku obrazovky výše si všimněte ikony varování na kartě Síť. Chrome vám tímto způsobem připomíná, že jste provedli nějakou nevýchozí, trvalou změnu, a pokud nevíte, co děláte, možná byste ji měli resetovat.
Interaktivní výběr barev
Kontrola prvků DOM v DevTools je něco, co všichni děláme téměř každý den. Jsme také zvyklí na sekci s podrobnostmi CSS zobrazenou vedle a víme, že ji můžeme upravovat a okamžitě vidět výsledky.
Jedna drobná vymoženost skrytá mezi tím vším je, že když kliknete na vlastnost barvy CSS, objeví se známé rozhraní pro výběr barvy!
Všimněte si, že to není jednoduchý, základní výběr barev. Umožňuje vám ovládat průhlednost, měnit používané barevné systémy, vybírat barvu přímo ze stránky a mnoho dalšího.
Takže až budete příště experimentovat například s barvami akcentu na webu, nemusíte zjišťovat nebo odhadovat správnou hodnotu odstínu, který máte na mysli! Ve skutečnosti mnoho lidí rádo navrhuje webové stránky přímo v prohlížeči; pro ně jsou funkce jako tyto dar z nebes! 🙂
Sledování prvků na stránce
Často jsme v situaci, kdy si přejeme vědět, co se děje s tím jedním konkrétním prvkem, který nás zajímá. To platí zejména při použití jQuery v netriviální kódové základně – ať už vaší nebo jiné“; obsluhy událostí a logika jsou rozmístěny všude a vystopovat chybu může být noční můra.
Naštěstí pro to Chrome DevTools má šikovnou funkci. Bude za vás pozorovat naznačený prvek a zaznamenávat události do konzole. Je tu ale malé zklamání: tato funkce nemá možnosti výběru prvků na základě názvů tříd CSS. Takže způsob jQuery $(“#email”) není dostupný. 🙂
S tím řečeno, pojďme se podívat, jak to udělat, aby to fungovalo. Začneme provedením jednoduchého „kontrolního prvku“ pomocí inspektoru DevTools. Ano, je to úplně stejný kontrolní nástroj, který používáme každý den.
Na níže uvedeném snímku obrazovky jsem použil nástroj inspektor ke zvýraznění zadávání textu. Výrazem „zvýraznění“ nemyslím, že je prvek na stránce zvýrazněn (jak vidíte, není tomu tak); místo toho bylo na textový vstup kliknuto inspektorovým kurzorem a odpovídající HTML kód v DevTools je zvýrazněn.
Tím se zaměří na aktuálně kontrolovaný prvek pro monitorování událostí, což zpřístupňuje prvek jako speciální proměnná JavaScriptu s názvem $0. Dále, ujistím se, že neklikám nedbale jinam v okně prohlížeče (zejména část HTML kódu), kliknu na Console a připojím posluchač událostí pro tento textový vstup. K tomu potřebuji pouze jeden řádek kódu: monitorEvents($0, ‚myš‘). Část „myš“ zde Chrome říká, že mě zajímá pouze sledování událostí souvisejících s myší.
Jakmile stisknu Enter/Return, aktivuje se monitorování, a pokud nyní najedu na textový vstup nebo na něj kliknu, tyto události se zaprotokolují do konzole jako objekty JavaScriptu:
Jak můžete vidět na snímku obrazovky, bylo zachyceno několik typů událostí myši, když jsem kliknul na prvek, napsal své jméno a poté oddaloval myš (události psaní, které byly událostmi klávesnice, nebyly protokolovány). Události jsou samotné objekty JavaScriptu, jak je zřejmé ze snímku obrazovky; každý objekt události obsahuje ohromné množství informací. Například jsem rozšířil objekt události „click“ a počet vlastností se nevešel na jediný snímek obrazovky!
Vřele vám doporučuji, abyste si tuto funkci hned vyzkoušeli, protože vám ve vašich nadcházejících projektech jistě ušetří spoustu starostí!
Přehledy výkonu webových stránek
V dnešní době výkon webových stránek dělá nebo ruší podnikání/web. I malé zvýšení výkonu se promítá do masivních zisků SEO a také do spokojenosti uživatelů. Jak ale poznáte, které části vašeho webu vyžadují pozornost a které jsou již dobré?
Potřebujete najmout tým odborníků a pár dní trpělivě čekat?
Jsou případy, kdy je to potřeba udělat, ale naštěstí nás ostatní pokrývají Chrome DevTools. V nejnovějších verzích Chromu (konec roku 2020) najdete v DevTools kartu Lighthouse. Před několika měsíci se to jmenovalo Audity a je to matoucí název, který najdete v oficiálních dokumentech v době psaní. Jde každopádně o to, že Lighthouse býval trendovým webem pro bezplatnou kontrolu výkonu webu, ale pak ho Google stáhl (nebyly uvedeny žádné důvody). Naštěstí se stejná výkonná funkce později znovu objevila v DevTools.
Chcete-li vygenerovat přehled výkonu, stačí po načtení stránky, která vás zajímá, stisknout jediné tlačítko:
Jak můžete vidět na pravé straně na snímku obrazovky, existuje několik možností, jak ovládat, kolik informací chcete (a samozřejmě také to, co chcete testovat). Jakmile budete s nastavením spokojeni, stiskněte velké modré tlačítko, posaďte se a relaxujte. O několik sekund později budete mít užitečnou zprávu, která vypadá asi takto:
Čísla, která vidíte na výše uvedeném snímku obrazovky, ukazují celkové skóre pro každou kategorii. Kategorie pro progresivní webové aplikace (PWA) je zašedlá, pravděpodobně proto, že tento web nemá žádné funkce PWA. Také, jak můžete poznat podle velikosti posuvníku na snímku obrazovky (zcela vpravo), je to dlouhá zpráva.
Takto vypadá část sekce o výkonu:
Nebudu tvrdit, že Lighthouse a jeho návrhy jsou svatým grálem výkonnosti webových stránek, ale jsou nesmírně užitečné; je to proto, že majitelé webových stránek a vývojáři mají zřídka ponětí o tom, jaké problémy existují a jak je přesně řešit.
Upřímně řečeno, i já se jako webový vývojář cítím ztracený, protože výkon a testování bývají svého druhu specializací. Lighthouse je jako takový málo známý, nedoceněný nástroj, nyní součástí Chrome DevTools, který je nesmírně užitečný pro majitele firem i vývojáře/sysadminy.
Schopnost editovat kód
Karta Zdroje v DevTools nám umožňuje přístup k různým souborům načteným webem. Má také funkce, jako je úprava kódu, ukládání úryvků atd. To by nemělo být pro vývojáře webu žádným překvapením. DevTools má však také vestavěno několik vymožeností, které usnadňují život vývojářům zvyklým na jejich oblíbená kódová IDE.
DevTools používá některé dobře známé klávesové zkratky, které vám ušetří čas a minimalizují frustraci ze hry s kódem. Například Ctrl + D (nebo Cmd + D na Macu) lze použít ke zvýraznění více výskytů slova. Podobně, podržením Ctrl (nebo Cmd na Macu) a kliknutím na více míst v kódu získáte více kurzorů. Pro lepší představu se podívejte na video níže:
Pokud si myslíte, že je to skvělé, nezapomeňte se ponořit do oficiálních dokumentů, abyste mohli využít všech funkcí pro úpravu kódu, které DevTools nabízí.
Řízení stavu prvku DOM
Někdy něco testujeme nebo ladíme, ale chování, které sledujeme, je dostupné pouze v konkrétním stavu prvku. V závislosti na tom, jaký je to stav, můžete skončit s hrozným časem; pro mě je to stav „hover“, protože si pamatuji, že jsem ztrácel nespočet minut snahou načasovat akci visu nebo přilepit další dočasné CSS atd.
Naštěstí Chrome DevTools nabízí snadný způsob, jak změnit stav kontrolovaného prvku. A co víc, možnost, jak to udělat, je přímo zde, pokud na prvek klikneme pravým tlačítkem myši (na kartě Prvky), ale vzhledem k množství funkcí a nátlaku denní práce je snadné toto přehlédnout:
Ano, je to opravdu tak jednoduché!
Nyní nemusíte do kódu zapékat logiku podmíněného testování, psát další CSS nebo přeskakovat jiné obruče, když pozorujete prvek v jiném stavu.
Panel nástrojů
Poslední, ale rozhodně v neposlední řadě na tomto seznamu je panel Nástroje. Je to další z těch neuvěřitelně užitečných funkcí, které jsou dobře skryté a lze je vidět pouze pomocí klávesových zkratek. Jak název napovídá, panel nástrojů není jediný nástroj, ale jakýsi řídicí panel, kde jsou k dispozici téměř všechny funkce nástroje DevTool. Protože existuje příliš mnoho funkcí, které nabízejí celkovou funkčnost DevTools, je přímo nahoře k dispozici vyhledávací panel.
Chcete-li aktivovat panel nástrojů, ujistěte se, že jste na panelu DevTools, a poté stiskněte Ctrl + Shift + P (nebo Cmd + Shift + P pro uživatele Mac):
Panel nástrojů je plný možností a překvapení. Věděli jste například, že můžete pořídit snímek obrazovky přímo z DevTools?
Vsadím se, že ne, protože byste museli spustit panel nástrojů a do vyhledávacího pole zadat „snímek obrazovky“, abyste zjistili, že:
Také si všimnete několika možností pro pořizování snímků obrazovky, včetně jedné pro vybraný uzel DOM! Prozkoumejte panel Nástroje více a ujišťuji vás, že nebudete zklamáni!
Pokud potřebujete vzdáleně pořídit snímek libovolné webové stránky, vyzkoušejte nástroj etechblog.cz Screenshot.
Závěr
Samotný prohlížeč Chrome je bohatý na funkce, ale kde opravdu září, je nabídka DevTools. Jak jsme viděli v tomto článku, existuje poměrně málo dobře skrytých funkcí – a další se skrývají na očích – o kterých drtivá většina uživatelů neví. Proč jsou tyto funkce skryté?
Myslím, že některé z nich jsou velmi experimentální (například režim návrhu) a vývojáři Chrome chtějí každodenním uživatelům ztížit hledání těchto funkcí. Pokud jde o zbytek mnoha funkcí, domnívám se, že je to prostě případ přetížení informacemi: pokud existuje, řekněme, 120 funkcí, přičemž některé z nich mají dílčí funkce a tak dále, je v podstatě nemožné navrhnout pro takovéto správné uživatelské rozhraní. scénář. Google také historicky neodvedl skvělou práci s UX svých produktů, takže je to tak. 🤷🏻♂️
Bez ohledu na to doufám, že vám některé z těchto funkcí byly užitečné. Ale 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ě, až budete chtít něco konkrétního prozkoumat nebo hledat, věděli, kam jít „hlouběji“. 😆