Wat is er nieuw in DevTools (Chrome 95)

Jecelyn Yeen

Nieuwe auteurstools voor CSS-lengte

DevTools heeft een eenvoudigere maar flexibele manier toegevoegd om lengtes in CSS bij te werken!

Zoek in het deelvenster Stijlen naar een CSS-eigenschap met lengte (bijvoorbeeld height , padding ).

Beweeg de muis over het eenheidstype en zie dat het eenheidstype onderstreept is. Klik erop om een ​​eenheidstype uit de vervolgkeuzelijst te selecteren.

Beweeg over de eenheidswaarde en uw muisaanwijzer verandert in een horizontale cursor. Sleep horizontaal om de waarde te verhogen of te verlagen. Om de waarde met 10 aan te passen, houdt u de Shift- toets ingedrukt tijdens het slepen.

U kunt de eenheidswaarde nog steeds als tekst bewerken: klik gewoon op de waarde en begin met bewerken.

Chroomuitgaves: 1126178 , 1172993

Verberg problemen op het tabblad Problemen

U kunt nu specifieke problemen verbergen op het tabblad Problemen, zodat u zich alleen kunt concentreren op de problemen die voor u belangrijk zijn.

Ga op het tabblad Problemen met de muis over een probleem dat u wilt verbergen. Klik op Meer opties Meer > Verberg dit soort problemen .

Menu Problemen verbergen

Alle verborgen problemen worden toegevoegd onder het deelvenster Verborgen problemen . Vouw het deelvenster uit. U kunt alle verborgen problemen of een geselecteerd probleem zichtbaar maken.

Deelvenster Verborgen problemen

Chroomuitgave: 1175722

Verbeterde weergave van eigenschappen

DevTools verbeteren de weergave van eigenschappen door:

  • Altijd vetgedrukt en sorteer eerst de eigen eigenschappen in het paneel Console , Bronnen en Eigenschappen .
  • Maak de weergave van eigenschappen in het venster Eigenschappen plat.

Met het onderstaande fragment wordt bijvoorbeeld een URL link gemaakt met twee eigen eigenschappen: user en access , en wordt de waarde van een overgenomen search bijgewerkt.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Probeer de link in de console . Eigen eigenschappen zijn nu vetgedrukt en als eerste gesorteerd. Deze wijzigingen maken het gemakkelijker om aangepaste eigenschappen te herkennen, vooral voor web-API's (bijvoorbeeld URL ) met veel overgenomen eigenschappen.

Eigen eigenschappen zijn vetgedrukt en als eerste gesorteerd

Afgezien van deze wijzigingen zijn de eigenschappen in het venster Eigenschappen nu ook afgevlakt voor een betere foutopsporingservaring voor DOM-eigenschappen, vooral voor webcomponenten .

Maak eigenschappen plat

Chroomuitgaves: 1076820 , 1119900

Vuurtoren 8.4 in het Vuurtorenpaneel

Het Lighthouse- paneel draait nu Lighthouse 8.4. Lighthouse zal nu detecteren of het Largest Containful Paint (LCP) -element een lazy-loaded afbeelding was en adviseert om het loading ervan te verwijderen.

Bekijk Wat is er nieuw in Lighthouse 8.4 voor meer details over de updates.

De luie LCP-audit in een Lighthouse-rapport

Chroomuitgave: 772558

Sorteer fragmenten in het deelvenster Bronnen

De fragmenten in het deelvenster Fragmenten onder het paneel Bronnen zijn nu alfabetisch gesorteerd. Voorheen werd het niet gesorteerd.

Gebruik de fragmentfunctie om opdrachten sneller uit te voeren. Bekijk deze video voor een tip !

Sorteer fragmenten in het deelvenster Bronnen

Chroomuitgave: 1243976

Nieuwe links naar vertaalde releaseopmerkingen en een vertaalfout melden

U kunt nu klikken om de release-opmerkingen van DevTools in 6 andere talen te lezen: Russisch , Chinees , Spaans , Japans , Portugees en Koreaans via het tabblad Wat is er nieuw.

Sinds Chrome 94 kunt u uw voorkeurstaal instellen in DevTools. Als u problemen met de vertalingen heeft ontdekt, kunt u ons helpen deze te verbeteren door een vertaalprobleem te melden via Meer opties > Help > Een vertaalfout melden .

Nieuwe links naar vertaalde releaseopmerkingen en een vertaalfout melden

Chroomafgiften: 1246245 , 1245481

Verbeterde gebruikersinterface voor het DevTools-opdrachtmenu

Vond u het moeilijk om naar een bestand te zoeken in het Commandomenu ? Goed nieuws voor u: de gebruikersinterface van het Command Menu is nu verbeterd!

Open het Commandomenu om naar een bestand te zoeken met de sneltoets Control + P in Windows en Linux, of Command + P in MacOS.

De UI-verbeteringen van het Commandomenu zijn nog steeds gaande, blijf op de hoogte voor meer updates!

Commandomenu

Chroomuitgave: 1201997

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 .