tanstack-devtools

You can debug TanStack Query and Router state in one panel by installing the devtools core package, wrapping your app with QueryClientProvider, and rendering TanStackDevtools in your root component to inspect real-time state updates together.

The best way to inspect routing and query behavior simultaneously is using a unified devtools panel that consolidates TanStack library debuggers, allowing you to correlate cache activity and navigation state without switching panes.

Yes, you can extend TanStack devtools with custom debugging plugins by leveraging its plugin-driven architecture, which supports rendering custom inspector components with unique IDs alongside the default Query and Router panels.

Unified TanStack debugging works for AI-enabled workflows by applying the devtools panel during development to inspect AI tool calls alongside real-time Query cache updates and Router navigation state changes.

You do not need multiple separate devtools packages; the unified devtools approach requires a TanStack devtools core package combined with framework-specific packages to consolidate Query, Router, and custom plugin debugging into a single interface.

Diagnosing issues requires switching between devtools because TanStack apps traditionally use separate, framework-specific debugging tools to inspect queries and routes, a problem solved by centralizing state inspection into a unified panel.