Wat is er nieuw in DevTools (Chrome 108)

Jecelyn Yeen

Tips voor inactieve CSS-eigenschappen

DevTools herkent nu geldige CSS-stijlen die geen zichtbaar effect hebben. In het deelvenster Stijlen vervaagt DevTools de inactieve eigenschappen. Beweeg de muis over het pictogram ernaast om te zien waarom de regel geen zichtbaar effect heeft.

Tips voor inactieve CSS-eigenschappen.

Chromium-probleem: 1178508

XPath en tekstselectoren automatisch detecteren in het Recorder-paneel

Het Recorder- paneel ondersteunt nu XPath- en tekstselectoren. Start de opname van een gebruikersstroom en de recorder kiest automatisch de XPath en de kortste unieke tekst van een element als selector, indien beschikbaar.

XPath- en tekstselectoren in het paneel Recorder.

Chromium-problemen: 1327206 , 1327209

Door komma's gescheiden expressies stappen

Je kunt nu door komma-gescheiden expressies stappen tijdens het debuggen. Dit verbetert de debugbaarheid van geminimaliseerde code.

Door komma-gescheiden expressies bladeren.

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

Gegeven de onderstaande code,

function foo() {}

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

Transpilers en minifiers kunnen deze omzetten in door komma's gescheiden expressies.

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

Dit zorgt voor verwarring tijdens het debuggen, omdat het stapgedrag verschilt tussen geminimaliseerde en geschreven code. Het is nog verwarrender wanneer broncodes worden gebruikt om de geminimaliseerde code te debuggen ten opzichte van de originele code, omdat de ontwikkelaar dan naar puntkomma's kijkt (die door de toolchain in komma's zijn omgezet), maar de debugger daar niet bij stopt.

Chromium-probleem: 1370200

Verbeterde instelling voor de negeerlijst

Ga naar Instellingen > Negeerlijst . DevTools heeft het ontwerp verbeterd om u te helpen bij het configureren van de regels om één script of patroon van scripts te negeren .

Het tabblad Negeerlijst.

Chromium-probleem: 1356517

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

  • Vul de naam van een CSS-eigenschap automatisch aan in het deelvenster Stijlen wanneer u op de spatiebalk drukt. ( 1343316 )
  • Automatisch scrollen verwijderen uit het broodkruimelpad van het Elementenpaneel . ( 1369734 )

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.