Wat is er nieuw in DevTools (Chrome 115)

Sofia Emelianova
Sofia Emelianova

Elementverbeteringen

Nieuwe CSS-subgridbadge

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

Om een ​​genest raster dat een subraster is en dus het aantal en de grootte van de sporen van het bovenliggende element overneemt, te inspecteren en te debuggen, klikt u op het pictogram. Hiermee wordt een overlay in- of uitgeschakeld die de kolommen, rijen en hun aantallen bovenop het element in de viewport weergeeft.

Het subgrid-logo en de overlay in de viewport.

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

Chromium-probleem: 1442536 .

Selectiespecificiteit in tooltips

Ga naar Elementen > Stijlen en beweeg de muis over een selectornaam om de specificiteitswaarde ervan in een tooltip te zien.

Een tooltip met een specificiteitsgewicht dat overeenkomt met dat 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 zien.

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

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

Chromium-probleem: 1380779 .

Bronnenverbeteringen

CSS-syntaxmarkering

Het paneel 'Bronnen ' toont de volgende informatie voor voorbewerkte CSS- bestanden, zoals SASS, SCSS en LESS:

  • Syntaxmarkering.
  • Inline-editors worden ondersteund. Deze editors zijn vergelijkbaar met die in Elementen > Stijlen , bijvoorbeeld de Kleurenkiezer en de Easing-editor .

Verbeterde CSS-syntaxmarkering en ondersteuning voor inline-editors in Sources.

Chromium-problemen: 1302261 , 1392085 .

Sneltoets voor het instellen van voorwaardelijke breekpunten

Je kunt nu sneller voorwaardelijke breekpunten instellen met een sneltoets. Om het dialoogvenster voor breekpunten te openen, houd je Command (MacOS) of Control (Windows/Linux) ingedrukt en klik je op het regelnummer in de linkerkolom van Bronnen > Editor .

Het regelnummer in de linkerkolom en het dialoogvenster voor het breekpunt.

Chromium-probleem: 1405767 .

Applicatie > Beperkingen voor het traceren van bounces

Met het experiment 'Bounce Tracking Mitigations' in Chrome kunt u de status van sites identificeren en verwijderen die gebruikmaken van de bounce tracking-techniek. Het paneel 'Applicatie > Achtergrondservices' krijgt een nieuw tabblad 'Bounce Tracking Mitigations' waarmee u handmatig trackingmaatregelen kunt afdwingen en een lijst kunt bekijken van de sites waarvan de status is verwijderd.

Bekijk deze beveiligingsfunctie:

  1. Blokkeer cookies van derden in Chrome . Ga naar de instellingen en schakel ze in. Menu met drie puntjes. > Instellingen > Beveiliging. Privacy en beveiliging > Cookies en andere sitegegevens > Keuzeknop aangevinkt. Blokkeer cookies van derden .
  2. Stel in chrome://flags het experiment ' Bounce Tracking Mitigations' in op 'Enabled With Deletion' .
  3. Bekijk deze demopagina , open Toepassing > Achtergrondservices > Beperkingen voor het bijhouden van bounces , klik op een bounce-link op de pagina, wacht (10 seconden) tot Chrome de bounce heeft geregistreerd en klik op 'Geforceerd uitvoeren' om de status onmiddellijk te verwijderen.

Bounce Tracking Mitigations vermeldt een statusverwijdering.

Daarnaast waarschuwt het tabblad 'Problemen' je voor de aanstaande verwijdering van de betreffende staat.

Chromium-probleem: 1432303 .

Lighthouse 10.2.0

Het Lighthouse- paneel draait nu op Lighthouse 10.2.0. De meest opvallende wijziging is dat de controle op de grootste inhoudsrijke weergave een tabel bevat met faseberekeningen voor gesimuleerde en DevTools-throttling. Zie ook de volledige lijst met wijzigingen .

De LCP-fasetabel.

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 772558 .

Inhoudsscripts standaard negeren

De Instellingen. Instellingen > Negeerlijst > Selectievakje. Het injecteren van contentscripts via extensies is nu standaard ingeschakeld.

Met deze instelling ingeschakeld:

  • De debugger negeert dergelijke scripts en stopt niet bij uitzonderingen die ze genereren.
  • In het venster Bronnen > Oproepstapel worden genegeerde frames overgeslagen. Om het overslaan hier uit te schakelen, vinkt u het vakje aan. Selectievakje. Toon frames die op de negeerlijst staan .
  • De console vouwt genegeerde frames in stacktraces samen. Klik op 'Toon N frames meer' om uit te vouwen en op 'Toon minder' om ze weer samen te vouwen.

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

Bovendien is de tekst van de selectievakjes in de negeerlijst duidelijker geworden.

Chromium-problemen: 1440958 , 1364501 .

Netwerk > Standaardinstelling voor het mooi opmaken van reacties

Het paneel Netwerk > Reactie geeft nu standaard de verkleinde reactieteksten mooi weer, net als het paneel Bronnen .

De optie voor het mooi opmaken van de tekst is ingeschakeld in het venster 'Reactie' van het tabblad 'Netwerk'.

Daarnaast krijgen SVG-bestanden syntaxmarkering.

Syntaxmarkering voor SVG.

Chromium-problemen: 1382752 , 1385374 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Instellingen. Instellingen > Apparaten : Facebook voor Android v407 op Pixel 6 toegevoegd aan de lijst met agentstrings.
  • Netwerk : Snelkoppeling 'Netwerklogboek wissen' toegevoegd ( 1444991 ):
    • macOS: Command + K
    • Windows/Linux: Control + L
  • De vervolgkeuzeoptie Recorder > Opname N > Prestatie-inzichten is verwijderd ( 1414773 ).
  • Stijlbladen die niet geladen konden worden, zijn nu verborgen in de navigatiestructuur ( 1386059 ).
  • Prestatieverbetering : De onjuiste weergave van het uitbreidbare interactiespoor is gecorrigeerd ( 1432510 ).
  • Elementen : Stijlpagina's die niet geladen konden worden, zijn 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 sneltoets waarmee de cursor woord voor woord wordt verplaatst, is hersteld voor CSS-bestanden in Bronnen > Editor ( 1241848 ):
    • macOS: Alt + pijltje
    • Windows/Linux: Ctrl + pijltje

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .