Wat is er nieuw in DevTools (Chrome 111)

Jecelyn Yeen

Foutopsporing van HD-kleuren met het deelvenster Stijlen

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

Het deelvenster Stijlen ondersteunt nu 12 nieuwe kleurruimten en 7 nieuwe kleurgamma's, zoals beschreven in de CSS Color Level 4- specificatie. Raadpleeg de High Definition CSS Color Guide voor een uitgebreid overzicht van de beschikbare kleuropties op het web.

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

Wanneer je de functie color-mix() gebruikt, kun je de uiteindelijke kleur in het paneel 'Berekend' bekijken.

De kleurenkiezer ondersteunt alle nieuwe kleurruimten met meer functies. Klik bijvoorbeeld op het kleurstaaltje van color(display-p3 1 0 1) . Er is ook een kleurbereikgrenslijn toegevoegd, die onderscheid maakt tussen het sRGB en display-p3 kleurbereik voor een duidelijker beeld van het kleurbereik van de geselecteerde kleur.

DevTools ondersteunt het converteren van kleuren tussen kleurformaten. Gebruik het pictogram 'Kleurformaat wijzigen' om het conversievenster te openen, of gebruik de Shift ingedrukt houden en op een kleurstal in het deelvenster 'Stijlen' klikken.

Bij het converteren is het belangrijk om te weten of de conversie is bijgesneden om in de beschikbare ruimte te passen. DevTools plaatst een waarschuwingspictogram naast de geconverteerde kleur om u hierop te attenderen.

Bovendien kun je met de nieuwe sneltoets kleuren van je scherm selecteren. Druk op 'c' om het pipet te activeren en op Escape om het te deactiveren. Het pipetgereedschap selecteert alleen kleuren in de sRGB-kleurruimte. Als je bijvoorbeeld de kleur color(display-p3 1 0 1) probeert te selecteren, die buiten de sRGB-kleurruimte valt, zal het pipetgereedschap de kleur beperken tot de dichtstbijzijnde kleur in de sRGB-ruimte, namelijk magenta color(display-p3 0.92 0.2 0.97) .

Tot slot is de instelling voor het kleurformaat nu verouderd om plaats te maken voor het nieuwe HD-kleurformaat.

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

Verbeterde breakpoint-UX

Het vernieuwde deelvenster 'Breakpoints' biedt snelle toegang tot veelgebruikte functies, met name het deactiveren, bewerken en verwijderen van breakpoints.

Dit zijn enkele hoogtepunten: - Beide opties voor pauze-uitzonderingen zijn verplaatst naar het deelvenster 'Breakpoints' en voorzien van tekstlabels voor meer duidelijkheid.

• Breakpoints zijn gegroepeerd per bestand, geordend op regel- of kolomnummers en kunnen worden ingeklapt.

• Er zijn nieuwe opties om breakpoints te deactiveren, te verwijderen en te bewerken wanneer u de muis over een breakpoint of bestand beweegt.

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

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

Chromium-problemen: 1407586 , 1402891 , 1402893

Aanpasbare sneltoetsen voor de recorder

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

De Recorder biedt een aantal handige sneltoetsen voor het sneller opnemen en afspelen van gebruikersprocessen.

Weet je de sneltoetsen niet meer? Geen probleem, klik op de ? -knop om ze op elk gewenst moment te bekijken.

Je 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 menu 'Opdrachten' van DevTools om te beginnen.

Chromium-probleem: 1339771

Betere syntaxmarkering voor Angular

DevTools heeft de syntaxmarkering voor Angular HTML-templates verbeterd, waardoor het gemakkelijker is om code te lezen en de structuur ervan te herkennen.

Chromium-problemen: 1385374 , 1385678

Herorganiseer de caches in het toepassingspaneel.

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

Chromium-probleem: 1407166

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen in deze release:

• DevTools is bijgewerkt om rekening te houden met de instelling 'Cache uitschakelen' bij het laden van sourcemaps. ( 1407084 )
• Het paneel Elementen stelt nu direct automatisch scherp op het eerste overeenkomende element in de zoekresultaten. ( 1381853 )
• Diverse correcties om de betrouwbaarheid van de bronkaart en breekpunten te verbeteren. ( 508270 , 1403362 , 1403432 , 1396298 , 1395337 , 1405134 )
• Om het debuggen te vergemakkelijken, ondersteunt DevTools nu het evalueren van expressies met private klasseleden. ( 1381806 )

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.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .