Novinky popsané v tomto článku budou dostupné od Chrome 73. Zatím si je můžete vyzkoušet stažením Chrome Canary, což je distribuce nočních verzí prohlížeče a můžete ji mít na počítači nezávisle na stabilní verzi prohlížeče Chrome. (A pokud nejste Chuck Norris. tak byste ji neměli používat k ničemu jinému než k testování novinek.) Anebo můžete zkusit Chrome Dev, což je o něco stabilnější distribuce, neaktualizovaná tak často, ale platí pro ni víceméně to, co pro Canary.

Při psaní jsem vycházel z textu What’s New In DevTools (Chrome 73) od Kayce Basques, tento článek je přežvýkáním toho nejdůležitějšího pro české čtenáře Zdrojáku.

Logpointy

Ladíte kód a nebaví vás do něj vkládat logovací hlášky console.log (a pak je zase mazat)? Zkuste logpointy (tj. logovací breakpointy). V DevTools si přidáte na konkrétní řádek kódu logpoint (viz screenshot) a nastavíte výraz, který se má zalogovat při jeho spuštení. Může to být jen hloupý text „Ahój, já jsem tvůj hloupý logpoint. Vidíš mě?!“, ale prakticky libovolný výraz JavaScriptu. Tedy totéž, co byste jinak napsali jako argument volání console.log.

Jedná se opravdu o breakpoint, tj. najdete ho v seznamu breakpointů, kde ho můžete třeba  deaktivovat.

Výhody? Asi tušíte sami. Při rychlém hledání problému nemusíte procházet kolečkem editace zdrojáku, kam dáte nový console.log, refresh stránky v prohlížeči, kontrola konzole, následně další editace, abyste přidali další console.log – tentokrát už ten správný – znovu refresh… a na konci po sobě zase vše uklidit a odstanit dočasné console.log z kódu.

Dost. S logpointy zůstáváte v prohlížeči, a pracujete se spuštenou instancí aplikace. Vaše zdrojáky zůstanou nedotčeny.

Důležitá drobnost: Když musíte z nějakého důvodu stránku reloadnout, nebojte se, DevTools si logpointy zapamatuje.

Dokonce i když celý prohlížeč ukončíte a znovu spustíte, tak si je stále pamatuje. Což je zajímavé. Nenašel jsem, jak dlouho a kde přesně si je pamatuje. Zřejmě někde v profilu uživatele a možná napořád nebo do vymazání cache. Netuším.

Protip: Hodnoty proměnných nelogujte přímo, ale jako objekty. Místo x tedy používejte {x}. Proč? Zkuste si sami a uvidíte. Tenhle a další tipy najdete v Art of Debugging with Chrome DevTools.

Vlastnosti stylů zobrazené v Inspekt módu

Obrázek vydá za tisíc slov.

Když provádíte inspekci stránky (Ctrl+Shift+C resp. ⌘+Shift+C), tak vidíte základní vlastnosti vybraného elementu. Nic složitého, ale hodí se.

Zobrazení linie AAA barevného kontrastu v kapátku (color pickeru)

O barevném kontrastu jsme tu zrovna nedávno psali, pamatujete? Takže nemusím opakovat, k čemu je důležitý.

DevTools již od Chrome 65 ukazuje hodnotu barevného kontrastu. Co je nové je ta druhá bílá linka, kterou můžete vidět dole na obrázku. Ta označuje hraniční hodnoty pro splnění normy AAA (to je ta nejpřísnější). Původně tam byla jen jedna bílá linka pro normu AA, teď tam budou obě. Užitečné. Snadno můžete experimentovat s barvami a hned vidíte, kdy splňujete kterou normu. (A přitom je to taková blbost, že jo? 😀)

Folding kódu

Kód v DevTools nyní můžete sbalovat, jak jste zvyklí z editorů. Funkci je napřed nutné aktivovat. V předvolbách DevTools (F1) Settings -> Preferences -> Sources -> Code folding. Sbalování funguje jak na kód v JavaScriptu, tak na kaskádové styly.

Další

V textu jsem vynechal následující novinky Export code coverage data, Navigate the Console with the keyboard, Save custom geolocation overrides a Messages tab.

Nepřišly mi tak zajímavé, pokud vám ano, dočtěte si o nich v originále.

Až od Chrome 73

Popsané novinky se týkají verze Chrome 73. Aktuálně tu je stabilní Chrome 71. Pak přijde Chrome 72 a teprve pak popisovaná sedmdesát trojka, tipuji někdy na jaře.

Pokud vás zajímají novinky verze 72, mohu je alespoň vyjmenovat, bude to Visualize performance metrics, Highlight text nodes, Copy the JS path a Audits panel updates. Více o nich najdete v anglickém článku.

Pokud vás spíše než DevTools v Chrome zajímají novinky DevTools ve Firefoxu, tak ani ten nespí a hlavní zajímavostí je Flexbox Inspector. Což je, pokud se nepletu, v tuto chvíli jediný nástroj umožňující vizuální ladění Flexbox layoutů.