Wat is er nieuw in DevTools (Chrome 60)

Kayce Basques

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

• Een nieuw Audits-paneel , met tests voor progressieve web-apps, prestaties, toegankelijkheid en best practices.
• Badges van derden . Ontdek welke derden netwerkverzoeken doen, inloggen op de console en JavaScript uitvoeren.
• Ga hier verder . Een nieuw gebaar dat uw JavaScript-foutopsporingsworkflow kan versnellen.
• Voorspelbaar debuggen voor asynchrone JavaScript .
• Objectvoorbeelden in de Console .
• Realtime-updates op het tabblad Dekking .
• Een nieuw menu voor het selecteren van contexten in de Console .
• Eenvoudigere opties voor netwerkbeperking .
• Asynchrone stack traces zijn standaard ingeschakeld .

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

Nieuwe functies

Nieuw Audits-paneel, mogelijk gemaakt door Lighthouse

Het Audits-paneel wordt nu aangestuurd 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 totale scores voor elk van deze categorieën. De rest van het rapport is een overzicht van elk van de tests die uw scores hebben bepaald. Verbeter de kwaliteit van uw webpagina door de falende tests te repareren.

Figuur 1. Een Lighthouse-rapport

Om een ​​pagina te controleren:

1. Klik op het tabblad Audits .
2. Klik op Audit uitvoeren .
3. Klik op Audit uitvoeren . Lighthouse stelt DevTools in om een ​​mobiel apparaat te emuleren, voert een aantal tests uit op de pagina en geeft de resultaten vervolgens weer in het paneel Audits .

Vuurtoren op Google I/O '17

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

Draag bij aan Lighthouse

Lighthouse is een open-sourceproject. Voor meer informatie over hoe het werkt en hoe je eraan kunt bijdragen, bekijk de Lighthouse-presentatie van Google I/O '17 hieronder.

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 doen, zich aanmelden bij de console en JavaScript uitvoeren.

Figuur 2. Beweeg de muis over een badge van een derde partij in het paneel Netwerk

Figuur 3. Beweeg de muis over een badge van een derde partij in de console

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 op de tabbladen Aanroepstructuur en Bottom-Up om prestatieregistratieactiviteiten 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.

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

Een nieuw gebaar voor 'Ga door naar hier'

Stel dat je gepauzeerd bent op regel 25 van een script en je wilt naar regel 50 springen. Vroeger kon je een breekpunt instellen op regel 50, of met de rechtermuisknop op de regel klikken en 'Doorgaan naar hier' selecteren. Maar nu is er een snellere manier om deze workflow af te handelen.

Houd tijdens het stapsgewijs doorlopen van code Command (Mac) of Control (Windows, Linux) ingedrukt en klik vervolgens om door te gaan naar die coderegel. DevTools markeert de bestemmingen waar je naartoe kunt springen in blauw.

Figuur 5. Ga verder naar hier

Zie Aan de slag met het debuggen van JavaScript voor meer informatie over de basisbeginselen van foutopsporing in DevTools.

Stap in async

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

Het nieuwe gebaar 'Ga door naar hier' werkt ook met asynchrone code. Wanneer u Command (Mac) of Control (Windows, Linux) ingedrukt houdt, markeert DevTools asynchrone bestemmingen waar u naartoe kunt springen in het groen.

Bekijk hieronder de demo van de DevTools-lezing op I/O voor een voorbeeld.

Wijzigingen

Meer informatieve objectvoorbeelden in de console

Voorheen werd bij het registreren of evalueren van een object in de console alleen Object weergegeven, wat niet erg handig is. Nu biedt de console meer informatie over de inhoud van het object.

Figuur 6. Hoe de console vroeger een voorbeeld van objecten gaf

Figuur 7. Hoe de console nu objecten voorvertoont

Informatiever contextselectiemenu in de console

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

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

Figuur 8. Als u met de muis over een iframe in het nieuwe menu Contextselectie beweegt, wordt deze in de viewport gemarkeerd.

Realtime-updates op het tabblad Dekking

Bij het registreren van codedekking in Chrome 59 werd op het tabblad Dekking alleen 'Opnemen...' weergegeven, zonder dat duidelijk was welke code er werd gebruikt. Nu toont het tabblad Dekking u in realtime welke code er wordt gebruikt.

Figuur 9. Een pagina laden en ermee interacteren met het oude tabblad Dekking

Figuur 10. Een pagina laden en ermee interacteren met het nieuwe tabblad Dekking

Eenvoudigere opties voor netwerkbeperking

De menu's voor netwerkbeperking in de panelen Netwerk en Prestaties zijn vereenvoudigd en bevatten nu slechts drie opties: Offline , Langzaam 3G , wat gebruikelijk is in landen als India, en Snel 3G , wat gebruikelijk is in landen als de Verenigde Staten.

Figuur 11. De nieuwe netwerkbeperkingsopties

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 deze waarden misleidend waren. Het doel is om de daadwerkelijke ervaring van elke optie te evenaren.

Async-stapels zijn standaard ingeschakeld

Het selectievakje 'Async' is verwijderd uit het paneel ' Bronnen' . Asynchrone stacktraces zijn nu standaard ingeschakeld. Voorheen was deze optie optioneel vanwege de prestatieoverhead. De overhead is nu minimaal genoeg om de functie standaard in te schakelen. Als u asynchrone stacktraces liever wilt uitschakelen, kunt u ze uitschakelen via 'Instellingen' of door de opdracht ' Do not capture async stack traces in het menu 'Opdrachten' uit te voeren.

DevTools op Google I/O '17

Bekijk hieronder de presentatie van de mythische Paul Irish om meer te weten te komen over waar het DevTools-team het afgelopen jaar aan heeft gewerkt en de grote thema's waar ze de komende tijd mee aan de slag gaan.

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

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

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.