Wat is er nieuw in DevTools (Chrome 113)

Sofia Emelianova
Sofia Emelianova

Netwerkresponsheaders overschrijven

Je kunt nu de responsheaders overschrijven in het netwerkpaneel . Voorheen had je toegang tot de webserver nodig om met HTTP-responsheaders te experimenteren.

Met response header overrides kunt u lokaal oplossingen testen voor diverse headers, waaronder maar niet beperkt tot:

Om een ​​header te overschrijven, ga naar Netwerk > Headers > Reactieheaders , beweeg de muis over de waarde van een header en klik. Bewerking. en bewerk het.

CORS-fout verholpen door header-override.

Je kunt ook aangepaste kopteksten toevoegen.

Een aangepaste header toevoegen.

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

Alle overschrijvingen bewerken.

Chromium-probleem: 1288023 .

Verbeteringen in het debuggen van Nuxt, Vite en Rollup

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

  • In de console- traceringen, onder de link 'Toon meer frames' .
  • In Bronnen > Oproepstapel , onder Selectievakje. Toon frames die op de negeerlijst staan .

De stacktrace vóór en na het inschakelen van de negeerlijst voor derden.

Om deze verbeteringen mogelijk te maken, hebben de teams van DevTools, Nuxt, Vite en Rollup samengewerkt om de source map-extensie x_google_ignoreList te implementeren:

Het DevTools-team wil graag de teams van Nuxt, Vite en Rollup bedanken voor hun bijdrage. We waarderen jullie inzet en samenwerking enorm, die essentieel waren voor het succes van deze implementatie. Nogmaals hartelijk dank voor jullie bijdragen!

CSS-verbeteringen in Elementen > Stijlen

Ongeldige CSS-eigenschappen en -waarden

Om u te helpen CSS-problemen sneller te diagnosticeren, worden in het deelvenster Stijlen de volgende opties nu doorgestreept:

  • Een volledige CSS-declaratie (eigenschap en waarde) wanneer de CSS-eigenschap ongeldig is .
  • De waarde wordt alleen weergegeven wanneer de CSS-eigenschap geldig is, maar de waarde ongeldig.

Ongeldige eigenschapsnaam en ongeldige eigenschapswaarde.

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

Links naar sleutelframes in de animatie-shorthand-eigenschap

De CSS-eigenschap ` animation shorthand` bevat nu links naar de bijbehorende @keyframes at-rules , waardoor je sneller door het deelvenster Stijlen kunt navigeren.

Links naar sleutelframes in de animatie-shorthand-eigenschap.

Chromium-probleem: 1420656 .

Nieuwe console-instelling: Automatisch aanvullen bij Enter

Vanaf de vorige versie (112) kunt u de DevTools Console zo configureren dat er een suggestie voor automatisch aanvullen wordt weergegeven wanneer u op Enter drukt.

Standaard kunt u een suggestie voor automatisch aanvullen accepteren door Tab of Arrow right te drukken. Om ook automatisch aanvullen met Enter te accepteren, schakelt u deze optie in. Instellingen. Instellingen > Console > Selectievakje. Accepteer de autocomplete-suggestie door op Enter te drukken .

Het bijbehorende selectievakje in de instellingen.

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

Chromium-probleem: 1276960 .

Het opdrachtmenu legt de nadruk op door u gemaakte bestanden.

Het dialoogvenster voor snel openen in het opdrachtmenu toont nu grijs weergegeven de bestanden van derden die op de negeerlijst staan, zodat de nadruk meer komt te liggen op de bestanden die u zelf hebt gemaakt.

Een script dat op de negeerlijst staat in het dialoogvenster voor snel openen, zowel vóór als na de wijziging.

Chromium-probleem: 1424345 .

Uitfasering van JavaScript Profiler: Fase twee

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

DevTools versie 113 markeert de start van fase twee van de vierfasige uitfasering van de 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 het paneel Prestaties' .

Het JavaScript-profilerprogramma wordt afgeschaft.

Chromium-probleem: 1354548 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

  • Er is een bug verholpen die ervoor zorgde dat de opmaakfunctie in het paneel Bronnen variabelenamen met Unicode-tekens onjuist verwerkte ( 1425055 ).
  • Op het tabblad Problemen is een nieuw bericht toegevoegd voor problemen met automatisch aanvullen met betrekking tot niet-standaard HTML-waarden ( 1399414 ).

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

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

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .