Browser DevTools Network Tab
The Network tab in browser DevTools is your first tool for JSON debugging. Filter by XHR/Fetch, click any request, and view the Response tab to see the raw JSON returned. Use the Preview tab to see it parsed. Right-click any request to copy it as a fetch() call for testing.
Identifying Parse Errors
A JSON parse error means the response body isn't valid JSON. Common causes: the API returned an HTML error page instead of a JSON error response, a proxy added headers to the response body, or the server has a bug producing malformed JSON.
Logging JSON Safely
console.log(JSON.stringify(obj, null, 2)) is invaluable for printing structured JSON to the console during development. Be careful not to log sensitive fields in production. Consider a logging utility that redacts specified fields or limits object depth.
Schema Validation at API Boundaries
The most robust debugging approach is validating JSON shape at API boundaries using runtime validation. When your application receives JSON from an API, validate it against your expected schema immediately. This surfaces problems as clear errors rather than mysterious rendering issues later.
Systematic JSON debugging starts with the Network tab, moves to parse error analysis, and culminates with schema validation at boundaries. Boundary validation catches most JSON issues before they become user-visible bugs.