Wat is er nieuw in DevTools (Chrome 115)

Sofia Emelianova

Elementenverbeteringen

Nieuwe CSS-subrasterbadge

Het Elementenpaneel krijgt een nieuwe subgrid badge voor subgrid . Deze functie is momenteel experimenteel in Chrome Canary.

Als u een genest raster dat een subraster is, wilt inspecteren en fouten wilt opsporen, en daardoor het aantal en de grootte van de tracks van het bovenliggende raster wilt overnemen, klikt u op de badge. Het schakelt tussen een overlay die kolommen, rijen en hun nummers boven op het element in de viewport toont.

Voor de lijst met alle badges in het paneel Elementen , zie de Badges-referentie .

Chroomuitgave: 1442536 .

Selectorspecificiteit in tooltips

In Elementen > Stijlen beweegt u de muis over de naam van een selector om het specificiteitsgewicht ervan in knopinfo te zien.

Chroomuitgave: 1204932 .

Waarden van aangepaste CSS-eigenschappen in tooltips

Ga in Elementen > Stijlen met de muis over de naam van een aangepaste CSS-eigenschap om de waarde ervan in knopinfo te zien.

Het DevTools-team wil一丝 en Suyan graag bedanken voor het realiseren van deze verbetering.

Chroomuitgave: 1380779 .

Verbeteringen in de bronnen

CSS-syntaxisaccentuering

Het paneel Bronnen krijgt het volgende voor voorbewerkte CSS- bestanden, zoals SASS, SCSS en LESS:

• Syntaxisaccentuering.
• Ondersteuning voor inline-editors. Deze editors zijn vergelijkbaar met die in Elementen > Stijlen , bijvoorbeeld Kleurkiezer en Easing Editor .

Chroomafgiften: 1302261 , 1392085 .

Snelkoppeling om voorwaardelijke breekpunten in te stellen

U kunt nu sneller voorwaardelijke breekpunten instellen met een snelkoppeling. Om het breekpuntdialoogvenster te openen, houdt u Command (MacOS) of Control (Windows/Linux) ingedrukt en klikt u op het regelnummer in de linkerkolom van Bronnen > Editor .

Chroomuitgave: 1405767 .

Toepassing > Maatregelen bij het bijhouden van bounces

Met het experiment voor het beperken van bouncetracking in Chrome kunt u de status van sites identificeren en verwijderen die cross-site tracking lijken uit te voeren met behulp van de techniek voor bouncetracking. Het deelvenster Toepassing > Achtergrondservices krijgt een nieuw tabblad Beperkingen bij het bijhouden van bounces waarmee u handmatig de trackingbeperkingen kunt afdwingen en een overzicht geeft van de sites waarvan de status is verwijderd.

Bekijk deze beveiligingsfunctie:

1. Blokkeer cookies van derden in Chrome . Navigeer naar en schakel in > Instellingen > Privacy en veiligheid > Cookies en andere sitegegevens > Cookies van derden blokkeren .
2. Stel in chrome://flags het experiment 'Bounce Tracking Mitigations' in op Ingeschakeld met verwijdering .
3. Inspecteer deze demopagina , open Toepassing > Achtergrondservices > Mitigaties voor het bijhouden van bounces , klik op een bounce-link op de pagina, wacht (10 seconden) totdat Chrome de bounce registreert en klik op Forceren om de status onmiddellijk te verwijderen.

Bovendien waarschuwt het tabblad Problemen u voor de aanstaande verwijdering van de status.

Chroomuitgave: 1432303 .

Vuurtoren 10.2.0

Het Lighthouse- paneel draait nu Lighthouse 10.2.0. Het meest opvallend is dat de Largest Contentful Paint- controle een tabel krijgt met faseberekeningen voor gesimuleerde en DevTools-throttling. Zie ook de volledige lijst met wijzigingen .

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 772558 .

Negeer standaard inhoudsscripts

De Instellingen > Negeerlijst > Inhoudsscripts die door extensies worden geïnjecteerd, zijn nu standaard ingeschakeld.

Met deze instelling ingeschakeld:

• De Debugger negeert dergelijke scripts en stopt niet bij uitzonderingen die door deze scripts worden gegenereerd.
• Het deelvenster Bronnen > Aanroepstapel slaat genegeerde frames over. Om het overslaan hier uit te schakelen, vinkt u dit aan Frames op de negeerlijst weergeven .
• De console vouwt genegeerde frames samen in stapelsporen. Klik op N meer frames weergeven om uit te vouwen en op Minder weergeven om weer samen te vouwen.

Bovendien kregen de selectievakjes in de Negeerlijst duidelijkere tekst.

Chroomafgiften: 1440958 , 1364501 .

Netwerk > Reactie wordt standaard mooi afgedrukt

Het paneel Netwerk > Reactie drukt nu standaard verkleinde antwoordteksten af, vergelijkbaar met het paneel Bronnen .

Bovendien krijgen SVG-bestanden syntaxisaccentuering.

Chroomuitgaves: 1382752 , 1385374 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

• Instellingen > Apparaten : Facebook voor Android v407 op Pixel 6 toegevoegd aan de lijst met agentreeksen.
• Netwerk : De snelkoppeling Netwerklogboek wissen toegevoegd ( 1444991 ):
  • MacOS: Command + K
  • Windows/Linux: Controle + L
• De vervolgkeuzelijst Recorder > Opname N > Prestatie-inzichten paneel verwijderd ( 1414773 ).
• Stylesheets die niet konden worden geladen, zijn nu verborgen in de navigatorstructuur ( 1386059 ).
• Prestaties : onjuiste weergave van het uitbreidbare interactiespoor ( 1432510 ) opgelost.
• Elementen : Stylesheets die niet konden worden geladen, worden nu onderstreept met golvende lijnen ( 1440626 ).
• De Debugger stapt niet automatisch in WebAssembly als er geen plug-in is voor de betreffende taal ( 1443342 ).
• De snelkoppeling waarmee de cursor één woord per keer wordt verplaatst, wordt hersteld voor CSS-bestanden in Bronnen > Editor ( 1241848 ):
  • MacOS: Alt + Pijl
  • Windows/Linux: Ctrl + Pijl

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