Ladenie môže byť únavné a ešte viac frustrujúce, keď nemôžete ľahko nájsť chybu. Vývojárske nástroje Chrome 106 (devtools) sú nastavené tak, aby zjednodušili proces ladenia a uľahčili ho a urýchlili.
Teraz môžete jednoducho triediť súbory, optimalizovať vyhľadávanie, skrývať skripty tretích strán, pristupovať k podrobným prehľadom výkonu a mnohým ďalším, o ktorých sa hovorí v tomto článku. Tieto devtools sú nevyhnutné najmä pre vývojárov pracujúcich s JavaScript frameworkami ako napr Angular, React a Vue.js, ktoré teraz majú interaktívnu a zjednodušenú konzolu na vizualizáciu a ladenie ich kód.
Pozrime sa bližšie na niektoré z týchto nových funkcií:
Ak chcete naplno využívať nové aktualizácie prehliadača Chrome 106, stiahnite si prehliadač Chrome Canary, Dev, alebo Beta verzie ako váš predvolený vývojový prehliadač. Budete mať prístup k najnovším nástrojom pre vývojárov, ktoré umožňujú testovanie rozhraní API webových platforiem a rýchlu identifikáciu problémov alebo chýb na vašom webe, aby ste zaistili, že vaši používatelia budú mať tú najlepšiu zákaznícku skúsenosť.
1. Súbory zoskupené podľa autora/nasadené
Teraz môžete prejsť priamo na komponenty vašej aplikácie zoskupením súborov na vytvorené/nasadené na zdroj panel. Ísť do Zdroj > 3-bodková ponuka > Zoskupiť podľa autora/nasadeného. Teraz, keď otvoríte súbory, na paneli uvidíte iba svoje nasadené súbory.
V predchádzajúcich verziách prehliadača Chrome boli všetky súbory zdrojového kódu viditeľné v navigácia panel, čo sťažuje nájdenie jedného súboru.
2. Zjednodušené vyhľadávanie súborov
Vyhľadávanie na zdrojovom paneli môžete obmedziť len na relevantné súbory. V predchádzajúcich verziách prehliadača Chrome sa vo výsledkoch vyhľadávania zobrazovali súbory generované rámcom a inými tretími stranami, čo sťažovalo identifikáciu hľadanej položky.
Táto aktualizácia je devtools verziou na optimalizáciu vášho vyhľadávania vo webových prehliadačoch cheaty pre vyhľadávanie Google. Ak chcete nakonfigurovať toto nastavenie, prejdite na 3-bodková ponuka > Skryť zdroje zoznamu ignorovaných.
Skripty tretích strán zapĺňajú vašu konzolu? Chrome 106 pridal do zdrojovej mapy rozšírenie ignorovaného zoznamu, ktoré vám umožní skryť skripty automaticky generované rámcami a inými tretími stranami.
Ak chcete aktivovať túto funkciu, prejdite na Nastavenia > Zoznam ignorovaných > Automaticky pridávať známe skripty tretích strán do zoznamu ignorovaných. Keď znova otvoríte súbory, konzola zobrazí iba relevantné súbory spojené s vašou aplikáciou. Teraz môžete vidieť svoj kód bez rozptyľovania.
4. Podrobné stopy zásobníka
Identifikácia chyby na konzole vám zaberie menej času vďaka novej funkcii v Chrome 106. Nástroje pre vývojárov prehliadača Chrome vám poskytujú podrobný pohľad na asynchrónne operácie a ich hlavné príčiny. V predchádzajúcich verziách boli viditeľné iba udalosti, ktoré viedli k operácii. Najnovšie devTools ukazujú celý reťazec operácií a ich hlavné príčiny.
Google nakonfiguroval a console.createTask() metóda v prehliadači Chrome 106. Táto metóda umožňuje rámcom vykonávať sledovanie zásobníka na konzole. Ladenie JavaScriptu pomocou devtools je rovnako jednoduché ako ladenie CSS pomocou chrome.
5. Sledujte interakcie na paneli výkonu
Sledujte nové interakcie v Výkon panel na identifikáciu potenciálnych problémov s odozvou vašej aplikácie. V prehliadači Chrome 106 sa všetky interakcie po operácii zobrazujú v stope interakcií. Stopa zobrazuje zdroj interakcií a ich ID. Sledovanie pomáha identifikovať zdroj a podľa toho ho zachytiť.
6. Štatistiky časovania LCP na paneli výkonu
The Najväčšia obsahová farba Podrobnosti o načasovaní (LCP) sú teraz k dispozícii na stránke panel štatistík výkonnosti. LCP je životne dôležitá metrika výkonu webu, ktorá informuje o čase vykresľovania obrázkov alebo blokov textu, ktorý trvá načítanie na webovej stránke. 2,5 s alebo menej je dobré skóre výkonu.
Ak chcete zobraziť štatistiky, prejdite na panel výkonnosti>trojbodková-ponuka-viac poplatkov>štatistiky výkonnosti. Keď prehrávate nahrávku, Podrobnosti panel zobrazí časovanie načítania.
Ďalšie aktualizácie v prehliadači Chrome 106
Medzi ďalšie vylepšenia prehliadača Chrome 106 patria:
- Záznamy zo skriptov môžete bez problémov exportovať z záznamník panel. Tlačidlo exportu malo v predchádzajúcich verziách problém.
- Teraz máte v ponuke výber farieb Štýly prvky panela SVG.
- Skripty, ktoré narúšajú vaše rozloženie, môžete identifikovať v Štatistiky výkonnosti panel.
- Cesty pre webové písma LCP môžete zobraziť v Štatistiky výkonnosti panel.
Tieto funkcie môžu zlepšiť spôsob, akým používate vývojové nástroje prehliadača.
Čo získate z prehliadača Chrome 106
Najnovšie vylepšenia devtools v Chrome 106 urýchľujú proces ladenia. Nové aktualizácie uľahčujú vizualizáciu operácií prostredníctvom zjednodušenej a dynamickej konzoly, ktorá vám umožňuje skryť súbory, zakázať skripty, zaznamenávať a mať hĺbkový pohľad na vašu aplikáciu ladenie.
Doplnky prehliadača Chrome 106 vám umožnia spravovať vašu aplikáciu a optimalizovať jej výkon. Pokračujte a vychutnajte si tieto výhody aktualizáciou na najnovšiu verziu prehliadača Chrome 106.
