Wat is er nieuw in DevTools (Chrome 102)

Jecelyn Yeen

Preview-functie: Nieuw paneel Prestatie-inzichten

Gebruik het paneel Prestatie-inzichten om bruikbare en gebruiksgerichte inzichten te krijgen over de prestaties van uw website.

Open het paneel en start een nieuwe opname op basis van uw gebruiksscenario. Laten we bijvoorbeeld de paginabelasting van deze demopagina meten.

Zodra de opname is voltooid, krijgt u de prestatie-inzichten in het deelvenster Inzichten . Klik op elk inzichtitem (bijvoorbeeld Renderblokkeringsverzoek, lay-outverschuiving) om inzicht te krijgen in het probleem en de mogelijke oplossingen.

Ga naar de documentatie van het paneel Prestatie-inzichten voor meer informatie met de stapsgewijze zelfstudie.

Dit is een preview-functie waarmee webontwikkelaars (vooral niet-prestatie-experts) potentiële prestatieproblemen kunnen identificeren en oplossen. Ons team werkt actief aan deze functie en we zijn op zoek naar uw feedback voor verdere verbeteringen.

Chroomuitgave: 1270700

Nieuwe snelkoppelingen om lichte en donkere thema's te emuleren

U kunt nu de lichte en donkere thema's sneller emuleren (CSS-mediafunctie geeft de voorkeur aan kleurenschema ) met de nieuwe snelkoppelingen in het deelvenster Stijlen.

Voorheen waren er meer stappen nodig om thema's op het tabblad Rendering te emuleren .

Chroomuitgave: 1314299

Verbeterde beveiliging op het tabblad Netwerkvoorbeeld

DevTools past nu het Content Security Policy (CSP) toe op het tabblad Voorbeeld in het netwerkpaneel .

De eerste schermafbeelding toont bijvoorbeeld een pagina die gemengde inhoud bevat. De pagina wordt geladen via een beveiligde HTTPS-verbinding, maar het stylesheet wordt geladen via een onveilige HTTP-verbinding.

De browser blokkeerde standaard het stylesheetverzoek. Toen u de pagina echter opende via het tabblad Voorbeeld in het paneel Netwerk , werd het stylesheet niet eerder geblokkeerd (vandaar dat de achtergrond rood werd). Het is nu geblokkeerd zoals je zou verwachten (tweede screenshot).

Chroomuitgave: 833147

Verbeterd herladen op breekpunt

De debugger beëindigt nu de uitvoering van het script bij het herladen op een breekpunt.

Het script kwam bijvoorbeeld eerder in een eindeloze lus terecht bij het instellen en herladen op het ReactDOM breekpunt in deze React-demo . Het Bronnenpaneel brak vanwege de eindeloze lus.

Het doorgaan met het uitvoeren van JavaScript veroorzaakt veel problemen voor ontwikkelaars en kan ertoe leiden dat de renderer kapot gaat. Deze wijziging brengt het foutopsporingsgedrag in lijn met andere browsers zoals Firefox.

Chroomuitgaves: 1014415 , 1004038 , 1112863 , 1134899

Console-updates

Afhandelen van scriptuitvoeringsfouten in de console

Fouten tijdens scriptevaluatie in de console genereren nu de juiste foutgebeurtenissen die de handler window.onerror activeren en worden verzonden als "error" -gebeurtenissen op het window-object.

Chroomuitgave: 1295750

Voer live-expressie uit met Enter

Zodra u klaar bent met het typen van een live-uitdrukking , kunt u op Enter klikken om deze vast te leggen. Voorheen resulteerde het indrukken van Enter in het toevoegen van nieuwe regels. Dit is inconsistent met andere delen van DevTools.

Om een ​​nieuwe regel toe te voegen aan de live-expressie -editor, gebruikt u in plaats daarvan Shift + Enter .

Chroomuitgave: 1260744

Annuleer de opname van de gebruikersstroom aan het begin

U kunt de opname annuleren tijdens het starten van de gebruikersstroomopname. Voorheen was er geen optie om de opname te annuleren.

Chroomuitgave: 1257499

Geef overgenomen pseudo-markeringselementen weer in het deelvenster Stijlen

Bekijk de overgenomen pseudo-elementen voor accentuering (bijvoorbeeld ::selection , ::spelling-error , ::grammar-error en ::highlight ) in het deelvenster Stijlen. Voorheen werden deze regels niet weergegeven.

