Wat is er nieuw in DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeterde foutopsporing bij ontbrekende stylesheets

DevTools is op een aantal punten verbeterd, waardoor je problemen met ontbrekende stylesheets sneller kunt opsporen en oplossen:

  • De paginastructuur 'Bronnen > Pagina ' toont nu alleen de succesvol geïmplementeerde en geladen stylesheets om verwarring te minimaliseren.
  • In de editor 'Bronnen > Editor' worden nu foutmeldingen onderstreept en inline weergegeven als tooltip bij mislukte @import , url() en href statements.

Onderstreepte zinnen met tooltips in het paneel Bronnen.

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

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

  • Het netwerkpaneel vult de kolom 'Initiator' consequent met links naar de exacte regel die verwijst naar een stylesheet die niet geladen kon worden.

  • Het paneel 'Problemen' toont alle problemen met het laden van stylesheets, waaronder kapotte URL's, mislukte verzoeken en verkeerd geplaatste @import -instructies.

Het paneel 'Problemen' met links naar bronnen en verzoeken.

Chromium-problemen: 1440626 , 1442198 , 1453611 .

Ondersteuning voor lineaire timing in Elementen > Stijlen > Easing-editor

De Vereenvoudigingseditor. Met de Easing Editor in Elements > Styles kunt u de waarden transition-timing-function en animation-timing-function met één klik aanpassen. In deze versie is de Vereenvoudigingseditor. Easing Editor biedt nu ondersteuning voor de lineaire timingfunctie.

Om lineaire timing in te stellen, klikt u op de knop voor de lineaire selectie. 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.

Chromium-probleem: 1421241 .

Ondersteuning voor opslagbuckets en weergave van metadata

Het gedeelte Toepassing > Opslag biedt nu ondersteuning voor opslagbuckets . Opslagbuckets zijn onafhankelijk van elkaar, waardoor u prioriteit kunt geven aan het verwijderen van gegevenssegmenten en ervoor kunt zorgen dat de meest waardevolle gegevens niet worden verwijderd. Elke opslagbucket kan gegevens opslaan die zijn gekoppeld aan bestaande opslag-API's zoals IndexedDB en CacheStorage .

Bekijk deze fiddle om de functie te testen. Open DevTools, ga naar Toepassing > Opslag > Geïndexeerde database en voer de code uit. DevTools toont nu de buckets en hun inhoud. Selecteer een bucket om de metadata ervan te bekijken.

De metadata van een bucket bekijken.

De uniforme metadataweergave is nu ook beschikbaar voor lokale, sessie- en cacheopslag.

De nieuwe, uniforme metadataweergave.

Chromium-problemen: 1448011 , 1406017 .

Lighthouse 10.3.0

Het Lighthouse- paneel draait nu op Lighthouse 10.3.0. Deze versie voegt met name vier nieuwe audits toe die verschillende toegankelijkheidsproblemen met tabelkoppen en -bijschriften , namen van invoerknoppen en taalverschillen vastleggen. Bijvoorbeeld:

De controle van de tabelheaders is geslaagd.

Zie ook de volledige lijst met wijzigingen . Voor meer informatie over het gebruik van het Lighthouse- paneel in DevTools, zie Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 772558 .

Toegankelijkheid: Toetsenbordcommando's en verbeterde schermweergave.

DevTools biedt nu ondersteuning voor meer sneltoetsen en lost problemen met schermlezers op:

  • Je kunt het contextmenu nu openen met een sneltoets, bijvoorbeeld Shift + F10 op Windows en veel Linux-distributies. Voor sneltoetsen op macOS, zie Alternatieve muisacties .
  • Schermlezerapplicaties:
    • De labels van selectievakjes worden niet onnodig twee keer weergegeven.
    • De kolomkopnamen worden voorgelezen voor sorteerbare kolommen wanneer u op de sneltoets "Kolomkop lezen" drukt.

Het DevTools-team is Yanling Wang en Elorm Coch zeer dankbaar voor het realiseren van deze verbeteringen.

Chromium-problemen: 1446482 , 1414952 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Het netwerkpaneel blijft netwerkactiviteit registreren, zelfs nadat u met de tijdlijn hebt gecommuniceerd ( 1422552 ).
  • Het Coverage- paneel herkent nu of er sprake was van prerender-activering of navigatie door de cache (terug/vooruit) en vraagt ​​u om opnieuw te laden ( 1393057 ).
  • Je kunt nu met het toetsenbord door het deelvenster Bronnen > Breakpoints navigeren: pijltjes omhoog en omlaag om te bewegen en spatie om te selecteren ( 1446150 ).
  • Het uploaden en filteren van HAR-bestanden in het netwerkpaneel is gecorrigeerd ( 1450622 ).
  • Flamechart in het paneel Prestaties plaatst nu kleine tussenruimtes tussen sporen om ze beter weer te geven ( 1452150 ).
  • De automatische toewijzing voor bestanden die in bronkaarten zijn ingesloten, is gecorrigeerd ( 1446383 ).

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' .