Chrome DevTools: Identify and visualise slow pieces of JavaScript code

You can locate slow pieces of JavaScript code with the User Timing API.

Try wrapping potentially slow code like this:

performance.mark('costlyFunction Start')

costlyFunction()

performance.mark('costlyFunction End')

performance.measure(
    'costlyFunction',
    'costlyFunction Start',
    'costlyFunction End'
)

💡 Tip: You can do much more with DevTools & the User Timing API:

• ⚡   Inject performance metrics into apps you aren't familiar with.
• 👁   Programatically read all performance measurements which have been recorded in JavaScript.
• 👨‍👩‍👧‍👧   Deploy performance capturing code to your end-users so you can gather Real User Metrics.
• ❔   Understand the benefit of Real User Monitoring, and how it compares to synthetic monitoring.
• ⚙   Use a combination of tools, like Boomerang and Node.js to receive performance metrics from your real users, straight to your servers.
• 📊   Visualise User Timing metrics in DevTools and correlating it with existing flame graphs.
• 🔌   Use external services & plugins to visualise your performance metrics.

The ModernDevTools.com course covers all of this 🎊   and videos on these topics have been released!

There's already 50 minutes worth of video content on these topics alone and there's much more to come. I've worked hard to make information digestible. Go and check out the course! Thank you for your support.