Zoals vermeld in de specificatie , bepaalt cascade de winnende stijl als meerdere stijlen conflicteren. Deze nieuwe functie helpt u de overerving en prioriteit van de regels te begrijpen.

Chroomuitgave: 1024156

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

• Het deelvenster Eigenschappen geeft nu standaard accessor-eigenschappen met waarde weer. Het was eerder per ongeluk verborgen. ( 1309087 )
• In het deelvenster Stijlen worden de overschreven @support -regels nu correct weergegeven als doorgehaald. Voorheen werden de regels niet doorgehaald. ( 1298025 )
• Probleem opgelost met de CSS-opmaaklogica in het Bronnenpaneel die meerdere lege regels veroorzaakte bij het bewerken van CSS. ( 1309588 )
• Sluit de optie Recursief uitbreiden van een object in de console af tot maximaal 100, zodat deze niet eeuwig doorgaat voor ronde objecten. ( 1272450 )

[Experimenteel] Kopieer CSS-wijzigingen

Bij dit experiment markeert het deelvenster Stijlen uw CSS-wijzigingen in het groen. U kunt de gewijzigde regels aanwijzen en op de nieuwe kopieerknop ernaast klikken om deze te kopiëren.

Daarnaast kunt u alle CSS-wijzigingen tussen declaraties kopiëren door met de rechtermuisknop op een regel te klikken en Alle CSS-wijzigingen kopiëren te selecteren.

Er is ook een nieuwe knop Kopiëren toegevoegd aan het tabblad Wijzigingen , zodat u uw CSS-wijzigingen gemakkelijk kunt bijhouden en kopiëren!

Chroomuitgave: 1268754

[Experimenteel] Kleur kiezen buiten de browser

Schakel dit experiment in om een ​​kleur buiten de browser te kiezen met de kleurkiezer. Voorheen kon je alleen een kleur kiezen in de browser.

Klik in het deelvenster Stijlen op een kleurvoorbeeld om de kleurkiezer te openen. Gebruik het pipet om overal een kleur te kiezen.

Chroomuitgave: 1245191

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta 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 Meer > 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 .

Jecelyn Yeen

Preview-functie: Nieuw paneel Prestatie-inzichten

Gebruik het paneel Prestatie-inzichten om bruikbare en gebruiksgerichte inzichten te krijgen over de prestaties van uw website.

Open het paneel en start een nieuwe opname op basis van uw gebruiksscenario. Laten we bijvoorbeeld de paginabelasting van deze demopagina meten.

Zodra de opname is voltooid, krijgt u de prestatie-inzichten in het deelvenster Inzichten . Klik op elk inzichtitem (bijvoorbeeld Renderblokkeringsverzoek, lay-outverschuiving) om inzicht te krijgen in het probleem en de mogelijke oplossingen.

Ga naar de documentatie van het paneel Prestatie-inzichten voor meer informatie met de stapsgewijze zelfstudie.

Dit is een preview-functie waarmee webontwikkelaars (vooral niet-prestatie-experts) potentiële prestatieproblemen kunnen identificeren en oplossen. Ons team werkt actief aan deze functie en we zijn op zoek naar uw feedback voor verdere verbeteringen.

Chroomuitgave: 1270700

Nieuwe snelkoppelingen om lichte en donkere thema's te emuleren

U kunt nu de lichte en donkere thema's sneller emuleren (CSS-mediafunctie geeft de voorkeur aan kleurenschema ) met de nieuwe snelkoppelingen in het deelvenster Stijlen.

Voorheen waren er meer stappen nodig om thema's op het tabblad Rendering te emuleren .

Chroomuitgave: 1314299

Verbeterde beveiliging op het tabblad Netwerkvoorbeeld

DevTools past nu het Content Security Policy (CSP) toe op het tabblad Voorbeeld in het netwerkpaneel .

De eerste schermafbeelding toont bijvoorbeeld een pagina die gemengde inhoud bevat. De pagina wordt geladen via een beveiligde HTTPS-verbinding, maar het stylesheet wordt geladen via een onveilige HTTP-verbinding.

De browser blokkeerde standaard het stylesheetverzoek. Toen u de pagina echter opende via het tabblad Voorbeeld in het paneel Netwerk , werd het stylesheet niet eerder geblokkeerd (vandaar dat de achtergrond rood werd). Het is nu geblokkeerd zoals je zou verwachten (tweede screenshot).

