Wat is er nieuw in DevTools (Chrome 100)

Jecelyn Yeen

Chroom 100

Op naar de 100e Chrome-versie! Chrome DevTools blijft betrouwbare tools bieden waarmee ontwikkelaars online kunnen bouwen. Neem even de tijd om rond te kijken in het tabblad 'Wat is er nieuw' om de mijlpalen te vieren.

Zoals gebruikelijk kunt u de nieuwste What's New in DevTools-video bekijken door op de afbeelding te klikken.

Bekijk en bewerk @supports bij regels in het deelvenster Stijlen

Je kunt nu de CSS-code @supports at-rules bekijken en bewerken in het deelvenster Stijlen. Deze wijzigingen maken het gemakkelijker om in realtime met de at-rules te experimenteren. Open deze demopagina , inspecteer het <div class=”box”> element en bekijk de @supports at-rules in het deelvenster Stijlen. Klik op de declaratie van de regel om deze te bewerken.

Chromium-problemen: 1222574 , 1222573

Verbeteringen aan het recorderpaneel

Standaard ondersteuning voor algemene selectoren

Bij het bepalen van een unieke selector tijdens het opnemen, geeft het paneel Recorder nu automatisch de voorkeur aan elementen met de volgende kenmerken:

• data-testid
• gegevenstest
• data-qa
• data-cy
• data-test-id
• data-qa-id
• datatesten

De bovenstaande kenmerken zijn algemene selectoren die worden gebruikt bij testautomatisering.

Start bijvoorbeeld een nieuwe opname met deze demopagina . Vul een e-mailadres in en bekijk de selectorwaarde.

Omdat voor het e-mailelement data-testid is gedefinieerd, wordt dit automatisch als selector gebruikt in plaats van de id of class kenmerken.

Pas de opnamekiezer aan

U kunt de selector van een opname aanpassen als u de algemene selectors niet gebruikt.

Deze demopagina gebruikt bijvoorbeeld het attribuut data-automate als selector. Start een nieuwe opname en voer data-automate in als selectorattribuut. Vul een e-mailadres in en bekijk de selectorwaarde ( [data-automate=email-address] ).

Een opname hernoemen

U kunt nu een opname hernoemen in het paneel Recorder met de bewerkingsknop (potloodpictogram) naast de titel van de opname.

Voorbeeld van klasse-/functie-eigenschappen bij zweven

U kunt nu tijdens het debuggen met de muis over een klasse of functie in het Bronnenpaneel bewegen om een ​​voorbeeld van de eigenschappen ervan te bekijken. Voorheen werd alleen de functienaam en een link naar de locatie in de broncode weergegeven.

Chromium-probleem: 1049947

Gedeeltelijk gepresenteerde frames in het Prestatiepaneel

Bij het opnemen van prestaties wordt nu een nieuwe framecategorie 'Gedeeltelijk weergegeven frames' weergegeven in de tijdlijn Frames .

Voorheen visualiseerde de Frames- tijdlijn alle frames met vertraagde hoofdthread-bewerkingen als "dropped frames". Er zijn echter gevallen waarin sommige frames nog steeds visuele updates (bijvoorbeeld scrollen) produceren, aangestuurd door de compositor-thread.

Dit leidt tot verwarring bij de gebruiker, omdat de schermafbeeldingen van deze 'Dropped frames' nog steeds visuele updates weergeven.

De nieuwe optie 'Gedeeltelijk weergegeven frames' is bedoeld om intuïtiever aan te geven dat hoewel sommige content niet op tijd in het frame wordt weergegeven, het probleem niet zo ernstig is dat visuele updates helemaal worden geblokkeerd.

Chromium-probleem: 1261130

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen in deze release:

• Bijgewerkte iPhone-useragentstrings voor geëmuleerde apparaten . Alle iPhone-versies na 5 hebben een useragentstring met iPhone OS 13_2_3. ( 1289553 )
• U kunt een fragment nu rechtstreeks als JavaScript-bestand opslaan. Voorheen moest u de bestandsextensie .js handmatig toevoegen. ( 1137218 )
• Het paneel Bronnen geeft nu correct namen van scopevariabelen weer bij het debuggen met een bronkaart. Voorheen gaf het paneel Bronnen geminimaliseerde namen van scopevariabelen weer, ondanks dat de bronkaart wel beschikbaar was. ( 1294682 )
• Het paneel Bronnen herstelt nu de scrollpositie correct bij het laden van de pagina. Voorheen werd de positie niet correct hersteld, wat problemen opleverde bij het debuggen. ( 1294422 )

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 wat in de serie Wat is er nieuw in DevTools is behandeld.