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 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 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() . Voorbeelden van CSS-kleurdefinities.

Wanneer u de functie color-mix() gebruikt, kunt u de uiteindelijke kleuruitvoer bekijken in het deelvenster Berekend . kleurmixresultaat 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. Een gammagrenslijn.

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 . Kleuren converteren tussen kleurformaten.

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. Waarschuwing voor kleurknippen.

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) .

Activeer de oogdruppelaar.

Ten slotte is de instelling Kleurformaat nu verouderd om ruimte te maken voor het nieuwe HD-kleurformaat. Beëindiging van de kleurformaatinstelling.

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 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. Uitzonderingsopties onderbreken.

  • Breekpunten zijn gegroepeerd per bestand, gerangschikt op regel- of kolomnummers, en zijn samenvouwbaar. Groepeer breekpunten per bestand.

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

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

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. De Recorder-snelkoppelingen.

U kunt deze snelkoppelingen zelfs aanpassen via het menu Instellingen . Pas Recorder-snelkoppelingen aan.

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. Maak een nieuwe opnameopdracht.

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. Syntaxisaccentuering voor de Angular HTML-sjablonen.

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 . Caches in het applicatiepaneel.

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 ) Uitdrukkingen evalueren met leden van de privéklas.

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze 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 .

Chroom 124

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chroom 80

Chroom 79

Chroom 78

Chroom 77

Chroom 76

Chroom 75

Chroom 74

Chroom 73

Chroom 72

Chroom 71

Chroom 70

Chroom 68

Chroom 67

Chroom 66

Chroom 65

Chroom 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59