Wat is er nieuw in DevTools (Chrome 115)

Sofia Emelianova
Sofia Emelianova
GitHub

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.

De subgrid-badge en de overlay in de viewport.

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.

Een tooltip met het specificiteitsgewicht van een selector.

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.

De tooltip met een waarde van de aangepaste CSS-eigenschap.

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 .

Verbeterde CSS-syntaxisaccentuering en ondersteuning voor inline-editors in Bronnen.

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

Het regelnummer in de linkerkolom en het breekpuntdialoogvenster.

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 het bijhouden van bounces. 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 Menu met drie stippen. > Instellingen > Beveiliging. Privacy en veiligheid > Cookies en andere sitegegevens > Keuzerondje aangevinkt. Cookies van derden blokkeren .
  2. Stel in chrome://flags het experiment 'Bounce Tracking Mitigations' in op Enabled With Deletion .
  3. Inspecteer deze demopagina , open Applicatie > 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.

Bounce Tracking Mitigations vermeldt een statusverwijdering.

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 opvallende is dat de Largest Contentful Paint- controle een tabel krijgt met faseberekeningen voor gesimuleerde en DevTools-throttling. Zie ook de volledige lijst met wijzigingen .

De LCP-fasetabel.

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. Instellingen > Negeerlijst > Selectievakje. 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 Selectievakje. 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.

Inhoudsscripts geïnjecteerd door extensies die standaard zijn ingeschakeld. U kunt dit vinden door naar Instellingen te gaan en vervolgens naar de Negeerlijst.

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 .

Pretty-printing ingeschakeld in het responsvenster van het tabblad Netwerk.

Bovendien krijgen SVG-bestanden syntaxisaccentuering.

SVG-syntaxisaccentuering.

Chroomuitgaves: 1382752 , 1385374 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

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

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .