It's been a feature-rich month in Chrome Canary. Read on to learn which third party scripts cause perf issues on your site with the Aggregated Details in Timeline, how to choose consistent colors with the new color palette, how to simulate conference WiFi with customizable network profiles and how to get more out of the DevTools UI with the new main menu and better tooltips.
Better blame perf issues: Aggregated details in Timeline
On today's websites we are using more and more beacons, analytics, social, font-loading and advertising services from third parties, sometimes a few too many. To ensure this doesn't happen and to give you visibility into the problem, we are introducing aggregated details to the Timeline.
In the Aggregated Details tab, you can focus on just costly functions or the entire call tree, then break down the selected data by domain, sub-domain or distinct URLs. For example, in the above Timeline of a page load, you can now attribute slow-downs easily to third party scripts coming from domains such as facebook.net or twitter.com.
New, dedicated main menu
To unclutter the main toolbar, we've moved drawer, settings and docking icons into a new, dedicated main menu.
In particular docking got much simpler. Instead of having to long-press on the previous icon, each docking position features it's own icon.
In addition to docking, we've added quick access file search, shortcuts and help (which leads to our new homepage).
Discover DevTools through improved tooltips
We've got lots of buttons in DevTools, and we know that not all of them are self-explaining. We've now made discovering actions and their shortcuts easier by replacing the system-native tooltips with custom, platform-consistent tooltips.
The new tooltips appears much more quickly and includes keyboard shortcuts (if there is one).
Create custom network throttling profiles
If the default options for the Network Throttler are too limiting for your use cases, and you need a "Conference WiFi" option or, for the sake of nostalgia, want to go old school and emulate a "110 Baud" line, I have good news for you. We've added a new Settings panel that allows you to do any of those things.
Automatic, Material and custom color palettes
Whether you want to recreate the colors of magic or work with an existing color palette, the improved Colorpicker helps you to pick a consistent color palette for your site.
By clicking on the little switcher icon next to the palette, you can choose from the following:
- Page Colors — This palette is auto-generated from the colors we find in your CSS, making it a great option if you're extending an existing site.
- Material Design — The Material Design palette offers beautiful colors out of the box and is an ideal choice when starting a new project. Right now you'll find all of the primary colors but we're bringing all shades to it soon.
- Custom — That's your own playground. Add new colors by picking one in the picker, then click the "plus" icon next to the palette. Reorder by dragging them around and right-click to reveal more options, such as remove.
Tell us what you think, and how we could extend the color story further.
The best of the rest
- Requests made using the fetch() API are now shown in the Network Panel
- Automatic panel layouting ensures that when you resize your DevTools
panels adapt to the new space constraints. - Inspect Element & Device Mode has a set of new icons.
- Attributes in the DOM panel are now differently colored even when the node is highlighted. (They where all white before.)
- Hidden elements (activated by pressing "h" on a selected DOM node) now show a grey circle indicator on the left, and DOM breakpoints do the same with a blue circle. (This is analogous to the orange indicators we already have for forcing an element state like :hover).
As always, let us know what you think via Twitter or the comments below, and submit bugs to crbug.com/new.
Until next month!
Paul Bakaus & the DevTools team