David Loffer

David Loffer

1630032436

Chrome 93 - What’s New in DevTools

Editable CSS container queries, web bundle preview, better string handling in the Console and more.

Editable CSS container queries in the Styles pane

You can now view and edit CSS container queries in the Styles pane.

Container queries provide a much more dynamic approach to responsive design. The @container at-rule works in a similar way to a media query with @media. However, instead of querying the viewport and user agent for information, @container queries the ancestor container that matches certain criteria.

In the Elements panel, click on a DOM element with @container at-rule, DevTools now displays the @container information in the Styles pane. Click on it to edit the size. The Styles pane displays the corresponding container information too. Hover on it to highlight the container element on the page and check the container size. Click on it to select the container element.

The container queries feature is experimental currently. Please turn on the #enable-container-queries flag under chrome://flags to test it.

Editable CSS container queries in the Styles pane

Chromium issue: 1146422

Web bundle preview in the Network panel

Web bundle is a file format for encapsulating one or more HTTP resources in a single file. You can now preview the web bundle content in the Network panel.

The web bundle feature is experimental currently. Please enable #enable-experimental-web-platform-features flag under chrome://flags to test it.

web bundle preview

Chromium issue: 1182537

Attribution Reporting API debugging

Attribution Reporting API errors are now reported in the Issues tab.

Attribution Reporting is a new API to help you measure when a user action (such as an ad click or view) leads to a conversion, without using cross-site identifiers.

Attribution Reporting API errors in the Issues tab

Chromium issue: 1190735

Better string handling in the Console

New context menu in the Console allows you to copy any string in as content, JavaScript literal or JSON literal.

New context menu in the Console

In Chrome 90, DevTools updated the Console to always format string outputs as valid JSON literals. We received feedback from the developers that this change could be confusing, some feel that the amount of escaping is excessive and makes the output unreadable.

The Console now formats string outputs as valid JavaScript litera, and furthermore provides you 3 copy string options. The Copy as JavaScript literal option will escape appropriate special characters and wrap the string in either single quotes, double quotes, or backticks depending on the string content. The Copy string contents instead copies the raw string contents (including new lines and other special characters) verbatim to the clipboard. Finally, Copy as JSON literal formats the string as a valid JSON literal and copies it to the clipboard.

Chromium issue: 1208389

Improved CORS debugging

CORS-related TypeErrors in the Console are now linked to the Network panel and Issues tab.

Click on the two new icons next to the CORS-related error message to view the network request, or understand the error message further and get potential solutions in the Issues tab.

Icons next to the CORS-related error message

Chromium issue: 1213393

Lighthouse 8.1

The Lighthouse panel is now running Lighthouse 8.1.

Lighthouse

If your site exposes source maps to Lighthouse, look for the View Treemap button to see a breakdown of your shipped JavaScript, filterable by size and coverage on load.

The report also includes a new metric filter (Refer to the Show audits relevant to filter in the screenshot). Pick a metric to focus on the opportunities and diagnostics most relevant to improving just that metric.

The Performance Category had a number of scoring changes to align with other performance tools and to better reflect the state of the web.

Check out the release notes for a full list of changes.

Chromium issue: 772558

Display new note URL in the Manifest pane

The Manifest pane now displays the the new note URL.

Currently on Chrome OS (CrOS), Chrome Apps and Android Apps that declare a "new-note" capability may be selected as a note-taking app in the Stylus settings (shows up if the CrOS device has been used with a stylus). When selected as a note-taking app, the app can be launched from the stylus palette's "Create Note" button. Adding new-note-url field in the application manifest is part of the effort to add equivalent functionality to web apps.

New note URL in the Manifest pane

Chromium issue: 1185678

Fixed CSS matching selectors

DevTools fixed the CSS matching selectors, it was not working in the last release.

The comma separated selectors in the Styles pane are colored differently depending on whether they match the selected DOM node:

  • An unmatched portion is shown in a light grey.
  • A matching selector portion is shown in black.

CSS matching selectors

Chromium issue: 1219153

Pretty-printing JSON responses in the Network panel

You can now pretty print JSON responses in the Network panel.

Open a JSON response in the Network panel, click on the {} icon to pretty-print it.

Pretty-printing JSON responses in the Network panel

Chromium bug: 998674

#google #chrome #devtools

What is GEEK

Buddha Community

