Wat is er nieuw in DevTools (Chrome 60)

Kayce Basques

Welkom! Nieuwe functies en belangrijke wijzigingen in DevTools in Chrome 60 zijn onder andere:

• Een nieuw auditpanel , met tests voor progressieve webapps, prestaties, toegankelijkheid en best practices.
• Badges van derden . Ontdek welke derden netwerkverzoeken doen, loggen naar de console en JavaScript uitvoeren.
• Ga hier verder . Een nieuwe gebaar waarmee je je JavaScript-debugworkflow kunt versnellen.
• Voorspelbaar debuggen voor asynchrone JavaScript .
• Objectvoorbeelden in de console .
• Realtime updates in het tabblad Dekking .
• Een nieuw menu voor het selecteren van contexten in de console .
• Eenvoudigere opties voor netwerkbeperking .
• Asynchrone stacktraces zijn standaard ingeschakeld .

Bekijk hieronder de videoversie van deze release-opmerkingen of lees verder voor meer informatie.

Nieuwe functies

Nieuw auditpaneel, mogelijk gemaakt door Lighthouse.

Het auditpaneel wordt nu mogelijk gemaakt door Lighthouse . Lighthouse biedt een uitgebreide set tests om de kwaliteit van uw webpagina's te meten.

De scores bovenaan voor Progressive Web App , Prestaties , Toegankelijkheid en Best Practices zijn uw gecombineerde scores voor elk van deze categorieën. De rest van het rapport is een uitsplitsing van elk van de tests die uw scores hebben bepaald. Verbeter de kwaliteit van uw webpagina door de onvoldoende scorende tests te corrigeren.

Figuur 1. Een Lighthouse-rapport

Om een ​​pagina te controleren:

1. Klik op het tabblad Audits .
2. Klik op ' Een audit uitvoeren' .
3. Klik op 'Audit uitvoeren' . Lighthouse configureert DevTools om een ​​mobiel apparaat te emuleren, voert een reeks tests uit op de pagina en toont vervolgens de resultaten in het paneel 'Audits' .

Lighthouse op Google I/O '17

Bekijk de DevTools-presentatie van Google I/O '17 hieronder voor meer informatie over de integratie van Lighthouse in DevTools.

Draag bij aan Lighthouse

Lighthouse is een open-sourceproject. Om veel meer te weten te komen over hoe het werkt en hoe je eraan kunt bijdragen, kun je de Lighthouse-presentatie van Google I/O '17 hieronder bekijken.

Heb je een idee voor een Lighthouse-audit? Plaats het hier!

Badges van derden

Gebruik badges van derden om meer inzicht te krijgen in de entiteiten die netwerkverzoeken op een pagina uitvoeren, logs naar de console sturen en JavaScript uitvoeren.

Afbeelding 2. De muiscursor boven een badge van een derde partij in het netwerkpaneel plaatsen.

Afbeelding 3. De muiscursor boven een badge van een derde partij in de console plaatsen.

Om badges van derden in te schakelen:

1. Open het opdrachtmenu .
2. Voer de opdracht Show third party badges uit.

Gebruik de optie 'Groeperen op product' in de tabbladen 'Oproepstructuur' en 'Onderop' om de activiteit van de prestatieregistratie te groeperen op basis van de externe entiteiten die de activiteiten hebben veroorzaakt. Zie 'Aan de slag met het analyseren van runtimeprestaties' voor meer informatie over het analyseren van prestaties met DevTools.

Afbeelding 4. Groeperen op product in het Bottom-Up- tabblad.

Een nieuw gebaar voor 'Ga verder naar hier'.

Stel, je bent gepauzeerd op regel 25 van een script en je wilt naar regel 50 springen. Vroeger kon je een breakpoint instellen op regel 50, of met de rechtermuisknop op de regel klikken en 'Doorgaan tot hier' selecteren. Maar nu is er een snellere manier om dit te doen.

