Debuggen kan vervelend en zelfs frustrerender zijn als je de bug niet gemakkelijk kunt vinden. Chrome 106-ontwikkelaarstools (devtools) zijn ingesteld om het foutopsporingsproces te vereenvoudigen, waardoor het eenvoudiger en sneller wordt.
U kunt nu eenvoudig bestanden sorteren, uw zoekopdracht optimaliseren, scripts van derden verbergen, toegang krijgen tot diepgaande prestatierapporten en nog veel meer dat in dit artikel wordt besproken. Deze devtools zijn essentieel, vooral voor ontwikkelaars die werken met JavaScript-frameworks zoals Angular, React en Vue.js, die nu een interactieve en vereenvoudigde console hebben om te visualiseren en te debuggen hun code.
Laten we enkele van deze nieuwe functies eens nader bekijken:
Download de Chrome Kanarie, Ontwikkelaar, of Bèta versies als uw standaard ontwikkelingsbrowser. U krijgt toegang tot de nieuwste ontwikkelaarstools waarmee u webplatform-API's kunt testen en snel problemen of bugs op uw site kunt identificeren om ervoor te zorgen dat uw gebruikers de beste klantervaring hebben.
1. Bestanden gegroepeerd op geschreven/geïmplementeerd
U kunt nu rechtstreeks naar uw applicatiecomponenten navigeren door bestanden te groeperen op geschreven/geïmplementeerd op de bron paneel. Ga naar Bron > 3-punts-menu > Groeperen op geschreven/geïmplementeerd. Wanneer u nu de bestanden opent, kunt u alleen uw geïmplementeerde bestanden op het paneel zien.
In eerdere Chrome-versies waren alle broncodebestanden zichtbaar in de navigatie paneel, waardoor het moeilijk wordt om een enkel bestand te vinden.
2. Vereenvoudigd zoeken naar bestanden
U kunt uw zoekopdracht in het bronpaneel beperken tot alleen relevante bestanden. In eerdere versies van Chrome werden bestanden die door het framework en andere derde partijen waren gegenereerd, weergegeven in de zoekresultaten, waardoor het moeilijk was om het zoekitem te identificeren.
Deze update is de devtools-versie van het optimaliseren van uw zoekopdracht in webbrowsers met Google zoek spiekbriefjes. Ga naar om deze instelling te configureren Menu met 3 stippen > Bronnen uit negeerlijst verbergen.
Scripts van derden vullen je console? Chrome 106 heeft een extensie voor de negeerlijst toegevoegd aan de bronkaart waarmee u scripts kunt verbergen die automatisch zijn gegenereerd door frameworks en andere derde partijen.
Ga naar om deze functie te activeren Instellingen > Lijst negeren > Automatisch bekende scripts van derden toevoegen naar de negeerlijst. Wanneer u de bestanden opnieuw opent, toont de console alleen relevante bestanden die aan uw toepassing zijn gekoppeld. Je kunt nu je code zonder afleiding zien.
4. Gedetailleerde stapelsporen
Je hebt minder tijd nodig om een fout op de console te identificeren, dankzij een nieuwe functie in Chrome 106. Chrome-ontwikkelaarstools geven u een gedetailleerd overzicht van asynchrone bewerkingen en hun hoofdoorzaken. In vorige versies waren alleen de gebeurtenissen die tot de operatie leidden zichtbaar. De nieuwste devTools tonen de hele keten van operaties en hun onderliggende oorzaken.
Google heeft een console.createTask() methode in Chrome 106. Met deze methode kunnen frameworks stacktraceringen uitvoeren op de console. JavaScript debuggen met behulp van devtools is net zo eenvoudig als CSS debuggen met chrome.
5. Houd interacties bij in het prestatiepaneel
Volg nieuwe interacties in de Prestatie paneel om mogelijke reactieproblemen voor uw toepassing te identificeren. In Chrome 106 worden alle interacties na een bewerking weergegeven in de interacties-track. De track toont de bron van de interacties en hun ID's. Tracking helpt om de bron te identificeren en dienovereenkomstig te onderscheppen.
6. LCP-timinginzichten in het prestatiepaneel
De Grootste tevreden verf (LCP) timing details zijn nu beschikbaar op de paneel met prestatie-inzichten. LCP is een essentiële statistiek voor webprestaties die rapporteert over de weergavetijd die afbeeldingen of tekstblokken nodig hebben om op de webpagina te laden. 2,5 sec of minder is een goede prestatiescore.
Navigeer naar om de inzichten te bekijken prestatiepaneel>3-punts-menu-meer tolgelden>prestatie-inzichten. Wanneer u een opname opnieuw afspeelt, wordt de Details paneel toont de laadtijden.
Aanvullende updates in Chrome 106
Andere verbeteringen aan Chrome 106 zijn:
- U kunt uw scriptopnamen probleemloos exporteren vanuit het Recorder paneel. De exportknop had een probleem in eerdere versies.
- Je hebt nu een kleurenkiezer in de stijlen deelvenster SVG-elementen.
- U kunt scripts identificeren die uw lay-out vervormen in de Prestatie-inzichten paneel.
- U kunt paden voor LCP-weblettertypen weergeven in het Prestatie-inzichten paneel.
Deze functies kunnen de manier waarop u de ontwikkelingstools van de browser gebruikt, verbeteren.
Wat u krijgt van Chrome 106
De nieuwste verbeteringen aan devtools in Chrome 106 maken het foutopsporingsproces sneller. De nieuwe updates maken het gemakkelijker om operaties te visualiseren via een vereenvoudigde en dynamische console die stelt u in staat om bestanden te verbergen, scripts uit te schakelen, op te nemen en een diepgaand overzicht van uw applicatie te hebben wanneer debuggen.
Met de toevoegingen van Chrome 106 kunt u uw applicatie beheren en de prestaties ervan optimaliseren. Ga je gang en geniet van deze voordelen door bij te werken naar de nieuwste versie van Chrome 106.
