Wat is er nieuw in DevTools (Chrome 111)

Jecelyn Yeen

HD-kleuren debuggen met het deelvenster Stijlen

Er komen nieuwe CSS-kleurtypen en -ruimtes naar het web! Het is net zo spannend dat DevTools nieuwe tools heeft geïntroduceerd om ontwikkelaars te helpen bij het creëren, converteren en debuggen van High Definition-kleuren.

Het deelvenster Stijlen ondersteunt nu 12 nieuwe kleurruimten en 7 nieuwe kleurgamma's, zoals beschreven in de CSS Color Level 4- specificatie. Zie de High Definition CSS Color Guide voor een uitgebreid overzicht van de kleuropties die beschikbaar zijn op internet.

Hier zijn voorbeelden van CSS-kleurdefinities met color() , lch() , oklab() en color-mix() .

Wanneer u de functie color-mix() gebruikt, kunt u de uiteindelijke kleuruitvoer bekijken in het deelvenster Berekend .

De kleurenkiezer ondersteunt alle nieuwe kleurruimten met meer functies. Klik bijvoorbeeld op de kleurstaal van color(display-p3 1 0 1) . Er is ook een grenslijn voor de kleurruimte toegevoegd, die onderscheid maakt tussen de sRGB en display-p3 kleurruimten voor een duidelijker inzicht in de kleurruimte van uw geselecteerde kleur.

DevTools ondersteunt het converteren van kleuren tussen kleurformaten. Gebruik het pictogram 'Kleurformaat wijzigen' om de conversiepop-up te openen, of gebruik Shift + klik op een kleurstaal in het deelvenster Stijlen .

Bij het converteren is het belangrijk om te weten of de conversie is bijgesneden om in de ruimte te passen. DevTools plaatst een waarschuwingspictogram naast de geconverteerde kleur om u te waarschuwen voor deze bijsnijding.

Bovendien kunt u kleuren van uw scherm kiezen met de nieuwe sneltoets. Druk op 'c' om het pipet te activeren en op Escape om het te deactiveren. Het pipet bemonstert alleen kleuren in de sRGB-kleurruimte. Als u bijvoorbeeld de color(display-p3 1 0 1) probeert te bemonsteren, die buiten de sRGB-kleurruimte valt, zal het pipet de kleur bijsnijden tot de dichtstbijzijnde kleur in de sRGB-kleurruimte, namelijk magenta color(display-p3 0.92 0.2 0.97) .

Ten slotte is de instelling Kleuropmaak nu verouderd om ruimte te maken voor de nieuwe HD-kleuropmaak.

Chromium-problemen: 1073895 , 1395782 , 1408777 , 1395782 , 1392717 , 1382409 , 1392054

Verbeterde breekpunt-UX

Via het opnieuw ontworpen deelvenster Breekpunten hebt u snel toegang tot veelgebruikte functies, met name voor het deactiveren, bewerken en verwijderen van breekpunten.

Dit zijn enkele hoogtepunten: - Beide opties voor pauze-uitzonderingen zijn verplaatst naar het deelvenster Breekpunten en gelabeld met tekst om het duidelijker te maken.

• Breekpunten worden gegroepeerd per bestand, geordend op regel- of kolomnummer en kunnen worden samengevouwen.

• Er zijn nieuwe opties om breekpunten te deactiveren, verwijderen en bewerken wanneer u de muisaanwijzer op een breekpunt of bestand plaatst.

• Klik op de knop 'Breakpoint bewerken' om de breakpoint-editor te openen. Hier kunt u de breakpointvoorwaarde invoeren of overschakelen naar een logpoint.

Zie de JavaScript-foutopsporingsreferentie voor meer informatie over het debuggen met DevTools.

Chromium-problemen: 1407586 , 1402891 , 1402893

Aanpasbare recorder-snelkoppelingen

Gebruik sneltoetsen om gebruikersstromen sneller op te nemen en opnieuw af te spelen.

De Recorder introduceert een aantal handige sneltoetsen voor het sneller opnemen en afspelen van gebruikersstromen.

Weet u de snelkoppelingen niet meer? Geen probleem, klik op de ? -knop om op elk gewenst moment alle snelkoppelingen te bekijken.

U kunt deze snelkoppelingen zelfs aanpassen via het menu Instellingen .

Als u in een ander paneel werkt en een gebruikersstroomopname wilt starten, gebruikt u de opdracht Een nieuwe opname maken in het opdrachtmenu in DevTools om te beginnen.

Chromium-probleem: 1339771

Betere syntaxishighlight voor Angular

DevTools heeft de syntaxisaccentuering voor Angular HTML-sjablonen verbeterd, waardoor u code gemakkelijker kunt lezen en de structuur ervan kunt herkennen.

Chromium-problemen: 1385374 , 1385678

Caches opnieuw ordenen in het toepassingspaneel

Het deelvenster Cacheopslag is nu te vinden in het gedeelte Opslag van het paneel Toepassing , terwijl het deelvenster Back/forward cache is verplaatst naar het gedeelte Achtergrondservices .

Chromium-probleem: 1407166

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

• DevTools is bijgewerkt om de instelling 'Cache uitschakelen' te respecteren bij het laden van sourcemaps. ( 1407084 )
• Het Elementen -paneel focust nu direct op het eerste overeenkomende element in de zoekresultaten. ( 1381853 )
• Verschillende oplossingen om de betrouwbaarheid van de bronkaart en breekpunten te verbeteren. ( 508270 , 1403362 , 1403432 , 1396298 , 1395337 , 1405134 )
• Om het debuggen beter te vergemakkelijken, ondersteunt DevTools nu het evalueren van expressies met privé-klasseleden. ( 1381806 )

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.