Wat is er nieuw in DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeterde foutopsporing van ontbrekende stylesheets

DevTools krijgt een aantal verbeteringen waarmee u problemen met ontbrekende stylesheets sneller kunt identificeren en oplossen:

  • De Bronnen > Paginastructuur toont nu alleen de succesvol geïmplementeerde en geladen stylesheets om verwarring te minimaliseren.
  • De Bronnen > Editor onderstreept nu inline fouttooltips en toont deze naast mislukte @import , url() - en href instructies.

Onderstreepte uitspraken met tooltips in het paneel Bronnen.

  • De Console biedt, naast koppelingen naar mislukte verzoeken, nu koppelingen naar de exacte regel die verwijst naar een stylesheet die niet kon worden geladen.

De console biedt links naar de exacte regels met problematische uitspraken.

  • Het paneel Netwerk vult de kolom Initiator consequent in met koppelingen naar de exacte regel die verwijst naar een stylesheet die niet kon worden geladen.

  • In het paneel Problemen worden alle problemen met het laden van stylesheets vermeld, inclusief verbroken URL's, mislukte verzoeken en verkeerd geplaatste @import instructies.

Het paneel Problemen met links naar bronnen en verzoeken.

Chroomuitgaves: 1440626 , 1442198 , 1453611 .

Ondersteuning voor lineaire timing in Elementen > Stijlen > Easing Editor

De Versoepeling van de redacteur. Met de Easing Editor in Elementen > Stijlen kunt u de waarden transition-timing-function en animation-timing-function met één klik aanpassen. In deze versie is de Versoepeling van de redacteur. Easing Editor krijgt ondersteuning voor de lineaire timingfunctie.

Om lineaire timings te configureren, klikt u op de lineaire kiezerknop. Om een ​​controlepunt toe te voegen, klikt u ergens op de lijn. Om een ​​controlepunt te verwijderen, dubbelklikt u erop. U kunt ook een van de voorinstellingen kiezen: linear , elastic , bounce of emphasized . Bekijk de video om de lineaire aanpassing in actie te zien.

Chroomuitgave: 1421241 .

Ondersteuning voor opslagbuckets en weergave van metagegevens

De sectie Toepassing > Opslag krijgt ondersteuning voor opslagbuckets . Opslagbuckets zijn onafhankelijk van elkaar, dus u kunt de uitzettingsprioriteit voor gegevenssegmenten opgeven en ervoor zorgen dat de meest waardevolle gegevens niet worden verwijderd. Elke opslagbucket kan gegevens opslaan die zijn gekoppeld aan gevestigde opslag-API's zoals IndexedDB en CacheStorage .

Bekijk deze viool om de functie te testen. Open DevTools, navigeer naar Application > Storage > Indexed DB en voer de code uit. DevTools toont u nu de buckets en hun inhoud. Selecteer een bucket om de metagegevens ervan te bekijken.

De metadata van een bucket bekijken.

De uniforme metagegevensweergave is nu ook beschikbaar voor lokale, sessie- en cacheopslagsecties.

De nieuwe uniforme metadataweergave.

Chroomuitgaves: 1448011 , 1406017 .

Vuurtoren 10.3.0

Het Lighthouse- paneel draait nu Lighthouse 10.3.0. Het meest opvallend is dat deze versie vier nieuwe audits toevoegt die verschillende toegankelijkheidsproblemen met tabelkoppen en bijschriften , namen van invoerknoppen en niet-overeenkomende talen vastleggen. Bijvoorbeeld:

Een geslaagde controle op de tabelkopteksten.

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 .

Toegankelijkheid: toetsenbordopdrachten en verbeterde schermlezing

DevTools ondersteunt nu meer snelkoppelingen en lost problemen met schermlezers op:

  • Je kunt nu het contextmenu openen met een sneltoets, bijvoorbeeld Shift + F10 op Windows en veel Linux-distributies. Zie Alternatieve aanwijzeracties voor MacOS-snelkoppelingen.
  • Schermlezertoepassingen:
    • Zal niet onnodig twee keer selectievakjelabels aankondigen.
    • Zal kolomkopnamen aankondigen voor sorteerbare kolommen wanneer u op de snelkoppeling "Kolomkop lezen" drukt.

Het DevTools-team spreekt zijn dank uit aan Yanling Wang en Elorm Coch voor het realiseren van deze verbeteringen.

Chroomafgiften: 1446482 , 1414952 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Het Netwerkpaneel gaat door met het opnemen van netwerkactiviteit, zelfs nadat u interactie heeft gehad met de tijdlijn ( 1422552 ).
  • Het dekkingspaneel herkent nu of er pre-render-activatie of back-forward cache-navigatie heeft plaatsgevonden en vraagt ​​u om opnieuw te laden ( 1393057 ).
  • U kunt nu met het toetsenbord door het deelvenster Bronnen > Breekpunten navigeren: Pijl omhoog en Pijl omlaag om te verplaatsen en Spatie om te selecteren ( 1446150 ).
  • Probleem opgelost met het uploaden en filteren van HAR-bestanden in het netwerkpaneel ( 1450622 ).
  • Flamechart in het paneel Prestaties plaatst nu kleine openingen tussen sporen om ze beter weer te geven ( 1452150 ).
  • Automatische mapping voor bestanden ingebed in bronkaarten opgelost ( 1446383 ).

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 .

,

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeterde foutopsporing van ontbrekende stylesheets

