Wat is er nieuw in DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Verbeterde debug van ontbrekende stijlblad

DevTools is op een aantal manieren verbeterd, zodat u problemen met ontbrekende stylesheets sneller kunt identificeren en debuggen:

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

Onderstreepte uitspraken met tooltips in het paneel Bronnen.

  • De console bevat nu naast koppelingen naar mislukte verzoeken ook koppelingen naar de exacte regel die verwijst naar een stylesheet dat niet kon worden geladen.

De console biedt koppelingen naar de exacte regels met problematische beweringen.

  • In het paneel Netwerk wordt de kolom Initiator consequent gevuld met koppelingen naar de exacte regel die verwijst naar een stylesheet dat niet kon worden geladen.

  • In het paneel Problemen worden alle problemen met het laden van stijlbladen weergegeven, waaronder verbroken URL's, mislukte verzoeken en verkeerd geplaatste @import -instructies.

Het Issues-paneel met links naar bronnen en verzoeken.

Chromium-problemen: 1440626 , 1442198 , 1453611 .

Ondersteuning voor lineaire timing in Elementen > Stijlen > Easing Editor

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

Om lineaire timing te configureren, klikt u op de knop 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 metagegevensweergave

De sectie Toepassing > Opslag krijgt ondersteuning voor opslagbuckets . Opslagbuckets zijn onafhankelijk van elkaar, dus u kunt de verwijderingsprioriteit voor datasegmenten opgeven en ervoor 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 .

Probeer deze functie eens uit. 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 metagegevens van een bucket bekijken.

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

De nieuwe, uniforme metadataweergave.

Chromium-problemen: 1448011 , 1406017 .

Vuurtoren 10.3.0

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

Een geslaagde controle op tabelkoppen.

Zie ook de volledige lijst met wijzigingen . Zie Lighthouse: Optimaliseer de websitesnelheid voor de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools.

Chromium-probleem: 772558 .

Toegankelijkheid: toetsenbordopdrachten en verbeterde schermweergave

DevTools ondersteunt nu meer snelkoppelingen en verhelpt problemen met schermlezers:

  • U kunt het contextmenu nu openen met een sneltoets, bijvoorbeeld Shift + F10 in Windows en veel Linux-distributies. Zie Alternatieve aanwijzeracties voor macOS-sneltoetsen.
  • Toepassingen voor schermlezers:
    • Kondigt selectievakjelabels niet onnodig twee keer aan.
    • De namen van kolomkoppen voor sorteerbare kolommen worden aangekondigd wanneer u op de sneltoets 'Kolomkop lezen' klikt.

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

Chromium-problemen: 1446482 , 1414952 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Het paneel Netwerk blijft netwerkactiviteit registreren, zelfs nadat u met de tijdlijn hebt gecommuniceerd ( 1422552 ).
  • Het paneel Dekking herkent nu of er sprake is geweest van prerender-activering of back-forward cache-navigatie en vraagt ​​u om opnieuw te laden ( 1393057 ).
  • U kunt nu met het toetsenbord door het deelvenster Bronnen > Breekpunten navigeren: gebruik pijltje omhoog en pijltje omlaag om te verplaatsen en spatiebalk om te selecteren ( 1446150 ).
  • Het probleem met het uploaden en filteren van HAR-bestanden in het netwerkpaneel is opgelost ( 1450622 ).
  • Flamechart in het paneel Prestaties plaatst nu kleine tussenruimtes tussen de sporen om ze beter weer te geven ( 1452150 ).
  • Automatische toewijzing voor bestanden die zijn ingesloten in bronkaarten is hersteld ( 1446383 ).

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 wat in de serie Wat is er nieuw in DevTools is behandeld.