Chrome 93 - What’s New in DevTools
Sean Robertson

Sean Robertson

1621909899

Chrome 91 - What’s New in DevTools

New to DevTools in Chrome 91:

What’s new in DevTools (Chrome 91) → https://goo.gle/3eLof2N

Memory inspector → https://goo.gle/349mLZY

You’re not seeing double! We published this episode in English and in Jecelyn’s mother language Mandarin as part of our Mother Language Day series.

Tweet us → https://goo.gle/38mi9Ay

What’s New in DevTools → https://goo.gle/2MeR5Kx
Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf

#devtools #chrome #google-chrome

David Loffer

David Loffer

1630032436

Chrome 93 - What’s New in DevTools

Editable CSS container queries, web bundle preview, better string handling in the Console and more.

Editable CSS container queries in the Styles pane

You can now view and edit CSS container queries in the Styles pane.

Container queries provide a much more dynamic approach to responsive design. The @container at-rule works in a similar way to a media query with @media. However, instead of querying the viewport and user agent for information, @container queries the ancestor container that matches certain criteria.

In the Elements panel, click on a DOM element with @container at-rule, DevTools now displays the @container information in the Styles pane. Click on it to edit the size. The Styles pane displays the corresponding container information too. Hover on it to highlight the container element on the page and check the container size. Click on it to select the container element.

The container queries feature is experimental currently. Please turn on the #enable-container-queries flag under chrome://flags to test it.

Editable CSS container queries in the Styles pane

Chromium issue: 1146422

Web bundle preview in the Network panel

Web bundle is a file format for encapsulating one or more HTTP resources in a single file. You can now preview the web bundle content in the Network panel.

The web bundle feature is experimental currently. Please enable #enable-experimental-web-platform-features flag under chrome://flags to test it.

web bundle preview

Chromium issue: 1182537

Attribution Reporting API debugging

Attribution Reporting API errors are now reported in the Issues tab.

Attribution Reporting is a new API to help you measure when a user action (such as an ad click or view) leads to a conversion, without using cross-site identifiers.

Attribution Reporting API errors in the Issues tab

Chromium issue: 1190735

Better string handling in the Console

New context menu in the Console allows you to copy any string in as content, JavaScript literal or JSON literal.

New context menu in the Console

In Chrome 90, DevTools updated the Console to always format string outputs as valid JSON literals. We received feedback from the developers that this change could be confusing, some feel that the amount of escaping is excessive and makes the output unreadable.

The Console now formats string outputs as valid JavaScript litera, and furthermore provides you 3 copy string options. The Copy as JavaScript literal option will escape appropriate special characters and wrap the string in either single quotes, double quotes, or backticks depending on the string content. The Copy string contents instead copies the raw string contents (including new lines and other special characters) verbatim to the clipboard. Finally, Copy as JSON literal formats the string as a valid JSON literal and copies it to the clipboard.

Chromium issue: 1208389

Improved CORS debugging

CORS-related TypeErrors in the Console are now linked to the Network panel and Issues tab.

Click on the two new icons next to the CORS-related error message to view the network request, or understand the error message further and get potential solutions in the Issues tab.

Icons next to the CORS-related error message

Chromium issue: 1213393

Lighthouse 8.1

The Lighthouse panel is now running Lighthouse 8.1.

Lighthouse

If your site exposes source maps to Lighthouse, look for the View Treemap button to see a breakdown of your shipped JavaScript, filterable by size and coverage on load.

The report also includes a new metric filter (Refer to the Show audits relevant to filter in the screenshot). Pick a metric to focus on the opportunities and diagnostics most relevant to improving just that metric.

The Performance Category had a number of scoring changes to align with other performance tools and to better reflect the state of the web.

Check out the release notes for a full list of changes.

Chromium issue: 772558

Display new note URL in the Manifest pane

The Manifest pane now displays the the new note URL.

Currently on Chrome OS (CrOS), Chrome Apps and Android Apps that declare a "new-note" capability may be selected as a note-taking app in the Stylus settings (shows up if the CrOS device has been used with a stylus). When selected as a note-taking app, the app can be launched from the stylus palette's "Create Note" button. Adding new-note-url field in the application manifest is part of the effort to add equivalent functionality to web apps.

New note URL in the Manifest pane

Chromium issue: 1185678

Fixed CSS matching selectors

DevTools fixed the CSS matching selectors, it was not working in the last release.

