DevTools Digest, August 2016

Author: Kayce Basques

Hi, I’m Kayce, technical writer for DevTools, here to tell you about the latest happenings in DevTools land.

The Resources panel is now the Application panel

As of Chrome 52, the Resources panel is no more! It has been renamed to the Application panel. All of the old features of the Resources panel are still available, plus many new ones to help you debug Progressive Web Apps. Now you, too, can experience the joys of debugging the service worker lifecycle and cache timing issues.

Check out our new guide, written by yours truly, to learn more about the new features: Debug Progressive Web Apps

ChromeLens

ChromeLens

ChromeLens is an excellent new extension to help you make your website more accessible to the visually impaired.

P.S. Rob Dodson just launched a new video series on accessibility, A11ycasts.

New features now in Canary

Canary is currently Chrome 54. So, for future readers, if you’re using Chrome 54 or beyond, you can use these features!

The Color Picker is in the Sources panel.

Color Picker in Sources Panel

Right-click on the Resources pane in the Network panel and you can copy a string of cURL requests to download all of your resources.

Copy All as cURL

JavaScript can be disabled from the Command Menu. This used to be available only from Settings.

console.warn() now includes a stack trace.

console.warn() now includes stack trace

This last feature has been around for a few months, but it’s worth another mention. Create a Timeline recording with the JS Profile option enabled, and you can see a function-by-function breakdown of execution times in the Sources panel.

function-by-function breakdown of execution times in the Sources panel

New ideas from the community

Here are some new ideas from the community that may be coming to a future DevTools Near You.

• @matthewcp: Speed up memory leak debugging by displaying a simple list of growing objects.
• @jonathanbingram: Increase / decrease font-weight values with the increment / decrement keyboard shortcuts.
• @_bl4de: Edit cookies (actually a long-standing request, but thanks for bringing it up again). Rumor has it that @kdzwinel has a PR in the works.
• @kienzle_s: Add OR filters to the Network panel filter.

Got a new idea? We’d love to hear it. Ping us on Twitter at @ChromeDevTools and tell us what’s up.

While I’ve got your attention, if there’s any docs that need fixing, or features that need explaining, feel free to open an issue on the docs repository.

Until next month!

Originally published on Web Updates — Google Developers