Wat is er nieuw in DevTools (Chrome 108)

Jecelyn Yeen

Tips voor inactieve CSS-eigenschappen

DevTools identificeert nu CSS-stijlen die geldig zijn maar geen zichtbaar effect hebben. In het deelvenster Stijlen vervaagt DevTools de inactieve eigenschappen. Beweeg over het pictogram ernaast om te begrijpen waarom de regel geen zichtbaar effect heeft.

Tips voor inactieve CSS-eigenschappen.

Chroomuitgave: 1178508

Automatische detectie van XPath- en tekstkiezers in het Recorder-paneel

Het Recorder- paneel ondersteunt nu XPath- en tekstkiezers. Begin met het opnemen van een gebruikersstroom en de recorder kiest automatisch de XPath en de kortste unieke tekst van een element als selector, indien beschikbaar.

XPath- en tekstkiezers in het Recorder-paneel.

Chroomuitgaves: 1327206 , 1327209

Door komma's gescheiden uitdrukkingen lopen

U kunt nu door komma's gescheiden expressies doorlopen tijdens het opsporen van fouten. Dit verbetert de debugbaarheid van verkleinde code.

Door komma's gescheiden uitdrukkingen doorlopen.

Voorheen ondersteunde DevTools alleen het doorlopen van door puntkomma's gescheiden expressies.

Gezien de onderstaande code,

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Transpilers en minifiers kunnen ze omzetten in door komma's gescheiden uitdrukkingen.

function bar(){return foo(),foo(),42}

Dit zorgt voor verwarring tijdens het debuggen, omdat het stapgedrag verschillend is tussen verkleinde en geschreven code. Het is zelfs nog verwarrender bij het gebruik van bronkaarten om de verkleinde code te debuggen in termen van de originele code, omdat de ontwikkelaar dan naar puntkomma's kijkt (die onder de motorkap door de toolchain in komma's zijn omgezet), maar de debugger stopt niet bij hen.

Chroomuitgave: 1370200

Verbeterde instelling voor de negeerlijst

Ga naar Instellingen > Negeerlijst . DevTools verbetert het ontwerp om u te helpen de regels zo te configureren dat een enkel script of patroon van scripts wordt genegeerd .

Het tabblad Negeerlijst.

Chroomuitgave: 1356517

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

  • Naam van CSS-eigenschap automatisch aanvullen in het deelvenster Stijlen wanneer u op de spatiebalk drukt. ( 1343316 )
  • Verwijder automatisch scrollen in de broodkruimel van het deelvenster Element . ( 1369734 )

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 .