Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
JSON.stringify is not a lossless view of JavaScript data: it can omit object properties, turn some array entries into null, or throw an error. Official React DevTools adds a separate inspection layer, requesting props and state when you select a component and loading some nested data only when you expand it. A value that seems missing may therefore be absent from a JSON snapshot, not yet loaded in the inspector, or presented differently by a particular panel.
What JSON.stringify omits, changes, or cannot serialize
JSON supports a narrower set of values and relationships than JavaScript. The result of JSON.stringify is a JSON representation, not a complete inventory of an arbitrary JavaScript value.
- Object properties: Properties whose values are
undefined, a function, or a symbol are omitted. - Array entries: Those same unsupported values become
null, keeping their positions in the array. - Circular references: A cycle causes a
TypeError; JSON has no built-in notation for a reference that points back into the structure. - BigInt: Serializing a
BigIntcauses aTypeErrorunless the application changes how it is serialized. - Custom serialization: A value’s
toJSON()method or a replacer function can alter the output.
These behaviors describe serialization. They do not mean React removed a value from component props or state. See MDN’s JSON.stringify() reference for the method’s serialization rules.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesHow official React DevTools inspects props and state
React DevTools does not include all props and state in every component-tree update. Its repository overview describes tree updates carrying metadata such as element type, IDs, parent and owner IDs, name, and key. After you select a component, DevTools requests its props and state separately. The overview explains that these values can be expensive to serialize and change frequently, so sending them with every tree update would add load to the bridge. See the React DevTools overview.
#1 Best Overall
Nested values may load when expanded
For deeply nested props or state, the overview says DevTools can initially send a shallow, “dehydrated” representation, then fill in missing data as you expand objects or arrays. If a nested value is not visible, expand its path before concluding it is absent.
Inspection is not necessarily an instantaneous snapshot
The same overview describes selected-element information being polled for updates about once a second. That is an implementation detail documented by the repository overview, not a guarantee for every React version or every debug panel.
Rank #2
React’s documentation describes React Developer Tools as a way to inspect components, edit props and state, and investigate performance. It documents browser extensions and a standalone react-devtools package for other environments: React Developer Tools.
Free tools Windows power users keep installed
One-click scans. No signup required.
Work out why a value appears to be missing
- Inspect the live value first. Use the debugger to check the JavaScript value itself before assuming React discarded it.
- Check whether you are looking at JSON. Look for
undefined, functions, symbols,BigInt, circular references, a customtoJSON()method, or a replacer. - In React DevTools, select the component and expand nested properties. Deep data may be loaded on demand.
- Compare equivalent views. A JSON string is a serialization snapshot; a component inspector presents structured data and may load it incrementally.
- For a custom debug panel, inspect its own code. Its serializer and renderer determine what is shown; official React DevTools documentation does not establish how every third-party panel behaves.
What the display can and cannot tell you
A JSON snapshot answers, “What JSON representation did this value produce?” A component inspector answers a different question: “What data is this tool showing for the selected component, and has it loaded the part I am examining?” Neither view alone establishes that a value was removed from application state. Verify the value at runtime, then account for the serialization and inspection behavior between that value and the display.
The JavaScript serialization rules and official DevTools’ inspection approach are documented by the sources above. The title does not identify a specific third-party panel or version, so its behavior cannot be inferred from React DevTools documentation.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
