In and Out of Chrome Devtools — Part II

In our last article, we explored key features of the Elements, Console, Sources, and Performance tabs in Chrome DevTools. In this second part, we dive deeper into other essential tabs: Memory, Application, Security, Lighthouse, and Recorder. These tools offer advanced debugging, testing, and optimization capabilities to elevate your development workflow.

Memory Tab

The Memory tab helps you analyze and debug memory usage in your web application. It’s invaluable for identifying memory leaks, optimizing memory consumption, and improving performance.

Memory tab

Profiling Types in the Memory Tab

1. Heap Snapshot : Captures a snapshot of the JavaScript memory heap, including objects, closures, and DOM nodes. Use it to compare snapshots and identify memory leaks or unexpected object retention.
2. Allocations on Timeline Records memory allocations over time, showing when objects are created and destroyed. This helps identify memory spikes or patterns, such as objects not being garbage-collected.
3. Allocation Sampling Samples memory allocations periodically to highlight allocation…