The comma separated selectors in the Styles pane are colored differently depending on whether they match the selected DOM node:

  • An unmatched portion is shown in a light grey.
  • A matching selector portion is shown in black.

CSS matching selectors

Chromium issue: 1219153

Pretty-printing JSON responses in the Network panel

You can now pretty print JSON responses in the Network panel.

Open a JSON response in the Network panel, click on the {} icon to pretty-print it.

Pretty-printing JSON responses in the Network panel

Chromium bug: 998674

#google #chrome #devtools

Assic Bale

Assic Bale

1598601394

Chrome 85 - What’s New in DevTools

New to DevTools in Chrome 85:

0:18 Style editing for CSS-in-JS framework
0:52 Lighthouse 6 in the Lighthouse panel
2:16 Support for new JavaScript features
2:56 Bonus tips: Use snippets for quick access to console commands

Links:

Check out the blog version of these release notes here → https://goo.gle/3gjD3TN

Tweet us → https://goo.gle/38mi9Ay

Web Vitals →https://goo.gle/32rlNHg

What’s New in Lighthouse → https://goo.gle/32qvLZf

What’s New in DevTools → https://goo.gle/2MeR5Kx

Subscribe to Google Chrome Developers → http://goo.gl/LLLNvf

#devtools #chrome 85 #css #javascript

Sean Robertson

Sean Robertson

1614304461

Chrome 89 - What’s New in DevTools

New to DevTools in Chrome 89:

What’s new in DevTools (Chrome 89) → http://goo.gle/3qvGNrc

Getting started with Trust Tokens → http://goo.gle/3s63pyV

Debugging support for Trusted Types → http://goo.gle/3u57chx

Lighthouse 7 → http://goo.gle/3jWQjRK

You’re not seeing double! We published this episode in English and in Jecelyn’s mother language Cantonese as part of our Mother Language Day series.

#devtools #google-chrome #developer

Corey Brooks

Corey Brooks

1596159368

What's New in DevTools (Chrome 85)

In this post, I’m going to review the changes related to style editing and new JavaScript features, as well as changes in the source and performance panels.

There’s no doubt DevTools is one of the most useful tools we could use when developing and testing web applications. In Chrome 85, DevTools added several improvements, such as:

  • The timing tab of the network panel now includes respondWith events, which record the time before the service worker fetch event handler runs to the time when the promise is settled (issue #1066579)
  • In the console settings, the group similar toggle now applies to duplicate messages and the selected context only setting in console settings is now persisted (issues #1082963 and #1055875)
  • The manifest pane now shows warnings for app shortcuts if the app icon doesn’t have the correct size or is not square (issue #955497)
  • Consistent display of the computed pane across multiple viewport sizes (issue #1073899)

These are helpful changes, but in this post, I’m going to review the changes related to style editing and new JavaScript features, as well as changes in the source and performance panels.

Most likely, by the time you read this, Chrome 85 will be the mainstream, stable version. At the time of this writing (July 2020), you can only get Chrome 85 by downloading the development version of Chrome. You can learn more about Chrome’s release versions on the page about Chrome release channels.

Style editing for CSS-in-JS frameworks

Editing code or styles in-place to see the changes in real-time is one of the most useful features of DevTools.

When working with CSS styles, you have the option to manipulate CSS rules programmatically using the CSS Object Model (CSSOM) API:

const style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#myDiv {background-color: blue; color: yellow}');

However, DevTools didn’t allow you to edit styles created this way.

This has changed in Chrome 85. Starting from this version, you can edit styles built with the CSSOM API, in particular, when using CSSStyleSheet.insertRule, CSSStyleSheet.deleteRule, CSSStyleDeclaration.setProperty, and CSSStyleDeclaration.removeProperty.

This also works for libraries such as LitElement (try it with this example) or React Native for web (try it with this example).

The styles are editable even if they were inserted after DevTools are opened, and this also works with Constructable Stylesheets(at this time, only available in Chrome).

Constructable Stylesheets allows you to create stylesheets by invoking the CSSStyleSheet() constructor, adding and updating stylesheet rules with replace() and replaceSync():

const sheet = new CSSStyleSheet();
sheet.replaceSync('#myDiv {background-color: blue; color: yellow}');
document.adoptedStyleSheets = [sheet];

Try it here and here.

#chrome #devtools #javascript #developer