Chroomuitgave: 833147

Verbeterd herladen op breekpunt

De debugger beëindigt nu de uitvoering van het script bij het herladen op een breekpunt.

Het script kwam bijvoorbeeld eerder in een eindeloze lus terecht bij het instellen en herladen op het ReactDOM breekpunt in deze React-demo . Het Bronnenpaneel brak vanwege de eindeloze lus.

Het doorgaan met het uitvoeren van JavaScript veroorzaakt veel problemen voor ontwikkelaars en kan ertoe leiden dat de renderer kapot gaat. Deze wijziging brengt het foutopsporingsgedrag in lijn met andere browsers zoals Firefox.

Chroomuitgaves: 1014415 , 1004038 , 1112863 , 1134899

Console-updates

Afhandelen van scriptuitvoeringsfouten in de console

Fouten tijdens scriptevaluatie in de console genereren nu de juiste foutgebeurtenissen die de handler window.onerror activeren en worden verzonden als "error" -gebeurtenissen op het window-object.

Chroomuitgave: 1295750

Voer live-expressie uit met Enter

Zodra u klaar bent met het typen van een live-uitdrukking , kunt u op Enter klikken om deze vast te leggen. Voorheen resulteerde het indrukken van Enter in het toevoegen van nieuwe regels. Dit is inconsistent met andere delen van DevTools.

Om een ​​nieuwe regel toe te voegen aan de live-expressie -editor, gebruikt u in plaats daarvan Shift + Enter .

Chroomuitgave: 1260744

Annuleer de opname van de gebruikersstroom aan het begin

U kunt de opname annuleren tijdens het starten van de gebruikersstroomopname. Voorheen was er geen optie om de opname te annuleren.

Chroomuitgave: 1257499

Geef overgenomen pseudo-markeringselementen weer in het deelvenster Stijlen

Bekijk de overgenomen pseudo-elementen voor accentuering (bijvoorbeeld ::selection , ::spelling-error , ::grammar-error en ::highlight ) in het deelvenster Stijlen. Voorheen werden deze regels niet weergegeven.

Zoals vermeld in de specificatie , bepaalt cascade de winnende stijl als meerdere stijlen conflicteren. Deze nieuwe functie helpt u de overerving en prioriteit van de regels te begrijpen.

Chroomuitgave: 1024156

Diverse hoogtepunten

Dit zijn enkele opmerkelijke verbeteringen in deze release:

• Het deelvenster Eigenschappen geeft nu standaard accessor-eigenschappen met waarde weer. Het was eerder per ongeluk verborgen. ( 1309087 )
• In het deelvenster Stijlen worden de overschreven @support -regels nu correct weergegeven als doorgehaald. Voorheen werden de regels niet doorgehaald. ( 1298025 )
• Probleem opgelost met de CSS-opmaaklogica in het Bronnenpaneel die meerdere lege regels veroorzaakte bij het bewerken van CSS. ( 1309588 )
• Sluit de optie Recursief uitbreiden van een object in de console af tot maximaal 100, zodat deze niet eeuwig doorgaat voor ronde objecten. ( 1272450 )

[Experimenteel] Kopieer CSS-wijzigingen

Bij dit experiment markeert het deelvenster Stijlen uw CSS-wijzigingen in het groen. U kunt de gewijzigde regels aanwijzen en op de nieuwe kopieerknop ernaast klikken om deze te kopiëren.

Daarnaast kunt u alle CSS-wijzigingen tussen declaraties kopiëren door met de rechtermuisknop op een regel te klikken en Alle CSS-wijzigingen kopiëren te selecteren.

Er is ook een nieuwe knop Kopiëren toegevoegd aan het tabblad Wijzigingen , zodat u uw CSS-wijzigingen gemakkelijk kunt bijhouden en kopiëren!

Chroomuitgave: 1268754

[Experimenteel] Kleur kiezen buiten de browser

Schakel dit experiment in om een ​​kleur buiten de browser te kiezen met de kleurkiezer. Voorheen kon je alleen een kleur kiezen in de browser.

Klik in het deelvenster Stijlen op een kleurvoorbeeld om de kleurkiezer te openen. Gebruik het pipet om overal een kleur te kiezen.

Chroomuitgave: 1245191

Download de voorbeeldkanalen

Overweeg het gebruik van Chrome Canary , Dev of Beta 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 Meer > 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 .