Wat is er nieuw in DevTools (Chrome 108)

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 doorlopen

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 lopen.

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 het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze 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 .