Chrome DevTools code snippets became my favorite tool when investigating performance bottlenecks in web applications. A JavaScript fragment can be stored as a named snippet in the "Sources" DevTools panel and executed in the current page's context, just as if it were a code executed in the browser's console.

Using code snippets we can start CPU, timeline and memory profilers, get very accurate information about any performance measurement, and quickly find the application's bottlenecks. We can even auto update locally stored code snippets using a code snippet!

In this presentation I will go through a typical web application, using different code snippets to measure and locate bottlenecks. Any developer trying to make a page faster would benefit from knowing about code snippets.

See blog post http://glebbahmutov.com/blog/performance-profiling-using-devtools-code-snippets/ where I walk through a typical web application step through step, finding bottlenecks using code snippets and then fixing them one by one.

The web performance is certainly an important topic these days. The code snippets allow accurate and quick profiling. My github repo with code snippets https://github.com/bahmutov/code-snippets has become my most starred project overnight.