Wat is er nieuw in DevTools (Chrome 108)

Jecelyn Yeen

Tips voor inactieve CSS-eigenschappen

De ontwikkelaarstools herkennen nu CSS-stijlen die geldig zijn maar geen zichtbaar effect hebben. In het deelvenster Stijlen worden inactieve eigenschappen in de ontwikkelaarstools gedimd weergegeven. Beweeg de muis over het pictogram ernaast om te begrijpen waarom de regel geen zichtbaar effect heeft.

Tips voor inactieve CSS-eigenschappen.

Chromium-probleem: 1178508

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

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

XPath- en tekstselectoren in het Recorder-paneel.

Chromium-problemen: 1327206 , 1327209

Doorloop stapsgewijze expressies

Je kunt nu tijdens het debuggen stap voor stap door door komma's gescheiden expressies lopen. Dit verbetert de debugbaarheid van geminificeerde code.

Doorloop door komma's gescheiden expressies.

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

Gegeven de onderstaande code,

function foo() {}

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

Transpilers en minifiers kunnen ze 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 geminificeerde en originele code. Het is nog verwarrender wanneer source maps worden gebruikt om de geminificeerde code te debuggen in termen van de originele code, omdat de ontwikkelaar dan naar puntkomma's kijkt (die intern door de toolchain in komma's zijn veranderd), maar de debugger stopt daar niet op.

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 regels om een ​​enkel script of een patroon van scripts te negeren .

Het tabblad 'Negeerlijst'.

Chromium-probleem: 1356517

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

  • Automatisch aanvullen van CSS-eigenschapsnamen in het deelvenster Stijlen bij het indrukken van de spatiebalk. ( 1343316 )
  • Automatisch scrollen in het kruimelpad van het Element- paneel uitschakelen. ( 1369734 )

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