Wat is er nieuw in DevTools (Chrome 80)

Kayce Basken
Kayce Basques
X GitHub

Ondersteuning voor het opnieuw declareren van let en class in de console.

De console ondersteunt nu het opnieuw declareren van let en class statements. Het feit dat dit niet mogelijk was, was een veelvoorkomende ergernis voor webontwikkelaars die de console gebruikten om te experimenteren met nieuwe JavaScript-code.

Als je bijvoorbeeld eerder een lokale variabele opnieuw declareerde met let , gaf de console een foutmelding:

Een schermafbeelding van de console in Chrome 78 waaruit blijkt dat de herdeclaratie van `let` mislukt.

Nu staat de console herdeclaratie toe:

Een schermafbeelding van de console in Chrome 80 waaruit blijkt dat de herdeclaratie van `let` is geslaagd.

Chromium-probleem #1004193

Verbeterde WebAssembly-debugging

DevTools biedt nu ondersteuning voor de DWARF-debuggingstandaard . Dit betekent dat je nu beter in staat bent om code stap voor stap te doorlopen, breakpoints in te stellen en stacktraces te debuggen in je broncode binnen DevTools. Lees het artikel 'Verbeterde WebAssembly-debugging in Chrome DevTools' voor meer informatie.

Een screenshot van de nieuwe DWARF-gebaseerde WebAssembly-debugging.

Updates van het netwerkpaneel

Verzoek-initiatorketens in het tabblad Initiator

Je kunt nu de initiators en afhankelijkheden van een netwerkverzoek bekijken als een geneste lijst. Dit kan je helpen te begrijpen waarom een ​​resource is aangevraagd, of welke netwerkactiviteit een bepaalde resource (zoals een script) heeft veroorzaakt.

Een schermafbeelding van een Request Initiator Chain in het tabblad Initiator.

Nadat u de netwerkactiviteit in het paneel Netwerk hebt geregistreerd , klikt u op een resource en gaat u vervolgens naar het tabblad Initiator om de Request Initiator Chain te bekijken:

  • De geïnspecteerde bron is vetgedrukt. In de bovenstaande schermafbeelding is https://web.dev/default-627898b5.js de geïnspecteerde bron.
  • De bronnen boven de geïnspecteerde bron zijn de initiators . In de bovenstaande schermafbeelding is https://web.dev/bootstrap.js de initiator van https://web.dev/default-627898b5.js . Met andere woorden, https://web.dev/bootstrap.js heeft het netwerkverzoek voor https://web.dev/default-627898b5.js veroorzaakt.
  • De bronnen onder de geïnspecteerde bron zijn de afhankelijkheden . In de bovenstaande schermafbeelding is https://web.dev/chunk-f34f99f7.js een afhankelijkheid van https://web.dev/default-627898b5.js . Met andere woorden, https://web.dev/default-627898b5.js veroorzaakte het netwerkverzoek voor https://web.dev/chunk-f34f99f7.js .

Chromium-probleem #842488

Markeer het geselecteerde netwerkverzoek in het overzicht.

Nadat je op een netwerkbron hebt geklikt om deze te inspecteren, verschijnt er een blauwe rand rond die bron in het overzicht in het netwerkpaneel. Dit kan je helpen te detecteren of het netwerkverzoek eerder of later plaatsvindt dan verwacht.

Een schermafbeelding van het overzichtsvenster waarin de geïnspecteerde bron is gemarkeerd.

Chromium-probleem #988253

De kolommen URL en pad in het netwerkpaneel

Gebruik de nieuwe kolommen Pad en URL in het paneel Netwerk om het absolute pad of de volledige URL van elke netwerkbron te bekijken.

Een schermafbeelding van de nieuwe kolommen Pad en URL in het Netwerkpaneel.

Klik met de rechtermuisknop op de kop van de Waterfall- tabel en selecteer Pad of URL om de nieuwe kolommen weer te geven.

Chromium-probleem #993366

Bijgewerkte User-Agent-strings

DevTools biedt de mogelijkheid om een ​​aangepaste User-Agent-string in te stellen via het tabblad Netwerkcondities . De User-Agent-string beïnvloedt de User-Agent HTTP-header die aan netwerkbronnen is gekoppeld, en ook de waarde van navigator.userAgent .

De vooraf gedefinieerde User-Agent-strings zijn bijgewerkt om overeen te komen met moderne browserversies.

Een schermafbeelding van het menu Gebruikersagent in het tabblad Netwerkcondities.

Om de netwerkcondities te bekijken, opent u het opdrachtmenu en voert u de opdracht Show Network Conditions ' uit.

Chromium-probleem #1029031

Updates van het auditpanel

Nieuwe configuratie-UI

De configuratie-interface heeft een nieuw, responsief ontwerp en de configuratieopties voor throttling zijn vereenvoudigd. Zie 'Throttling in het auditpaneel' voor meer informatie over de wijzigingen in de throttling-interface.

De nieuwe configuratie-UI.

Updates van het tabblad Dekking

Dekkingsmodi per functie of per blok

Het tabblad 'Dekking' heeft een nieuw keuzemenu waarmee u kunt aangeven of de codedekkingsgegevens per functie of per blok moeten worden verzameld. Dekking per blok is gedetailleerder, maar ook veel duurder om te verzamelen. DevTools gebruikt nu standaard dekking per functie .

Het keuzemenu voor de dekkingsmodus.

De dekking moet nu worden gestart door de pagina opnieuw te laden.

Het in- en uitschakelen van code coverage zonder de pagina opnieuw te laden is verwijderd omdat de coverage-gegevens onbetrouwbaar waren. Een functie kon bijvoorbeeld als ongebruikt worden gerapporteerd, terwijl de uitvoering ervan lang geleden had plaatsgevonden en de garbage collector van V8 deze al had opgeruimd.

Chromium-probleem #1004203

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.

Wat is er nieuw in DevTools?

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