Modern web applications frequently suffer from bundle bloat—loading massive component libraries, analytics scripts, and stylesheet frameworks where only a fraction of the code is actually used on any single page. This dead weight increases mobile download times, delays First Contentful Paint (FCP), and exhausts device RAM. Google Chrome DevTools provides two profiling instruments: the Coverage panel, which measures exact percentages of unused CSS and JavaScript bytes in real time, and the Memory panel, which diagnoses memory leaks and detached DOM trees through heap snapshots.
Opening and Running the Coverage Panel
The Coverage panel is accessible through the DevTools command menu or drawer:
- Open Google Chrome in an Incognito Window to prevent extension scripts from polluting analysis.
- Navigate to your web application and press F12 (or Ctrl + Shift + I / Cmd + Option + I).
- Press Ctrl + Shift + P (Windows) or Cmd + Shift + P (Mac) to open the Command Menu.
- Type
Coverageand select Show Coverage. The Coverage tab opens in the bottom drawer. - Click the circular reload button labeled Start instrumenting coverage and reload page.
| Color Indicator | Code Status | Optimization Action |
|---|---|---|
| Green Bar | Executed / Used Code | Essential for initial render or critical interaction. |
| Red Bar | Unused / Dead Code | Candidate for code-splitting, tree-shaking, or deferred loading. |
Inspecting and Removing Unused CSS and JavaScript
The Coverage table catalogs every loaded asset, displaying Total Bytes, Unused Bytes, and a visual usage bar:
- Sort the table by Unused Bytes descending to identify the heaviest offenders.
- Double-click any file in the list. DevTools opens the file in the Sources panel with a per-line color gutter:
- Lines highlighted with a green marker were executed during page load.
- Lines highlighted with a red marker were parsed and loaded into memory but never executed.
- Interact with the live page (click menus, open modals, scroll down). As you trigger interactive elements, unused red lines transition to green as their handlers execute.
Any code that remains permanently red throughout all user flows should be removed using bundler tree-shaking (e.g., in Webpack, Rollup, or Vite), or broken into lazy-loaded dynamic chunks via import() statements.
Detecting Memory Leaks with Heap Snapshots in the Memory Panel
Even when bundle sizes are small, improper event listener removal or retained global references cause JavaScript memory leaks, gradually slowing down client browser tabs.
- Switch to the Memory tab in Chrome DevTools.
- Select Heap snapshot and click Take snapshot to capture the baseline state.
- Perform repeated user actions in your web app (e.g., opening and closing a dialog 10 times).
- Take a second Heap snapshot.
- Change the view dropdown at the top from Summary to Comparison, comparing Snapshot 2 against Snapshot 1.
Identifying Detached DOM Elements
In the Comparison table, filter by Detached. Detached DOM elements are HTML nodes that were removed from the visual document tree via removeChild() or element.remove(), but cannot be garbage-collected because a JavaScript closure or event listener still retains a reference to them.
Expanding the detached node in the Retainers pane pinpoints the exact JavaScript variable or global array preventing cleanup. Removing these orphaned references restores memory efficiency and prevents progressive client slowdowns.