Foto od Jo Szczepanska na Unsplash
Před několika týdny jsem zveřejnil „Moje oblíbené webové funkce roku 2019“. Tam jsem slíbil, že budu pokračovat s verzí DevTools stejného konceptu. Tak a jsme tady!
Struktura příspěvku bude stejná. Začnu od mých nejméně oblíbených (ale stále dobrých) k mým nejoblíbenějším funkcím DevTools, které byly zavedeny do nástrojů pro vývojáře Firefoxu a Chrome v roce 2019. Toto není seznam všech představených funkcí, pouze těch, které vynikly já.
Dobré nové funkce
Chrome:Vizualizace změn rozložení
- https://developers.google.com/web/updates/2019/07/devtools#layoutshifts
Nástroj, který vám pomůže vizualizovat, jak obsah přeskakuje na stránce při načítání podkladů. Nemám moc jiného, co bych k tomu řekl. I když jsem ji ještě nepoužil, vím, že tato funkce bude neocenitelná, kdykoli budu muset provést tento druh optimalizace, takže si ji nechávám vzadu v mysli.
Firefox:CSS Flexbox Inspector
- https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts
Tato funkce na mě osobně příliš neovlivní, protože flex používám roky a už se v tom vyznám, ale dokážu si představit, že tento nástroj je úžasný pro vývojáře, kteří s flexboxem ještě moc neznají.
Uchopení Flex může být složité a existuje mnoho samostatných stránek, jejichž cílem je usnadnit jeho pochopení, ale mít v prohlížeči zabudovaný nástroj je stále velmi užitečné.
Obecně se mi líbí, když prohlížeče lidem usnadňují vstup do vývoje front-endu, vzhledem k tomu, jak složitá a chaotická taková cesta může být!
Firefox:Nástroje související s usnadněním
- Kontrast barev v Inspektoru usnadnění
- Simulátor nedostatku barev
- Zkontrolujte problémy s přístupností
Podívejte se na tyto další odkazy, které jdou podrobněji o všech nástrojích souvisejících s usnadněním ve Firefoxu:
- Seznam skladeb Nástroje pro usnadnění přístupu na kanálu YouTube vývojáře Mozilla
- Kontrola problémů s přístupností pomocí nástrojů pro vývojáře Firefox
Je opravdu skvělé vidět, že se ve Firefoxu objevilo tolik funkcí souvisejících s přístupností během jediného roku! Je jasné, že tým Firefoxu upřednostňuje přístupnost; berou to velmi vážně.
Obecně bych řekl, že nástroje pro usnadnění přístupu napříč prohlížeči zanechávají mnoho přání. Je tu velký prostor pro zlepšení. To je obrovský problém, protože to vytváří vysokou bariéru vstupu do přístupných aplikací.
Myslím, že můžeme částečně obviňovat současný stav vývojářských nástrojů týkajících se přístupnosti jako primárního viníka toho, že dnes na webu nemáme dostupnější aplikace.
Na Firefoxu se mi líbí, že všechny nástroje související s přístupností jsou seskupeny na kartě Accessibility Inspector, což usnadňuje nalezení všeho, co souvisí s přístupností, na jednom místě. Má také některé funkce, které Chrome nemá.
Ekvivalentem funkce „Kontrola problémů“ v prohlížeči Chrome je Audity> Usnadnění> Spustit audit, která je schovaná v jiné části rozhraní DevTools. Je těžké to zjistit, zvláště pokud očekáváte, že karta Usnadnění bude mít vše, co potřebujete. Není. Také v něm není například zmínka o barevném kontrastu.
Podle mého názoru potřebuje Chrome přepracovat uživatelské rozhraní/UX kolem funkcí usnadnění v jejich nástrojích pro vývojáře. UI/UX Firefoxu je zde lepší. Pravděpodobně bych na něj přešel, až budu muset provést seriózní audit přístupnosti.
Chrome:Skládání kódu na kartě Zdroje a sítě
- https://developers.google.com/web/updates/2019/01/devtools#folding
Super jednoduchá funkce, která je velmi užitečná. Tady není moc co rozvádět, kromě toho, že to bylo dávno zpožděné.
Firefox:Konzola v režimu více řádků
- https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Multi-line_mode
Skutečnost, že Chrome něco takového ještě neimplementoval, je udivující, protože je to tak užitečné! Obecně je velmi nepříjemné, když musíte Shift + Enter něco, co má více než jeden řádek. Omylem jsem stiskl Enter bez stisknutí Shift pořád, a pak musím začít znovu 🤦♂️. Fuj!
Skvělé nové funkce
Chrome:Zvýrazněte všechny uzly ovlivněné vlastností CSS
- https://developers.google.com/web/updates/2019/03/devtools#highlight
Toto je další velmi jednoduchá funkce, která přidává hodně hodnoty. Možnost přímo vizualizovat to v prohlížeči může znamenat velký rozdíl při práci s rozvržením. Pokud by tato funkce byla odstraněna zítra, jsem si jistý, že mnoho z nás by se s tím snaha přizpůsobit.
Firefox:Neaktivní CSS
Část „jak to opravit“ je to, co se mi na této funkci líbí nejvíce. CSS deklarace nejsou vždy použity, protože vývojář udělal nějaké špatné předpoklady. Může být těžké zjistit, co se děje, a obvykle to vyžaduje časově náročné experimentování, vyšetřování a přepínání kontextu.
Mít tuto funkci k dispozici může být cennější, než si myslíte, a pro začátečníky, kteří se učí CSS, může znamenat velký rozdíl. Podívejte se na toto video demo:
Skvělé nové funkce
Firefox:Nová karta „Změny“ pro CSS
- https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Track_changes
Firefox přidal do svých vývojářských nástrojů novou kartu „Změny“, která uživateli umožňuje vidět rozdíl změn CSS provedených prostřednictvím Inspectoru v aktuální relaci. To je skvělé, když upravujete design v prohlížeči a chcete vědět, co jste změnili, abyste tyto změny mohli vzít zpět do svých šablon stylů.
Toto je extrémně běžná praxe pro front-endové vývojáře a je velmi nepříjemné tyto změny mentálně sledovat. Často se přistihnete, že se snažíte neprovádět příliš mnoho změn, abyste je nezapomněli, když se vrátíte ke svému kódu. V minulosti jsem ztratil tolik času tím, že jsem se o to staral ručně. Kvůli této funkci už ne!
Zde je video ukázka, jak se chová:
Chrome má podobnou funkci, ale není tak uživatelsky přívětivý, zjistitelný a snadno použitelný jako ve Firefoxu, takže když budu muset provést spoustu změn CSS, budu vytahovat instanci Firefoxu.
Chrome:Vložené body přerušení v podokně bodů přerušení
- https://developers.google.com/web/updates/2019/04/devtools#inline
Konečně! To mě celé roky znervózňovalo, zvláště poté, co se v posledních letech staly tak populární funkce asynchronního kódu založeného na Promise a inline šipek.
Neschopnost chirurgicky vkládat body přerušení do určitých částí příkazu s vícenásobným voláním ztěžuje ladění těchto druhů programů. Natolik, že jsem si vytvořil zvyk tato volání co nejvíce rozdělit a při psaní funkcí šipek vždy upřednostňovat explicitní před implicitními návraty, jen z důvodu usnadnění pozdějšího vkládání bodů přerušení a ladění.
To je něco, co teď používám každý den, a proto je na mém seznamu tak vysoko.
Chrome:Podrobné popisky v režimu kontroly
- https://developers.google.com/web/updates/2019/01/devtools#inspect
Když se moje instance Chrome automaticky aktualizovala, všiml jsem si toho během první minuty. Je to tak jednoduchá změna a mám pocit, že přináší tolik hodnoty. To, že se tato informace zobrazí okamžitě, když umístíte kurzor na prvky, pro mě byla užitečnější, než jsem si myslel.
Jak již bylo řečeno, oceňuji, že existuje určitý vývojový pracovní postup, který by z toho příliš netěžil. Vše záleží na tom, na čem pracujete a jak na tom pracujete.
Chrome:Automatické doplňování s hodnotami CSS
- https://developers.google.com/web/updates/2019/05/devtools#values
Funkce, která vám umožňuje zadat pouze hodnotu CSS jakéhokoli daného pravidla namísto názvu vlastnosti, a DevTools vám zajistí automatické dokončování. To zabere další zátěž vaší mysli při stylování v Inspektoru.
Po letech práce na vývoji frontendu si stále nepamatuji box-sizing: border-box; kombinace na místě. Obvykle musím provést nějaké přepínání kontextu a rychlé googlování, než se vrátím do své aplikace, takže když jsem to poprvé zkusil po zavedení této funkce, byl jsem u vytržení. Jsou to jednoduché věci...
Chrome:Logpoints
- https://developers.google.com/web/updates/2019/01/devtools#logpoints
Páni, viděl jsem tuto funkci v poznámkách k vydání pro Chrome 73 v lednu a věděl jsem, že rok 2019 bude dobrý rok. Už žádné console.log všude ve vaší kódové základně (a pak je musíte všechny odstranit). Nejen to, ale také eliminuje nutnost provádět změny ve vaší aplikaci, čekat na její rekompilaci a poté aktualizovat prohlížeč, aby se tyto změny projevily.
Nemluvě o tom, když jste museli provádět ladění související s protokolováním v produkčních aplikacích, kde jste prostě nemohli změnit spuštěný zdroj a přidat console.log sebe.
To má pro mě velkou hodnotu. Zajímalo by mě, proč týmu Chrome trvalo tolik let, než to implementoval, zvláště když už mají editor bodů přerušení (díky podmíněným bodům přerušení) navržený a fungující mnoho let.
Závěr
Tak tady to máte. Opravdu by mě zajímalo, jaké by byly vaše oblíbené DevTools. Existuje nějaká funkce, na kterou se spoléháte ve své každodenní práci, která byla představena minulý rok, a o které jsem se nezmínil? Nebo to, co jsem zmínil, ale není to tak vysoké, jak byste čekali? Možná tam byla opravdu dobrá nová funkce, která mi úplně unikla. Dejte mi vědět v komentářích!