Open the Performance panel in Chrome DevTools for the first time and it looks like someone spilled a box of crayons across your screen. Dozens of colored bars, half a dozen tracks, three tabs at the bottom that all seem to show the same thing but slightly differently. No wonder most devs record one trace, get scared, and go back to console.log debugging. I did exactly that for years - until I actually sat down and learned what each piece means, and now it’s the first tool I reach for when something “feels slow.”
Your web app is probably doing things you’ve never actually debugged. Pages being prerendered before the user clicks anything, form submissions silently queued while offline, push notifications arriving at a sleeping service worker, sessions cryptographically bound to hardware keys — all of this happens through Chrome’s background service APIs, running completely invisibly. The Background Services panel in Chrome DevTools is where you finally get to watch all of it.
Finding the Panel Open DevTools (F12 or right-click > Inspect), go to the Application tab, and scroll the left sidebar until you hit the “Background Services” section. You’ll find a list covering essentially every “invisible” API Chrome supports:
Open DevTools, click on Application, and look at the left sidebar. Cookies, Local Storage, Session Storage, IndexedDB, Cache Storage, Shared Storage, Background Services… it’s a lot. I’ve seen senior developers reach for localStorage for everything — auth tokens, shopping carts, even megabytes of API responses — simply because it’s the one they know. That’s not always wrong, but it’s rarely the best choice. Let’s actually go through what each of these mechanisms does, where you’d find it in DevTools, and — more importantly — when you should reach for it instead of the other six options sitting right next to it.