Wat is er nieuw in DevTools (Chrome 60)

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

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 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 corrigeren.

Een Lighthouse-rapport

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.

Beweeg de muis over een badge van derden in het netwerkpaneel

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

Beweeg de muis over een badge van derden in de console

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.

Groeperen op product op het tabblad Bottom-Up

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.

Ga verder naar hier

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.

Hoe de console een voorbeeld van objecten kon bekijken

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

Hoe de console nu een voorbeeld van objecten bekijkt

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.

Het nieuwe contextselectiemenu

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.

Een pagina laden en ermee werken via het oude tabblad Dekking

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

Een pagina laden en er interactie mee hebben via het nieuwe 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.

De nieuwe netwerkbeperkingsopties

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 Asynchrone 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 liever asynchrone stacktraces 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 het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze 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 is behandeld in de What's New In DevTools- serie.

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chroom 80

Chroom 79

Chroom 78

Chroom 77

Chroom 76

Chroom 75

Chroom 74

Chroom 73

Chroom 72

Chroom 71

Chroom 70

Chroom 68

Chroom 67

Chroom 66

Chroom 65

Chroom 64

Chroom 63

Chroom 62

Chroom 61

Chroom 60

Chroom 59