Wat is er nieuw in DevTools (Chrome 80)

Kayce Basken

Ondersteuning voor herdeclaraties let en class in de console

De console ondersteunt nu herdeclaraties van let en class instructies. Het onvermogen om opnieuw aan te geven was een veel voorkomende ergernis voor webontwikkelaars die de console gebruiken om te experimenteren met nieuwe JavaScript-code.

Als u voorheen bijvoorbeeld een lokale variabele opnieuw declareerde met let , gaf de console een foutmelding:

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

Nu staat de console de herdeclaratie toe:

Een screenshot van de console in Chrome 80 die laat zien dat de herdeclaratie van de let slaagt.

Chroom nummer 1004193

Verbeterde foutopsporing in WebAssembly

DevTools is begonnen met het ondersteunen van de DWARF Debugging Standard , wat meer ondersteuning betekent voor het overstappen van code, het instellen van breekpunten en het oplossen van stacktraces in uw brontalen binnen DevTools. Bekijk Verbeterde foutopsporing in WebAssembly in Chrome DevTools voor het volledige verhaal.

Een screenshot van de nieuwe DWARF-aangedreven WebAssembly-foutopsporing.

Updates van het netwerkpaneel

Vraag Initiatorketens aan op het tabblad Initiator

U kunt nu de initiatiefnemers en afhankelijkheden van een netwerkverzoek bekijken als een geneste lijst. Dit kan u helpen begrijpen waarom een ​​bron is opgevraagd, of welke netwerkactiviteit een bepaalde bron (zoals een script) heeft veroorzaakt.

Een screenshot van een Request Initiator Chain op het tabblad Initiator

Nadat u de netwerkactiviteit in het netwerkpaneel hebt geregistreerd , klikt u op een bron 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 hulpbronnen boven de geïnspecteerde hulpbron zijn de initiatiefnemers . 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 veroorzaakte het netwerkverzoek voor https://web.dev/default-627898b5.js .
  • De resources onder de geïnspecteerde resource 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 .

Chroomnummer 842488

Markeer het geselecteerde netwerkverzoek in het Overzicht

Nadat u op een netwerkbron hebt geklikt om deze te inspecteren, plaatst het Netwerkpaneel nu een blauwe rand rond die bron in het Overzicht . Dit kan u helpen detecteren of het netwerkverzoek eerder of later plaatsvindt dan verwacht.

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

Chroomnummer 988253

URL- en padkolommen 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 screenshot van de nieuwe Pad- en URL-kolommen in het Netwerkpaneel.

Klik met de rechtermuisknop op de watervaltabelkop en selecteer Pad of URL om de nieuwe kolommen weer te geven.

Chroomnummer 993366

Bijgewerkte User-Agent-tekenreeksen

DevTools ondersteunt het instellen van een aangepaste User-Agent-reeks via het tabblad Netwerkvoorwaarden . De User-Agent-tekenreeks heeft invloed op de User-Agent HTTP-header die is gekoppeld aan netwerkbronnen, en ook op de waarde van navigator.userAgent .

De vooraf gedefinieerde User-Agent-tekenreeksen zijn bijgewerkt om moderne browserversies weer te geven.

Een screenshot van het User Agent-menu op het tabblad Netwerkvoorwaarden.

Om toegang te krijgen tot Netwerkvoorwaarden opent u het Commandomenu en voert u de opdracht Show Network Conditions uit.

Chroom nummer 1029031

Updates van het auditpaneel

Nieuwe configuratie-UI

De configuratie-UI heeft een nieuw, responsief ontwerp en de configuratieopties voor beperking zijn vereenvoudigd. Zie Controlepaneel Throttling voor meer informatie over de wijzigingen in de gebruikersinterface.

De nieuwe configuratie-UI.

Updates op het tabblad Dekking

Dekkingsmodi per functie of per blok

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

Het vervolgkeuzemenu van de dekkingsmodus.

De dekking moet nu worden gestart door het opnieuw laden van de pagina

Het omschakelen van codedekking zonder opnieuw laden van de pagina is verwijderd omdat de dekkingsgegevens onbetrouwbaar waren. Een functie kan bijvoorbeeld als ongebruikt worden gerapporteerd als de uitvoering ervan lang geleden heeft plaatsgevonden en de garbage collector van V8 deze heeft opgeruimd.

Chroom nummer 1004203

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.

Wat is er nieuw in DevTools

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