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 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.
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.
JavaScript can be disabled from the Command Menu. This used to be available only from Settings.
console.warn() now includes a 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.
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-weightvalues 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!