DevTools krijgt een aantal verbeteringen om u te helpen bij het identificeren en debuggen van problemen met ontbrekende stylesheets sneller:

  • De bronnen > Paginaboom toont nu alleen de succesvol geïmplementeerde en geladen stylesheets om verwarring te minimaliseren.
  • De bronnen > Editor onderstreept nu en toont inline foutfouts naast mislukte @import , url() en href -instructies.

Onderstreepte uitspraken met tooltips in het paneel Bronnen.

  • De console , naast links naar mislukte verzoeken, biedt nu links naar de exacte regel die verwijst naar een stylesheet die niet kan worden geladen.

De console biedt links naar de exacte lijnen met problematische uitspraken.

  • Het netwerkpaneel vult de initiatorkolom consequent op met links naar de exacte regel die verwijst naar een stylesheet die niet kan worden geladen.

  • Het paneel voor problemen bevat alle stylesheets laadproblemen, inclusief gebroken URL's, mislukte verzoeken en misplaatste @import -instructies.

Het probleempaneel met links naar naar bronnen en verzoeken.

Chromium -problemen: 1440626 , 1442198 , 1453611 .

Lineaire timingondersteuning in elementen> Styles> Easing Editor

De Easing Editor. Loseringseditor in elementen > Styles kunt u met een klik transition-timing-function en animation-timing-function waarden aanpassen. In deze versie, de Easing Editor. Loseringseditor krijgt de ondersteuning van de lineaire timingfunctie.

Om lineaire timings te configureren, klikt u op de lineaire kiezerknop. Om een ​​bedieningspunt toe te voegen, klikt u ergens op de regel. Dubbelklik op een bedieningspunt om een ​​bedieningspunt te verwijderen. U kunt ook een van de voorinstellingen kiezen: linear , elastic , bounce of emphasized . Bekijk de video om de lineaire aanpassing in actie te zien.

Chroomprobleem: 1421241 .

Opslagemmers ondersteuning en metadata -weergave

De sectie Application > Opslag krijgt ondersteuning opslagmachets . Opslagemmers zijn onafhankelijk van elkaar, dus u kunt uitzetting prioritering voor plakjes gegevens opgeven en ervoor zorgen dat de meest waardevolle gegevens niet worden verwijderd. Elke opslag emmer kan gegevens opslaan die zijn gekoppeld aan gevestigde opslag -API's zoals IndexedDB en Cachestorage .

Bekijk deze viool om de functie te testen. Open devtools, navigeer naar applicatie > opslag > geïndexeerde dB en voer de code uit. Devtools toont nu de emmers en hun inhoud. Selecteer een emmer om de metagegevens te bekijken.

Het bekijken van de metadata van een emmer.

De Unified Metadata -weergave is nu ook beschikbaar voor secties voor lokale, sessie en cache.

De nieuwe Unified Metadata -weergave.

Chromium -problemen: 1448011 , 1406017 .

Vuurtoren 10.3.0

Het vuurtorenpaneel draait nu Lighthouse 10.3.0. Het meest opvallend is dat deze versie vier nieuwe audits toevoegt die verschillende toegankelijkheidsproblemen vastleggen met tabelkoppen en bijschriften , input -knopnamen en taalmismatches . Bijvoorbeeld:

Een doorgegeven tafelkoppen check.

Zie ook de volledige lijst met wijzigingen . Zie Lighthouse: optimaliseer de websitesnelheid om de basisprincipes van het gebruik van het vuurtorenpaneel in Devtools te leren om de website van de websites te optimaliseren .

Chromium -probleem: 772558 .

Toegankelijkheid: toetsenbordopdrachten en verbeterde schermlezing

DevTools ondersteunt nu meer snelkoppelingen en lost problemen op met schermlezers:

  • U kunt nu het contextmenu openen met een sneltoets, bijvoorbeeld verschuiven + F10 op Windows en vele Linux -distributies. Zie alternatieve pointeracties voor macOS -snelkoppelingen.
  • Schermlezertoepassingen:
    • Zal niet onnodig selectievakjes labels twee keer aankondigen.
    • Zal kolomkopnamen aankondigen voor sorteerbare kolommen wanneer u drukt op de snelkoppel "Kolom header".

Het DevTools -team spreekt Yanling Wang en Elorm Coch uit voor het landen van deze verbeteringen.

Chromium -problemen: 1446482 , 1414952 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Het netwerkpaneel gaat door met het opnemen van netwerkactiviteit, zelfs nadat u met de tijdlijn hebt gehad ( 1422552 ).
  • Het dekkingspaneel erkent nu of er PRERENDER -activering of back/forward cache -navigatie was en vraagt ​​u om opnieuw te laden ( 1393057 ).
  • U kunt nu navigeren door het deelvenster Bronnen > Breekpunten met het toetsenbord: pijl omhoog en pijl naar beneden om te verplaatsen en ruimte om te selecteren ( 1446150 ).
  • HAR -bestanden opgelost uploaden en filteren in het netwerkpaneel ( 1450622 ).
  • FlameCart in het prestatiepaneel plaatst nu kleine gaten tussen sporen om ze beter te maken ( 1452150 ).
  • Automatische toewijzing opgelost voor bestanden ingebed in brongaarten ( 1446383 ).

Download de voorbeeldkanalen

Overweeg het gebruik van de Chrome Canary , Dev of Beta als uw standaardontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en u helpen problemen op uw site te vinden 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 met betrekking tot Devtools te bespreken.

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .