Wat is er nieuw in DevTools (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Netwerkresponsheaders overschrijven

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

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

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

CORS-fout opgelost door een header-override.

U kunt ook aangepaste headers toevoegen.

Een aangepaste header toevoegen.

Om alle overschrijvingen op één plek te bewerken, bewerkt u het .headers -bestand in Bronnen > Overrides . Daar kunt u ook op Override-regel toevoegen klikken om meerdere aanvragen te overschrijven met behulp van jokers ( * ).

Alle overschrijvingen bewerken.

Chromium-probleem: 1288023 .

Verbeteringen in debugging van Nuxt, Vite en Rollup

Om u te helpen problemen sneller te lokaliseren tijdens het debuggen, verbergt de verbeterde stack trace nu frames die afkomstig zijn van bronnen die zijn gegenereerd door Nuxt 3.3 of later. DevTools slaat dergelijke frames over:

  • In Console traces, onder de link Nog N frames weergeven .
  • In Bronnen > Call Stack , onder Selectievakje. Toon frames die niet genegeerd kunnen worden .

De stack trace vóór en na het inschakelen van de negeerlijst van derden.

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

Het DevTools-team wil graag de teams van Nuxt, Vite en Rollup bedanken voor het mogelijk maken hiervan. We waarderen jullie inzet en samenwerking, die essentieel waren voor het succes van deze implementatie. Nogmaals bedankt voor jullie 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 voorzien van een streep door:

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

Ongeldige eigenschapsnaam en ongeldige eigenschapswaarde.

Het DevTools-team wil graag zijn dank uitspreken aan Yisi (一丝) voor het realiseren van deze verbetering.

Links naar sleutelframes in de animatie-steno-eigenschap

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

Koppelingen naar sleutelframes in de animatie-steno-eigenschap.

Chromium-probleem: 1420656 .

Nieuwe console-instelling: automatisch aanvullen bij invoeren

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 op Tab of Arrow right drukken. Om ook automatisch aan te vullen met Enter , schakelt u Instellingen. Instellingen > Console > Selectievakje. Accepteer de suggestie voor automatisch aanvullen bij Enter .

Het overeenkomstige selectievakje in Instellingen.

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

Chromium-probleem: 1276960 .

Commandomenu benadrukt door auteurs gemaakte bestanden

In het dialoogvenster Snel openen in het menu Opdracht worden de bestanden van derden die u wilt negeren, nu grijs weergegeven. Zo wordt meer nadruk gelegd op de bestanden die u zelf hebt gemaakt.

Een script dat in het dialoogvenster Snel openen wordt genegeerd, vóór en na de wijziging.

Chromium-probleem: 1424345 .

JavaScript Profiler-deprecation: 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 de CPU-prestaties van JavaScript.

DevTools versie 113 start fase twee van de vierfasen-deprecation van JavaScript Profiler . Tijdens deze fase kunt u het paneel nog steeds openen, maar de gebruikersinterface is niet langer beschikbaar.

Om een ​​profiel van de CPU-prestaties te maken, klikt u op Ga naar het paneel Prestaties .

JavaScript Profiler is verouderd.

Chromium-probleem: 1354548 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

  • Er is een bug opgelost waardoor pretty-printing in het Bronnenpaneel variabelenamen met Unicode-tekens onjuist verwerkte ( 1425055 ).
  • Op het tabblad Problemen is een nieuw bericht toegevoegd over problemen met automatisch aanvullen met betrekking tot niet-standaard HTML-waarden ( 1399414 ).

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om nieuwe functies, updates of iets anders met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.