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 op internet kunnen bouwen. Neem even de tijd om rond te klikken op het tabblad Wat is er nieuw om de mijlpalen te vieren.

Zoals gewoonlijk 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

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

Chroomuitgaves: 1222574 , 1222573

Verbeteringen in het recorderpaneel

Ondersteun standaard algemene selectors

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

• data-testid
• data-test
• gegevens-qa
• data-cy
• data-test-id
• data-qa-id
• data-testen

De bovenstaande attributen zijn veelgebruikte selectors die worden gebruikt in testautomatisering.

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

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

Pas de selector van de opname aan

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

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

Hernoem een ​​opname

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

Bekijk een voorbeeld van klasse-/functie-eigenschappen bij het aanwijzen van de muis

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

Chroomuitgave: 1049947

Gedeeltelijk gepresenteerde frames in het paneel Prestaties

Bij prestatieregistratie wordt nu een nieuwe framecategorie "Gedeeltelijk gepresenteerde frames" weergegeven in de Frames -tijdlijn.

Voorheen visualiseerde de Frames- tijdlijn alle frames met vertraagd hoofdthreadwerk als "gedropte frames". Er zijn echter gevallen waarin sommige frames nog steeds visuele updates produceren (bijvoorbeeld scrollen) die worden aangestuurd door de compositor-thread.

Dit leidt tot verwarring bij de gebruiker omdat de schermafbeeldingen van deze “dropped frames” nog steeds visuele updates weerspiegelen.

Het nieuwe "Gedeeltelijk gepresenteerde frames" is bedoeld om intuïtiever aan te geven dat, hoewel sommige inhoud niet op tijd in het frame wordt gepresenteerd, het probleem niet zo ernstig is dat visuele updates helemaal worden geblokkeerd.

Chroomuitgave: 1261130

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

• Bijgewerkte iPhone-useragentreeksen voor geëmuleerde apparaten . Alle iPhone-versies na 5 hebben een user-agent-string met iPhone OS 13_2_3. ( 1289553 )
• U kunt het fragment nu rechtstreeks als JavaScript-bestand opslaan. Voorheen moest u de bestandsextensie .js handmatig toevoegen. ( 1137218 )
• Het paneel Bronnen geeft nu de namen van scopevariabelen correct weer bij het opsporen van fouten met de brontoewijzing. Voorheen gaf het paneel Bronnen verkleinde namen van scopevariabelen weer, ondanks dat er een brontoewijzing werd verstrekt. ( 1294682 )
• Het Bronnenpaneel herstelt nu de schuifpositie correct bij het laden van de pagina. Voorheen werd de positie niet correct hersteld, wat ongemak veroorzaakte bij het opsporen van fouten. ( 1294422 )

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 .

Jecelyn Yeen

Chroom 100

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

Zoals gewoonlijk 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

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

Chroomuitgaves: 1222574 , 1222573

Verbeteringen in het recorderpaneel

Ondersteun standaard algemene selectors

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

• data-testid
• data-test
• gegevens-qa
• data-cy
• data-test-id
• data-qa-id
• data-testen

De bovenstaande attributen zijn veelgebruikte selectors die worden gebruikt in testautomatisering.

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

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

Pas de selector van de opname aan

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

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

Hernoem een ​​opname

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

Bekijk een voorbeeld van klasse-/functie-eigenschappen bij het aanwijzen van de muis

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

Chroomuitgave: 1049947

Gedeeltelijk gepresenteerde frames in het paneel Prestaties

Bij prestatieregistratie wordt nu een nieuwe framecategorie "Gedeeltelijk gepresenteerde frames" weergegeven in de Frames -tijdlijn.

Voorheen visualiseerde de Frames- tijdlijn alle frames met vertraagd hoofdthreadwerk als "gedropte frames". Er zijn echter gevallen waarin sommige frames nog steeds visuele updates produceren (bijvoorbeeld scrollen) die worden aangestuurd door de compositor-thread.

