Wat is er nieuw in DevTools (Chrome 115)

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeteringen aan elementen

Nieuwe CSS-subrasterbadge

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

Om een ​​genest raster te inspecteren en te debuggen dat een subraster is en dus het aantal en de grootte van de sporen van het bovenliggende raster overneemt, klikt u op de badge. Er wordt een overlay weergegeven die kolommen, rijen en hun nummers boven het element in de viewport weergeeft.

Het subraster-badge en de overlay in het viewport.

Zie de Badges-referentie voor de lijst met alle badges in het paneel Elementen .

Chromium-probleem: 1442536 .

Selectorspecificiteit in tooltips

Ga naar Elementen > Stijlen en beweeg de muis over de naam van een selector om het specificiteitsgewicht ervan in een tooltip te bekijken.

Een tooltip met specificiteitsgewicht van een selector.

Chromium-probleem: 1204932 .

Waarden van aangepaste CSS-eigenschappen in tooltips

Ga naar Elementen > Stijlen en beweeg de muis over de naam van een aangepaste CSS-eigenschap om de waarde ervan in een tooltip te bekijken.

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

Het DevTools-team wil graag zijn dank uitspreken aan一丝 en Suyan voor het realiseren van deze verbetering.

Chromium-probleem: 1380779 .

Verbeteringen aan bronnen

CSS-syntaxisaccentuering

Het paneel Bronnen bevat 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 Kleurenkiezer en Easing-editor .

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

Chromium-problemen: 1302261 , 1392085 .

Snelkoppeling om voorwaardelijke breekpunten in te stellen

U kunt nu sneller voorwaardelijke breekpunten instellen met een sneltoets. Om het dialoogvenster voor breekpunten 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.

Chromium-probleem: 1405767 .

Toepassing > Beperkingen van bounce tracking

Met het experiment 'Bounce Tracking Mitigations' in Chrome kunt u de status van sites identificeren en verwijderen die cross-site tracking lijken uit te voeren met behulp van de bounce tracking-techniek. Het deelvenster 'Toepassing > Achtergrondservices' krijgt een nieuw tabblad 'Bounce Tracking Mitigations' waarmee u handmatig trackingmitigations kunt afdwingen en een overzicht krijgt van de sites waarvan de status is verwijderd.

Bekijk deze beveiligingsfunctie eens:

  1. Blokkeer cookies van derden in Chrome . Navigeer naar en schakel in Menu met drie puntjes. > Instellingen > Beveiliging. Privacy en beveiliging > 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. Bekijk deze demopagina , open Toepassing > Achtergrondservices > Beperkingen voor bouncetracking , klik op een bouncelink op de pagina, wacht (10 seconden) totdat Chrome de bounce heeft geregistreerd en klik op Geforceerd uitvoeren om de status onmiddellijk te verwijderen.

Bounce Tracking Mitigations geeft een status 'verwijdering' weer.

Bovendien wordt u op het tabblad Problemen gewaarschuwd voor de aanstaande verwijdering van de status.

Chromium-probleem: 1432303 .

Vuurtoren 10.2.0

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

De LCP-fasetabel.

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Chromium-probleem: 772558 .

Standaard inhoudsscripts negeren

De Instellingen. Instellingen > Negeerlijst > Selectievakje. Door extensies geïnjecteerde inhoudsscripts zijn nu standaard ingeschakeld.

Met deze instelling ingeschakeld:

  • De Debugger negeert dergelijke scripts en stopt niet bij de uitzonderingen die ze genereren.
  • Het paneel Bronnen > Aanroepstack slaat genegeerde frames over. Om het overslaan hier uit te schakelen, vinkt u het vakje aan. Selectievakje. Toon frames die niet genegeerd kunnen worden .
  • De console vouwt genegeerde frames in stacktraces samen. Klik op 'Nog N frames weergeven' om uit te vouwen en op 'Minder weergeven' om weer in te vouwen.

Door extensies geïnjecteerde contentscripts zijn standaard ingeschakeld. U vindt deze optie via Instellingen en vervolgens via de negeerlijst.

Bovendien zijn de selectievakjes in de Negeerlijst voorzien van duidelijkere tekst.

Chromium-problemen: 1440958 , 1364501 .

Netwerk > Standaard mooi afdrukken van reacties

In het deelvenster Netwerk > Reactie worden nu standaard geminimaliseerde antwoordteksten afgedrukt, vergelijkbaar met het deelvenster Bronnen .

Pretty-printing is ingeschakeld in het venster Antwoord van het tabblad Netwerk.

Bovendien krijgen SVG-bestanden syntaxisaccentuering.

SVG-syntaxisaccentuering.

Chromium-problemen: 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 agentstrings.
  • Netwerk : de snelkoppeling Netwerklogboek wissen is toegevoegd ( 1444991 ):
    • MacOS: Command + K
    • Windows/Linux: Control + L
  • De vervolgkeuzelijstoptie Recorder > Opname N > Prestatie-inzichten in het paneel is verwijderd ( 1414773 ).
  • Stijlbladen die niet geladen konden worden, zijn nu verborgen in de navigatieboom ( 1386059 ).
  • Prestatie : Onjuiste weergave van het uitvouwbare interactiespoor opgelost ( 1432510 ).
  • Elementen : Stijlbladen die niet konden worden geladen, worden nu onderstreept met golvende lijnen ( 1440626 ).
  • De Debugger stapt niet automatisch in WebAssembly als er geen plugin voor de betreffende taal is ( 1443342 ).
  • De sneltoets 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 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.

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.