Wat is er nieuw in DevTools (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Netwerkreactieheaders overschrijven

U kunt nu antwoordheaders in het netwerkpaneel overschrijven. Voorheen had u toegang tot de webserver nodig om te experimenteren met HTTP-antwoordheaders.

Met responsheader-overschrijvingen kunt u lokaal prototypes maken van oplossingen voor verschillende headers, inclusief maar niet beperkt tot:

Om een ​​koptekst te overschrijven, navigeert u naar Netwerk > Kopteksten > Reactiekopteksten , beweegt u de muis over de waarde van een koptekst en klikt u op Bewerking. en bewerk het.

CORS-fout opgelost door een header-override.

U kunt ook aangepaste kopteksten toevoegen.

Een aangepaste koptekst toevoegen.

Als u alle overschrijvingen op één plek wilt bewerken, bewerkt u het .headers -bestand in Bronnen > Overschrijvingen . Daar kunt u ook op Overschrijvingsregel toevoegen klikken om meerdere verzoeken te overschrijven met behulp van jokertekens ( * ).

Alle overschrijvingen bewerken.

Chroomuitgave: 1288023 .

Verbeteringen in foutopsporing in Nuxt, Vite en Rollup

Om u te helpen problemen sneller op te sporen tijdens het opsporen van fouten, verbergt de verbeterde stacktracering nu frames die afkomstig zijn van bronnen die zijn gegenereerd door Nuxt 3.3 of hoger. DevTools slaat dergelijke frames over:

  • In Console- traceringen, onder de link N more frames weergeven .
  • In Bronnen > Aanroepstapel , onder Selectievakje. Frames op de negeerlijst weergeven .

De stacktrace voor en na het inschakelen van negeerlijsten van derden.

Om u deze verbeteringen te bieden, hebben de DevTools-, Nuxt-, Vite- en Rollup-teams samengewerkt om de x_google_ignoreList bronkaartextensie te adopteren:

Het DevTools-team wil graag zijn dank uitspreken aan de Nuxt-, Vite- en Rollup-teams voor het mogelijk maken hiervan. Wij waarderen uw inspanningen en medewerking, die essentieel waren voor het succes van deze implementatie. Nogmaals bedankt voor uw bijdragen!

CSS-verbeteringen in Elementen > Stijlen

Ongeldige CSS-eigenschappen en -waarden

Om u te helpen CSS-problemen sneller te diagnosticeren, is het deelvenster Stijlen nu doorgestreept:

  • Een volledige CSS-declaratie (eigenschap en waarde) wanneer de CSS-eigenschap ongeldig is .
  • Alleen de waarde wanneer de CSS-eigenschap geldig is, maar de waarde ongeldig is.

Ongeldige eigenschapsnaam en ongeldige eigenschapswaarde.

Het DevTools-team wil Yisi (一丝) bedanken voor het realiseren van deze verbetering.

Koppelingen naar sleutelframes in de animatie-steno-eigenschap

De animation steno-CSS-eigenschap bevat nu koppelingen naar de overeenkomstige @keyframes at-rules , zodat u sneller door het stijlvenster kunt navigeren.

Koppelingen naar sleutelframes in de animatie-steno-eigenschap.

Chroomuitgave: 1420656 .

Nieuwe console-instelling: automatisch aanvullen bij Enter

Vanaf de vorige versie (112) kunt u de DevTools Console configureren om een ​​suggestie voor automatisch aanvullen toe te passen wanneer u op Enter drukt.

Om een ​​suggestie voor automatisch aanvullen te accepteren, kunt u standaard Tab of Arrow right drukken. Als u ook automatisch wilt aanvullen met Enter , schakelt u dit in Instellingen. Instellingen > Console > Selectievakje. Accepteer suggestie voor automatisch aanvullen op Enter .

Het bijbehorende selectievakje in Instellingen.

Bovendien is de tekst van een andere instelling nu gebruiksvriendelijker: Selectievakje. Beschouw code-evaluatie als gebruikersactie .

Chroomuitgave: 1276960 .

Command Menu benadrukt geschreven bestanden

Het snelopenende dialoogvenster in het Commandomenu maakt nu de op de negeerlijst staande bestanden van derden grijs om meer nadruk te leggen op de bestanden die u hebt geschreven.

Een script dat op de negeerlijst staat in het snelopendialoogvenster voor en na de wijziging.

Chroomuitgave: 1424345 .

Beëindiging van JavaScript Profiler: fase twee

Al in Chrome 58 was het DevTools-team van plan om de JavaScript Profiler uiteindelijk af te schaffen en Node.js- en Deno-ontwikkelaars het prestatiepaneel te laten gebruiken voor het profileren van JavaScript-CPU-prestaties.

DevTools versie 113 start fase twee van de vierfasige beëindiging van JavaScript Profiler . Tijdens deze fase kunt u het paneel nog steeds openen, maar de gebruikersinterface is niet langer beschikbaar.

Om de CPU-prestaties te profileren, klikt u op Ga naar prestatiepaneel .

Beëindiging van JavaScript Profiler.

Chroomuitgave: 1354548 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

  • Een bug opgelost die ervoor zorgde dat Pretty-printing in het Bronnenpaneel de namen van variabelen met Unicode-tekens verkeerd verwerkte ( 1425055 ).
  • Het tabblad Problemen heeft een nieuw bericht toegevoegd voor problemen met automatisch aanvullen met betrekking tot niet-standaard HTML-waarden ( 1399414 ).

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 .