Wat is er nieuw in DevTools (Chrome 60)

Kayce Basques

Welkom! Nieuwe functies en grote veranderingen voor DevTools in Chrome 60 zijn onder meer:

• Een nieuw Audits-paneel , inclusief tests voor progressieve web-apps, prestaties, toegankelijkheid en best practices.
• Badges van derden . Ontdek welke derde partijen netwerkverzoeken indienen, inloggen op de console en JavaScript uitvoeren.
• Ga verder naar hier . Een nieuw gebaar dat uw JavaScript-foutopsporingsworkflow kan versnellen.
• Voorspelbare foutopsporing 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 netwerkbeperkingsopties .
• Asynchrone stacktraces zijn standaard ingeschakeld .

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

Nieuwe functies

Nieuw Audits-paneel, mogelijk gemaakt door Lighthouse

Het paneel Audits wordt nu mogelijk gemaakt door Lighthouse . Lighthouse biedt een uitgebreide reeks tests voor het meten van de kwaliteit van uw webpagina's.

De scores bovenaan voor Progressive Web App , Prestaties , Toegankelijkheid en Best Practices zijn uw verzamelde 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 corrigeren.

Figuur 1 . Een Lighthouse-rapport

Een pagina controleren:

1. Klik op het tabblad Audits .
2. Klik op Een 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 vervolgens de resultaten weer in het deelvenster Audits .

Vuurtoren op Google I/O '17

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

Draag bij aan Vuurtoren

Lighthouse is een open source-project. Voor meer informatie over hoe het werkt en hoe u eraan kunt bijdragen, kunt u de Lighthouse-talk van Google I/O '17 hieronder bekijken.

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

Figuur 2 . Beweeg de muis over een badge van derden in het netwerkpaneel

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

Badges van derden inschakelen:

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

Gebruik de optie Groeperen op product op de tabbladen Gespreksstructuur 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 op het tabblad Bottom-Up

Een nieuw gebaar voor Continue to Here

Stel dat u bent gepauzeerd op regel 25 van een script en naar regel 50 wilt gaan. In het verleden kon u een breekpunt instellen op regel 50, of met de rechtermuisknop op de regel klikken en Doorgaan naar hier selecteren. Maar nu is er een sneller gebaar om deze workflow af te handelen.

Wanneer u door de code stapt, houdt u Command (Mac) of Control (Windows, Linux) ingedrukt en klikt u vervolgens op om door te gaan naar die regel code. DevTools markeert de springbare bestemmingen in blauw.

Figuur 5 . Ga verder naar hier

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

Stap in asynchroon

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

Het nieuwe gebaar voor Continue to Here werkt ook met asynchrone code. Wanneer u Command (Mac) of Control (Windows, Linux) ingedrukt houdt, markeert DevTools springbare asynchrone bestemmingen in het groen.

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

Veranderingen

Meer informatieve objectvoorbeelden in de console

Als u voorheen een object in de console registreerde of evalueerde, gaf de console alleen Object weer, wat niet bijzonder nuttig is. Nu biedt de console meer informatie over de inhoud van het object.

Figuur 6 . Hoe de console een voorbeeld van objecten kon bekijken

Figuur 7 . Hoe de console nu een voorbeeld van objecten bekijkt

Meer informatief contextselectiemenu in de console

Het contextselectiemenu 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 de viewport te markeren.

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

Realtime updates op het tabblad Dekking

Bij het opnemen van codedekking in Chrome 59 werd op het tabblad Dekking alleen 'Opname...' weergegeven, zonder zicht op welke code werd gebruikt. Op het tabblad Dekking ziet u nu in realtime welke code wordt gebruikt.

Figuur 9 . Een pagina laden en ermee werken via het oude tabblad Dekking

Figuur 10 . Een pagina laden en er interactie mee hebben via het nieuwe tabblad Dekking

Eenvoudigere netwerkbeperkingsopties

De netwerkbeperkingsmenu's in de panelen Netwerk en Prestatie zijn vereenvoudigd en bevatten nu slechts drie opties: Offline , Langzame 3G , wat gebruikelijk is in plaatsen als India, en Snelle 3G , wat gebruikelijk is in plaatsen als de Verenigde Staten.

Figuur 11 . De nieuwe netwerkbeperkingsopties

De throttling-opties zijn aangepast zodat ze overeenkomen 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 ware ervaring van elke optie te matchen.

Asynchrone stapels zijn standaard ingeschakeld

Het selectievakje Async is verwijderd uit het paneel Bronnen . Asynchrone stacktraces zijn nu standaard ingeschakeld. In het verleden was deze optie opt-in vanwege prestatieoverhead. De overhead is nu minimaal genoeg om de functie standaard in te schakelen. Als u asynchrone stacktraces liever uitgeschakeld heeft, kunt u deze uitschakelen in Instellingen of door de opdracht Do not capture async stack traces uit te voeren in het Commandomenu .

DevTools op Google I/O '17

Bekijk hieronder de lezing van de mythische Paul Irish voor meer informatie over waar het DevTools-team het afgelopen jaar aan heeft gewerkt en de grote thema's die ze in de nabije toekomst zullen aanpakken.

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .