Wat is er nieuw in DevTools (Chrome 95)

Jecelyn Yeen

Nieuwe tools voor het schrijven van CSS-lengtes

DevTools heeft een eenvoudigere en flexibelere manier toegevoegd om lengtes in CSS bij te werken!

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

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

Beweeg de muis 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.

Chromium-problemen: 1126178 , 1172993

Problemen verbergen op het tabblad Problemen

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

Beweeg in het tabblad Problemen over een probleem dat u wilt verbergen. Klik op Meer opties. > Verberg problemen zoals deze .

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.

Chromium-probleem: 1175722

Verbeterde weergave van eigenschappen

DevTools verbeteren de weergave van eigenschappen door:

• Maak uw eigen eigenschappen altijd vetgedrukt en sorteer ze eerst in de Console , het Bronnenpaneel en het Eigenschappenvenster .
• Maak de weergave van eigenschappen plat in het deelvenster Eigenschappen .

Het onderstaande fragment maakt bijvoorbeeld een URL link met twee eigen eigenschappen: user en access , en werkt de waarde van een overgenomen eigenschap search bij.

/* 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 worden nu vetgedrukt en als eerste gesorteerd. Deze wijzigingen maken het gemakkelijker om aangepaste eigenschappen te herkennen, met name voor web-API's (bijv. URL ) met veel overgenomen eigenschappen.

Naast deze wijzigingen zijn de eigenschappen in het deelvenster Eigenschappen nu ook afgevlakt voor een betere foutopsporing bij DOM-eigenschappen, met name voor webcomponenten .

Chromium-problemen: 1076820 , 1119900

Vuurtoren 8.4 in het Vuurtorenpaneel

Het Lighthouse -paneel draait nu op Lighthouse 8.4. Lighthouse detecteert nu 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 informatie over de updates.

Chromium-probleem: 772558

Snippets sorteren in het Bronnenpaneel

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

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

Chromium-probleem: 1243976

Nieuwe links naar vertaalde release-opmerkingen en het melden van een vertaalfout

U kunt nu klikken om de release-opmerkingen voor 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 ondervindt met de vertalingen, kunt u ons helpen deze te verbeteren door een vertaalprobleem te melden via Meer opties > Help > Een vertaalfout melden .

Chromium-problemen: 1246245 , 1245481

Verbeterde gebruikersinterface voor het DevTools-opdrachtmenu

Vond u het lastig om een bestand te vinden in het menu 'Opdracht' ? Goed nieuws: de gebruikersinterface van het menu 'Opdracht' is nu verbeterd!

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

We zijn nog steeds bezig met het verbeteren van de gebruikersinterface van het opdrachtmenu. Blijf op de hoogte voor meer updates!

Chromium-probleem: 1201997

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.

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.