/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(66) Network Throttling Profiles Block certain requests from a web page (68)

Chrome DevTools: See costly functions in the Timeline Panel, includes domain or URL grouping

14 Aug 2015
See costly functions in the Timeline Panel, includes domain or URL grouping

Did you know frontend performance is the highest suggested topic over on the Dev Tips issue tracker? github.com/umaar/dev-tips/issues

Here's a performance related tip:

The Costly Functions experimental feature in the Canary Timeline Panel makes the Timeline recordings a lot easier to digest. Performance issues can arise from some of the following:

and more. The Costly Functions Pane groups all the activity which happens in such buckets and then sorts by total time so you can determine where your bottlenecks originate from.

In addition to function groups (the buckets mentioned above), you can group by URL or Domain, this way, you can quickly identify how much overhead a third party script adds to your page.

Warning: This is an experimental feature currently in Canary! Things are likely to change. Some experimental features are removed.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.