Wanneer je door de code stapt, houd je Command (Mac) of Control (Windows, Linux) ingedrukt en klik je vervolgens om naar die regel code te gaan. DevTools markeert de springbare bestemmingen blauw.

Afbeelding 5. Ga verder naar hier.

Zie Aan de slag met het debuggen van JavaScript om de basisprincipes van debuggen in DevTools te leren.

Stap over naar asynchroon

Een belangrijk thema voor het DevTools-team in de nabije toekomst is het voorspelbaar maken van het debuggen van asynchrone code en het bieden van een complete geschiedenis van de asynchrone uitvoering.

Het nieuwe gebaar voor 'Doorgaan naar hier' werkt ook met asynchrone code. Wanneer je Command (Mac) of Control (Windows, Linux) ingedrukt houdt, markeert DevTools de naar een bestemming springbare asynchrone bestemming in het groen.

Bekijk onderstaande demo van de DevTools-presentatie op I/O voor een voorbeeld.

Wijzigingen

Meer informatieve objectvoorbeelden in de console

Voorheen gaf de console bij het loggen of evalueren van een object alleen Object weer, wat niet erg nuttig was. Nu biedt de console meer informatie over de inhoud van het object.

Afbeelding 6. Hoe de console werd gebruikt om objecten te bekijken.

Afbeelding 7. Hoe de console nu objecten weergeeft in een voorbeeld.

Een informatiever contextselectiemenu in de console

Het contextselectiemenu van de console biedt nu meer informatie over de beschikbare contexten.

• De titel beschrijft wat elk item is.
• De ondertitel beschrijft het domein waar het item vandaan komt.
• Beweeg de muis over een iframe-context om deze in het weergavevenster te markeren.

Afbeelding 8. Wanneer u de muis over een iframe in het nieuwe contextselectiemenu beweegt, wordt deze in de viewport gemarkeerd.

Realtime updates in het tabblad Dekking.

Bij het opnemen van code coverage in Chrome 59 werd in het tabblad Coverage alleen 'Opnemen...' weergegeven, zonder dat zichtbaar was welke code er werd gebruikt. Nu toont het tabblad Coverage in realtime welke code er wordt gebruikt.

Afbeelding 9. Een pagina laden en ermee interageren via het oude tabblad 'Coverage' .

Afbeelding 10. Een pagina laden en ermee interageren via het nieuwe tabblad 'Coverage' .

Eenvoudigere opties voor netwerkbeperking

De menu's voor netwerkbeperking in de panelen Netwerk en Prestaties zijn vereenvoudigd en bevatten nu nog maar drie opties: Offline , Langzame 3G (gebruikelijk in landen zoals India) en Snelle 3G (gebruikelijk in landen zoals de Verenigde Staten).

Afbeelding 11. De nieuwe opties voor netwerkbeperking.

De throttling-opties zijn aangepast om overeen te komen met andere throttling-tools op kernelniveau. DevTools toont niet langer de latentie-, download- en uploadstatistieken naast elke optie, omdat die waarden misleidend waren. Het doel is om de werkelijke ervaring van elke optie zo goed mogelijk weer te geven.

Asynchrone stacks zijn standaard ingeschakeld.

Het selectievakje 'Asynchroon' is verwijderd uit het paneel 'Bronnen' . Asynchrone stacktraces zijn nu standaard ingeschakeld. Voorheen was deze optie optioneel vanwege de prestatievermindering. Deze vermindering is nu minimaal genoeg om de functie standaard in te schakelen. Als u asynchrone stacktraces liever uitschakelt, kunt u dit doen in de instellingen of door de opdracht ' Do not capture async stack traces uit te voeren in het menu 'Opdrachten' .

DevTools op Google I/O '17

Bekijk hieronder de presentatie van de legendarische Paul Irish om meer te weten te komen over waar het DevTools-team het afgelopen jaar aan heeft gewerkt en de belangrijke thema's die ze in de nabije toekomst gaan aanpakken.

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .