Wat is er nieuw in DevTools (Chrome 113)

Sofia Emelianova

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:

• Cross-Origin Resource Sharing (CORS)-headers
• Machtigingen-beleidskoppen
• Cross-Origin isolatieheaders

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 en bewerk het.

U kunt ook aangepaste kopteksten 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 ( * ).

Chroomuitgave: 1288023 .

Verbeteringen in foutopsporing in Nuxt, Vite en Rollup

Om u te helpen problemen sneller op te sporen tijdens het debuggen, 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 Frames op de negeerlijst weergeven .

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

• Nuxt 3.3 Vrijgeven
• Vite-serveropties
• Configuratieopties voor samenvatten

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.

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.

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 > Console > Accepteer suggestie voor automatisch aanvullen op Enter .

Bovendien is de tekst van een andere instelling nu gebruiksvriendelijker: 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.

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 .

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.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op 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 .