Wat is er nieuw in DevTools (Chrome 111)

Jecelyn Yeen

Fouten opsporen in HD-kleuren met het deelvenster Stijlen

Er komen nieuwe CSS-kleurtypen en -ruimten naar het internet! Het is net zo opwindend 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 kleurengamma's, zoals beschreven in de CSS Color Level 4 -specificatie. Zie High Definition CSS Color Guide voor een uitgebreid inzicht in 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 kleurkiezer ondersteunt alle nieuwe kleurruimten met meer functies. Klik bijvoorbeeld op het kleurstaal van color(display-p3 1 0 1) . Er is ook een gammagrenslijn toegevoegd, die onderscheid maakt tussen het sRGB en display-p3 gamma, voor een beter begrip van het door u geselecteerde kleurgamma.

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

Bij het converteren is het belangrijk om te weten of de conversie is geknipt om in de ruimte te passen. DevTools plaatst een waarschuwingspictogram naast de geconverteerde kleur dat u waarschuwt voor deze clipping.

Bovendien kun je met de nieuwe sneltoets kleuren van je scherm kiezen. Druk op 'c' om de pipet te activeren en druk op Escape om deze te deactiveren. Met het pipet worden alleen kleuren in de sRGB-kleurruimte gesampled. Als u bijvoorbeeld de kleur color(display-p3 1 0 1) probeert te samplen, die buiten de sRGB-kleurruimte ligt, knipt het pipetgereedschap de kleur naar de dichtstbijzijnde kleur in de sRGB-ruimte, namelijk magenta color(display-p3 0.92 0.2 0.97) .

Ten slotte is de instelling Kleurformaat nu verouderd om ruimte te maken voor het nieuwe HD-kleurformaat.

Chroomuitgaves: 1073895 , 1395782 , 1408777 , 1395782 , 1392717 , 1382409 , 1392054

Verbeterde breekpunt-UX

Met het opnieuw ontworpen deelvenster Breekpunten hebt u snel toegang tot veelgebruikte functies, met name 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 zijn gegroepeerd per bestand, gerangschikt op regel- of kolomnummers, en zijn samenvouwbaar.

• Er zijn nieuwe opties om breekpunten te deactiveren, verwijderen en bewerken wanneer u over een breekpunt of bestand zweeft.

• Klik op de knop Breekpunt bewerken om de breekpunteditor te openen. Vanaf hier kunt u de breekpuntvoorwaarde invoeren of naar een logpunt overschakelen.

Zie JavaScript-foutopsporingsreferentie voor informatie over hoe u fouten kunt opsporen met DevTools.

Chroomuitgaves: 1407586 , 1402891 , 1402893

Aanpasbare Recorder-snelkoppelingen

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

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

Weet je 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 Commandomenu in DevTools om aan de slag te gaan.

Chroomuitgave: 1339771

Betere syntaxisaccentuering voor Angular

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

Chroomuitgaves: 1385374 , 1385678

Reorganiseer caches in het toepassingspaneel

Het deelvenster Cache-opslag is nu te vinden in het gedeelte Opslag van het paneel Applicaties , terwijl het deelvenster Back-forward-cache is verplaatst naar het gedeelte Achtergrondservices .

Chroomuitgave: 1407166

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

• DevTools is bijgewerkt om de instelling Cache uitschakelen te respecteren bij het laden van bronkaarten. ( 1407084 )
• Het paneel Elementen stelt nu automatisch scherp op het eerste overeenkomende element in de zoekresultaten. ( 1381853 )
• Diverse oplossingen om de bronkaart en de betrouwbaarheid van 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 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.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .