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

,

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 .

,

Sofia Emelianova
Sofia Emelianova
GitHub

Improved debugging of missing stylesheets

DevTools gets a number of improvements to help you identify and debug issues with missing stylesheets faster:

  • The Sources > Page tree now shows only the successfully deployed and loaded stylesheets to minimize confusion.
  • The Sources > Editor now underlines and shows inline error tooltips next to failed @import , url() , and href statements.

Underlined statements with tooltips in the Sources panel.

  • The Console , in addition to links to failed requests, now provides links to the exact line that references a stylesheet that failed to load.

The Console provides links to the exact lines with problematic statements.

  • The Network panel consistently populates the Initiator column with links to the exact line that references a stylesheet that failed to load.

  • The Issues panel lists all stylesheets loading issues, including broken URLs, failed requests, and misplaced @import statements.

The Issues panel with links to to sources and requests.

Chromium issues: 1440626 , 1442198 , 1453611 .

Linear timing support in Elements > Styles > Easing Editor

De Easing Editor. Easing Editor in Elements > Styles lets you adjust transition-timing-function and animation-timing-function values with a click. In this version, the Easing Editor. Easing Editor gets the linear timing function support.

To configure linear timings, click the linear picker button. To add a control point, click anywhere on the line. To remove a control point, double-click it. You can also choose one of the presets: linear , elastic , bounce , or emphasized . Watch the video to see the linear adjustment in action.

Chromium issue: 1421241 .

Storage buckets support and metadata view

The Application > Storage section gets storage buckets support. Storage buckets are independent from each other, so you can specify eviction prioritization for slices of data and make sure the most valuable data doesn't get deleted. Each storage bucket can store data associated with established storage APIs such as IndexedDB and CacheStorage .

Check out this fiddle to test the feature. Open DevTools, navigate to Application > Storage > Indexed DB , and run the code. DevTools now shows you the buckets and their contents. Select a bucket to view its metadata.

Viewing the metadata of a bucket.

The unified metadata view is now also available for local, session, and cache storage sections.

The new unified metadata view.

Chromium issues: 1448011 , 1406017 .

Lighthouse 10.3.0

The Lighthouse panel now runs Lighthouse 10.3.0. Most notably, this version adds four new audits that capture various accessibility issues with table headers and captions , input button names , and language mismatches . Bijvoorbeeld:

A passed table headers check.

See also the full list of changes . To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed .

Chromium issue: 772558 .

Accessibility: Keyboard commands and improved screen reading

DevTools now supports more shortcuts and fixes issues with screen readers:

  • You can now open the context menu with a keyboard shortcut, for example, Shift + F10 on Windows and many Linux distributions. For MacOS shortcuts, see Alternate pointer actions .
  • Screen reader applications:
    • Won't unnecessarily announce checkbox labels twice.
    • Will announce column header names for sortable columns when you press the "Read column header" shortcut.

The DevTools team expresses gratitude to Yanling Wang and Elorm Coch for landing these improvements.

Chromium issues: 1446482 , 1414952 .

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • The Network panel continues recording network activity even after you've interacted with the timeline ( 1422552 ).
  • The Coverage panel now recognizes if there was prerender activation or back/forward cache navigation and prompts you to reload ( 1393057 ).
  • You can now navigate the Sources > Breakpoints pane with the keyboard: Arrow up and Arrow down to move and Space to select ( 1446150 ).
  • Fixed HAR files uploading and filtering in the Network panel ( 1450622 ).
  • Flamechart in the Performance panel now puts small gaps between traces to render them better ( 1452150 ).
  • Fixed automatic mapping for files embedded in source maps ( 1446383 ).

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.

,

Sofia Emelianova
Sofia Emelianova
GitHub

Improved debugging of missing stylesheets

DevTools gets a number of improvements to help you identify and debug issues with missing stylesheets faster:

  • The Sources > Page tree now shows only the successfully deployed and loaded stylesheets to minimize confusion.
  • The Sources > Editor now underlines and shows inline error tooltips next to failed @import , url() , and href statements.

Underlined statements with tooltips in the Sources panel.

  • The Console , in addition to links to failed requests, now provides links to the exact line that references a stylesheet that failed to load.

The Console provides links to the exact lines with problematic statements.

  • The Network panel consistently populates the Initiator column with links to the exact line that references a stylesheet that failed to load.

  • The Issues panel lists all stylesheets loading issues, including broken URLs, failed requests, and misplaced @import statements.

The Issues panel with links to to sources and requests.

Chromium issues: 1440626 , 1442198 , 1453611 .

Linear timing support in Elements > Styles > Easing Editor

De Easing Editor. Easing Editor in Elements > Styles lets you adjust transition-timing-function and animation-timing-function values with a click. In this version, the Easing Editor. Easing Editor gets the linear timing function support.

To configure linear timings, click the linear picker button. To add a control point, click anywhere on the line. To remove a control point, double-click it. You can also choose one of the presets: linear , elastic , bounce , or emphasized . Watch the video to see the linear adjustment in action.

Chromium issue: 1421241 .

Storage buckets support and metadata view

The Application > Storage section gets storage buckets support. Storage buckets are independent from each other, so you can specify eviction prioritization for slices of data and make sure the most valuable data doesn't get deleted. Each storage bucket can store data associated with established storage APIs such as IndexedDB and CacheStorage .

Check out this fiddle to test the feature. Open DevTools, navigate to Application > Storage > Indexed DB , and run the code. DevTools now shows you the buckets and their contents. Select a bucket to view its metadata.

Viewing the metadata of a bucket.

The unified metadata view is now also available for local, session, and cache storage sections.

The new unified metadata view.

Chromium issues: 1448011 , 1406017 .

Lighthouse 10.3.0

The Lighthouse panel now runs Lighthouse 10.3.0. Most notably, this version adds four new audits that capture various accessibility issues with table headers and captions , input button names , and language mismatches . Bijvoorbeeld:

A passed table headers check.

See also the full list of changes . To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed .

Chromium issue: 772558 .

Accessibility: Keyboard commands and improved screen reading

DevTools now supports more shortcuts and fixes issues with screen readers:

  • You can now open the context menu with a keyboard shortcut, for example, Shift + F10 on Windows and many Linux distributions. For MacOS shortcuts, see Alternate pointer actions .
  • Screen reader applications:
    • Won't unnecessarily announce checkbox labels twice.
    • Will announce column header names for sortable columns when you press the "Read column header" shortcut.

The DevTools team expresses gratitude to Yanling Wang and Elorm Coch for landing these improvements.

Chromium issues: 1446482 , 1414952 .

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • The Network panel continues recording network activity even after you've interacted with the timeline ( 1422552 ).
  • The Coverage panel now recognizes if there was prerender activation or back/forward cache navigation and prompts you to reload ( 1393057 ).
  • You can now navigate the Sources > Breakpoints pane with the keyboard: Arrow up and Arrow down to move and Space to select ( 1446150 ).
  • Fixed HAR files uploading and filtering in the Network panel ( 1450622 ).
  • Flamechart in the Performance panel now puts small gaps between traces to render them better ( 1452150 ).
  • Fixed automatic mapping for files embedded in source maps ( 1446383 ).

Download the preview channels

Consider using the Chrome Canary , Dev , or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.