layout | title | authors | date | description | hero | alt | tags | ||||
---|---|---|---|---|---|---|---|---|---|---|---|
layouts/blog-post.njk |
What's New in DevTools (Chrome 119) |
|
2023-10-10 |
Improved @property section in Styles, updated devices list, enhanced pretty-printing in Sources and autocompletion in the Console. |
image/NJdAV9UgKuN8AhoaPBquL7giZQo1/Sn4Hb69riQJo2hnsqOup.jpg |
Improved @property section in Styles, updated devices list, enhanced pretty-printing in Sources and autocompletion in the Console. |
|
{% Partial 'devtools/banner.md' %}
You can now edit the @property
CSS at-rule in the corresponding section in the Elements > Styles pane.
{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/J6OXQJK3RRuCvAR1Yai9.png", alt="The before and after making the property rule editable.", width="800", height="526" %}
{% Aside 'note' %} Note that DevTools shows non-editable rules in italic text. {% endAside %}
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/0226cbddd5437e869c924569fe342fcb9e89b466 #} {# https://chromium.googlesource.com/chromium/src/+/15245f8b594e93fa4aeb2f3d321364eaf2ed8438 #}
Chromium issue: 1471123.
The Issues tab now reports issues with invalid declarations in @property
rules.
{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/sd2Fh479paZoIzukHrCO.png", alt="An issues with the property rule reported in the Issues tab.", width="800", height="639" %}
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/499d13e8ad395b9a55aadf7eaaafe487ebed2cbb #} {# https://chromium.googlesource.com/chromium/src/+/b0b317506822855ec4757d5962671f5fe666aac0 #}
Chromium issue: 1473283.
The user agent strings in {% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/9gzXiTYY0nZzBxGI6KrV.svg", alt="Settings.", width="24", height="24" %} Settings > Devices has been updated to reflect the average usage of browsers and operating systems. You can now emulate more of the up-to-date devices in device mode.
{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/EaLfaHSw1q7wGH5C1HQ6.png", alt="The before and after updating the device list.", width="800", height="503" %}
Chromium issue: 1479733.
The Sources panel now supports pretty-printing inline JSON in <script>
HTML tags for easier debugging.
{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/EdE39X771gyHJLTGmPj8.png", alt="The before and after pretty-printing inline JSON in the script tag.", width="800", height="648" %}
Chromium issues: 406900, 1473875.
You can now autocomplete private class fields when evaluating them outside the class scope in the Console.
{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/5yG7PmRn2TmVGOz0N1ne.png", alt="The before and after supporting autocompletion for private class field outside of class scope.", width="800", height="408" %}
Chromium issues: 1483848, 1381806.
The Lighthouse panel now runs Lighthouse 11.1.0. See the full list of changes.
To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.
Chromium issues: 772558.
Screen readers will now read out the following:
- Warnings and errors in the Console.
- The text in the Do you trust this code? dialog when pasting code to Console or Sources.
Additionally, the Application panel fixed contrast issues with links in high contrast mode.
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/7fa46cca30a1d164c60e359b10cd97b1be541d4e #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/6f843ded7a69f3a2b5817c8b1e01ab828e178c8e #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/85a958fb910c0c2c0e5c1b206d52e3708b30bebe #}
Chromium issues: 1485257, 1486643, 1485263.
The Application > Web SQL section will be removed in Chrome 123 because the Web SQL Database API isn't maintained anymore. This version adds a warning to the section about the upcoming removal.
{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/NuJgh7FznQ2jlgG0pq9w.png", alt="The Web SQL deprecation warning.", width="800", height="472" %}
For more information, see Deprecating and removing Web SQL.
{# https://chromium.googlesource.com/devtools/devtools-frontend/+/087d06b98e6fdd264fde7d16895a1c3cec4d0766 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/712c7996d8c9a492e073f75b26d92ae76f959719 #}
Chromium issues: 1485966.
The Application > Manifest section now checks if your web app's screenshots with the same form factor (wide
or narrow
) have the same aspect ratio.
{% Img src="image/NJdAV9UgKuN8AhoaPBquL7giZQo1/krHlVOBrMa0p4SvlhGOJ.png", alt="A warning on the incorrect aspect ratio of screenshots with the same form factor.", width="800", height="370" %}
For more information, see Debug Progressive Web Apps and Add a web app manifest.
The DevTools team expresses gratitude to Alexey Rodionov for landing this change and other manifest warning improvements in the previous version.
Chromium issue: 1476656.
These are some noteworthy fixes and improvements in this release:
- Elements:
- Animation timing function swatches are not shown for longhand CSS properties under the expandable shorthand ones (1149182).
- The autocomplete for
contain-intrinsic-*
now doesn't provide the incorrect singleauto
value because it should beauto <length>
(1480415). - Support for deprecated and invalid
-webkit-*
properties has been removed (1086089, 1030765).
- Breakpoints: Fixed the bug with disappearing breakpoint editing dialog when the breakpoint type is changed (1485782).
- Performance:
- Network: The Set cookies column now shows the correct number of cookies that are set, excluding blocked (1486903).
- DevTools extensions now load after navigation to a non-blocked host (1476264).
- Fixed the bug with incorrect script execution context for extensions (1275331).
{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}