Wat is er nieuw in DevTools (Chrome 80)

Kayce Basken

Ondersteuning voor herdeclaraties van 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 waaruit blijkt 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. 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 aan bod is gekomen in de serie Wat is er nieuw in DevTools .

Chroom 126

Chroom 125

Chroom 124

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

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59

,

Kayce Basques

Ondersteuning voor let and class Redeclarations in the Console

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

Bijvoorbeeld, bij bijvoorbeeld het opnieuw aannemen van een lokale variabele met let , zou de console een fout gooien:

Een screenshot van de console in Chrome 78 waaruit blijkt dat de Red -Slaration faalt.

Nu staat de console de redeclaratie toe:

Een screenshot van de console in Chrome 80 waaruit blijkt dat de laat -red -eclaratie slaagt.

Chromium Issue #1004193

Verbeterde Webassembly Debugging

DevTools is begonnen met het ondersteunen van de dwerg debugging -standaard , wat betekent dat verhoogde ondersteuning voor het stappen over code, het instellen van breekpunten en het oplossen van stapeltraces in uw brontalen in Devtools. Bekijk verbeterde WebAssembly -foutopsporing in Chrome Devtools voor het volledige verhaal.

Een screenshot van de nieuwe debuggen van de dwerg-aangedreven webassembly.

Netwerkpaneel updates

Vraag initiatorketens aan op het tabblad Initiator

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

Een screenshot van een aanvraaginitiatorketen op het tabblad Initiator

Na het loggen van netwerkactiviteit in het netwerkpaneel , klikt u op een resource en gaat u vervolgens naar het tabblad Initiator om de aanvraaginitiatorketen te bekijken:

  • De geïnspecteerde bron is vet. In de bovenstaande screenshot is https://web.dev/default-627898b5.js de geïnspecteerde bron.
  • De bronnen boven de geïnspecteerde bron zijn de initiatiefnemers . In de bovenstaande screenshot 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 bronnen onder de geïnspecteerde bron zijn de afhankelijkheden . In de bovenstaande screenshot 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 Issue #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 screenshot van het overzichtsvenster dat de geïnspecteerde bron benadrukt.

Chromium Issue #988253

URL- en padkolommen in het netwerkpaneel

Gebruik het nieuwe pad- en URL -kolommen in het netwerkpaneel om het absolute pad of volledige URL van elke netwerkbron te zien.

Een screenshot van het nieuwe pad- en URL -kolommen in het netwerkpaneel.

Klik met de rechtermuisknop op de koptekst van de waterval en selecteer pad of URL om de nieuwe kolommen weer te geven.

Chromium Issue #993366

Bijgewerkte tekenreeksen van gebruikersagent

DevTools ondersteunt het instellen van een aangepaste gebruikersagentreeks via het tabblad Netwerkcondities . De gebruikersagentreeks beïnvloedt de HTTP-header User-Agent die is gekoppeld aan netwerkbronnen, en ook de waarde van navigator.userAgent .

De vooraf gedefinieerde tekenreeksen voor gebruikersagent zijn bijgewerkt om moderne browserversies weer te geven.

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

Om toegang te krijgen tot netwerkomstandigheden , opent u het opdrachtmenu en voert u de opdracht Show Network Conditions uit.

Chromium Issue #1029031

Auditspaneel updates

Nieuwe configuratie UI

De configuratie -gebruikersinterface heeft een nieuw, responsief ontwerp en de throttling -configuratie -opties zijn vereenvoudigd. Zie het auditspaneel voor meer informatie over de Throttling UI -wijzigingen.

De nieuwe configuratie -gebruikersinterface.

Tabblad Updates

Per-functie of dekkingsmodi per blok

Het tabblad Dekking heeft een nieuw vervolgkeuzemenu waarmee u kunt aangeven of codedekkingsgegevens per functie of per blok moeten worden verzameld. Per blokdekking is meer gedetailleerd maar ook veel duurder om te verzamelen. DevTools gebruikt nu standaard dekking per functie .

Het vervolgkeuzemenu van de dekkingsmodus.

Dekking moet nu worden geïnitieerd door een pagina opnieuw laden

Het schakelen van codedekking zonder een pagina die opnieuw wordt geladen, is verwijderd omdat de dekkingsgegevens onbetrouwbaar waren. Een functie kan bijvoorbeeld als ongebruikt worden gerapporteerd als de uitvoering ervan lang geleden was en de afvalverzamelaar van V8 heeft opgeruimd.

Chromium Issue #1004203

Download de voorbeeldkanalen

Overweeg het gebruik van de Chrome Canary , Dev of Beta als uw standaardontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, test geavanceerde webplatform-API's en vinden 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 dat verband houdt met Devtools.

  • Dien een suggestie of feedback aan ons via CRBUG.com .
  • Meld een probleem met DevTools met behulp van de meer optiesMeer > Help > melden een devTools -problemen in devtools.
  • Tweet op @chromedevtools .
  • Laat reacties achter op ons wat nieuw is in devtools YouTube -video's of devtools tips YouTube -video's .

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .

Chroom 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 werd geannuleerd .

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59