Catching Breaking API Changes Before Production (with a Chrome Extension)

Have you ever deployed code only to find out the backend changed an array to a string? Your .map() breaks. Users complain. You spend the next hour debugging something that was working yesterday . This happened to me one too many times. So I built API Inspector — a Chrome DevTools extension that tracks API schema changes while you’re developing , not after production breaks. 🎯 The Problem Picture this scenario. Week 1: Everything works // API response { " projectStatus " : [ " active " , " pending " ] } // Frontend usage projectStatus . map ( status => ...) This is reasonable. The API contract says projectStatus is an array. Week 2: Silent backend change The backend gets refactored. Now the API returns: { " projectStatus " : " active " } You deploy. Everything breaks. 💥 “But why didn’t you add an array check?” Yes — you could write: Array . isArray ( projectStatus ) && projectStatus . map (...) But that only hides the real problem . The actual bug isn’t: “ .map() crashed” The real bug i