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 het contextmenu nu 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 .