Ladění může být zdlouhavé a ještě více frustrující, když nemůžete chybu snadno najít. Vývojářské nástroje Chrome 106 (devtools) jsou nastaveny tak, aby zjednodušily proces ladění a usnadnily a zrychlily.
Nyní můžete snadno třídit soubory, optimalizovat vyhledávání, skrývat skripty třetích stran, přistupovat k podrobným zprávám o výkonu a mnohem více probíraným v tomto článku. Tyto devtools jsou nezbytné zejména pro vývojáře pracující s frameworky JavaScriptu jako např Angular, React a Vue.js, kteří nyní mají interaktivní a zjednodušenou konzoli pro vizualizaci a ladění jejich kód.
Podívejme se blíže na některé z těchto nových funkcí:
Chcete-li plně využít nových aktualizací Chrome 106, stáhněte si Chrome Kanárek, vývoj, nebo Beta verze jako váš výchozí vývojový prohlížeč. Budete mít přístup k nejnovějším vývojářským nástrojům, které umožňují testování rozhraní API webové platformy a rychlou identifikaci problémů nebo chyb na vašem webu, abyste zajistili, že vaši uživatelé budou mít nejlepší zákaznickou zkušenost.
1. Soubory seskupené podle autorů/nasazených
Nyní můžete přejít přímo ke komponentám vaší aplikace seskupením souborů na vytvořeno/nasazeno na zdroj panel. Jít do Zdroj > 3-tečková nabídka > Seskupit podle autorů/nasazených. Nyní, když otevřete soubory, můžete na panelu vidět pouze nasazené soubory.
V předchozích verzích Chrome byly všechny soubory zdrojového kódu viditelné v navigace panelu, takže je obtížné najít jeden soubor.
2. Zjednodušené vyhledávání souborů
Vyhledávání na zdrojovém panelu můžete omezit pouze na relevantní soubory. V předchozích verzích prohlížeče Chrome se ve výsledcích vyhledávání zobrazovaly soubory generované rámcem a jinými třetími stranami, což ztěžovalo identifikaci hledané položky.
Tato aktualizace je devtools verze pro optimalizaci vašeho vyhledávání ve webových prohlížečích Cheat sheety pro vyhledávání Google. Chcete-li nakonfigurovat toto nastavení, přejděte na Nabídka se třemi tečkami > Skrýt zdroje seznamu ignorovaných.
Skripty třetích stran zaplňují vaši konzoli? Chrome 106 přidal do zdrojové mapy rozšíření seznamu ignorovaných, které vám umožní skrýt skripty automaticky generované frameworky a jinými třetími stranami.
Chcete-li aktivovat tuto funkci, přejděte na Nastavení > Seznam ignorovaných > Automaticky přidávat známé skripty třetích stran do seznamu ignorovaných. Když soubory znovu otevřete, konzola zobrazí pouze relevantní soubory spojené s vaší aplikací. Nyní můžete svůj kód vidět bez rozptylování.
4. Podrobné stopy zásobníku
Identifikace chyby na konzoli vám zabere méně času, a to díky nové funkci v Chrome 106. Nástroje pro vývojáře Chrome vám poskytují podrobný pohled na asynchronní operace a jejich hlavní příčiny. V předchozích verzích byly viditelné pouze události, které vedly k operaci. Nejnovější nástroje devTools ukazují celý řetězec operací a jejich hlavní příčiny.
Google nakonfiguroval a console.createTask() metoda v Chrome 106. Tato metoda umožňuje rámcům provádět trasování zásobníku na konzole. Ladění JavaScriptu pomocí devtools je stejně snadné jako ladění CSS pomocí chrome.
5. Sledujte interakce na panelu výkonu
Sledujte nové interakce v Výkon panelu k identifikaci potenciálních problémů s odezvou vaší aplikace. V Chrome 106 se všechny interakce po operaci zobrazují ve stopě Interakce. Stopa zobrazuje zdroj interakcí a jejich ID. Sledování pomáhá identifikovat zdroj a podle toho jej zachytit.
6. LCP Timing Insights na panelu výkonu
The Největší obsahová barva Podrobnosti načasování (LCP) jsou nyní k dispozici na panel statistik výkonu. LCP je životně důležitá metrika výkonu webu, která informuje o době vykreslování obrázků nebo bloků textu, které se na webové stránce načítají. 2,5 s nebo méně je dobré skóre výkonu.
Chcete-li zobrazit statistiky, přejděte na panel výkonu>3-tečková nabídka-další poplatky>statistiky výkonu. Když přehrajete nahrávku, Podrobnosti panel zobrazí časování zatížení.
Další aktualizace v Chrome 106
Mezi další vylepšení Chrome 106 patří:
- Záznamy skriptů můžete exportovat bez problémů z Zapisovač panel. Tlačítko export mělo v předchozích verzích problém.
- Nyní máte v nabídce výběr barvy Styly prvky panelu SVG.
- Skripty narušující vaše rozvržení můžete identifikovat v Statistiky výkonu panel.
- Cesty pro webová písma LCP můžete zobrazit v Statistiky výkonu panel.
Tyto funkce mohou zlepšit způsob, jakým používáte vývojové nástroje prohlížeče.
Co získáte z Chrome 106
Nejnovější vylepšení devtools v Chrome 106 zrychlují proces ladění. Nové aktualizace usnadňují vizualizaci operací prostřednictvím zjednodušené a dynamické konzoly, která umožňuje skrýt soubory, zakázat skripty, zaznamenávat a mít podrobný pohled na vaši aplikaci, když ladění.
Doplňky Chrome 106 vám umožní spravovat vaši aplikaci a optimalizovat její výkon. Pokračujte a využijte tyto výhody aktualizací na nejnovější verzi Chrome 106.