Dit leidt tot verwarring bij de gebruiker omdat de schermafbeeldingen van deze “dropped frames” nog steeds visuele updates weerspiegelen.

Het nieuwe "Gedeeltelijk gepresenteerde frames" is bedoeld om intuïtiever aan te geven dat, hoewel sommige inhoud niet op tijd in het frame wordt gepresenteerd, het probleem niet zo ernstig is dat visuele updates helemaal worden geblokkeerd.

Chroomuitgave: 1261130

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

• Bijgewerkte iPhone-useragentreeksen voor geëmuleerde apparaten . Alle iPhone-versies na 5 hebben een user-agent-string met iPhone OS 13_2_3. ( 1289553 )
• U kunt het fragment nu rechtstreeks als JavaScript-bestand opslaan. Voorheen moest u de bestandsextensie .js handmatig toevoegen. ( 1137218 )
• Het paneel Bronnen geeft nu de namen van scopevariabelen correct weer bij het opsporen van fouten met de brontoewijzing. Voorheen gaf het paneel Bronnen verkleinde namen van scopevariabelen weer, ondanks dat er een brontoewijzing werd verstrekt. ( 1294682 )
• Het Bronnenpaneel herstelt nu de schuifpositie correct bij het laden van de pagina. Voorheen werd de positie niet correct hersteld, wat ongemak veroorzaakte bij het opsporen van fouten. ( 1294422 )

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 .

Jecelyn Yeen

Chroom 100

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

Zoals gewoonlijk 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

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

Chroomuitgaves: 1222574 , 1222573

Verbeteringen in het recorderpaneel

Ondersteun standaard algemene selectors

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

• data-testid
• data-test
• gegevens-qa
• data-cy
• data-test-id
• data-qa-id
• data-testen

De bovenstaande attributen zijn veelgebruikte selectors die worden gebruikt in testautomatisering.

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

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

Pas de selector van de opname aan

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

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

Hernoem een ​​opname

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

Bekijk een voorbeeld van klasse-/functie-eigenschappen bij het aanwijzen van de muis

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

Chroomuitgave: 1049947

Gedeeltelijk gepresenteerde frames in het paneel Prestaties

Bij prestatieregistratie wordt nu een nieuwe framecategorie "Gedeeltelijk gepresenteerde frames" weergegeven in de Frames -tijdlijn.

Voorheen visualiseerde de Frames- tijdlijn alle frames met vertraagd hoofdthreadwerk als "gedropte frames". Er zijn echter gevallen waarin sommige frames nog steeds visuele updates produceren (bijvoorbeeld scrollen) die worden aangestuurd door de compositor-thread.

Dit leidt tot verwarring bij de gebruiker omdat de schermafbeeldingen van deze “dropped frames” nog steeds visuele updates weerspiegelen.

Het nieuwe "Gedeeltelijk gepresenteerde frames" is bedoeld om intuïtiever aan te geven dat, hoewel sommige inhoud niet op tijd in het frame wordt gepresenteerd, het probleem niet zo ernstig is dat visuele updates helemaal worden geblokkeerd.

Chroomuitgave: 1261130

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

• Bijgewerkte iPhone-useragentreeksen voor geëmuleerde apparaten . Alle iPhone-versies na 5 hebben een user-agent-string met iPhone OS 13_2_3. ( 1289553 )
• U kunt het fragment nu rechtstreeks als JavaScript-bestand opslaan. Voorheen moest u de bestandsextensie .js handmatig toevoegen. ( 1137218 )
• Het paneel Bronnen geeft nu de namen van scopevariabelen correct weer bij het opsporen van fouten met de brontoewijzing. Voorheen gaf het paneel Bronnen verkleinde namen van scopevariabelen weer, ondanks dat er een brontoewijzing werd verstrekt. ( 1294682 )
• Het Bronnenpaneel herstelt nu de schuifpositie correct bij het laden van de pagina. Voorheen werd de positie niet correct hersteld, wat ongemak veroorzaakte bij het opsporen van fouten. ( 1294422 )

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 .