Debug React web apps with Buoy
Updated September 2026
Install
Install the core, React Native Web and the tools you want. Browser builds ship in 7.0.41 and later.
npm install @buoy-gg/core @buoy-gg/network @buoy-gg/storage react-native-web
npx --package=@buoy-gg/core buoy loginIn a Vite app, the login command writes VITE_BUOY_KEY to your env file. Import the early hook at the top of your entry file, before React DOM, then mount the host with your tools:
// main.tsx
import '@buoy-gg/core/web/register';
// App.tsx
import { FloatingDevTools } from '@buoy-gg/core/web';
import * as network from '@buoy-gg/network/web';
import * as storage from '@buoy-gg/storage/web';
const modules = { network, storage };
<FloatingDevTools modules={modules} licenseKey={import.meta.env.VITE_BUOY_KEY} />The web quick start walks through each step, and Frameworks covers Next.js, React Router and TanStack Start.
One codebase for native and web
The browser build is the React Native tool code. Panels, stores, filters, actions, snapshots and the sync protocol are shared, and small browser modules handle storage, routing, DOM inspection and performance timing. A fix to a shared tool reaches both platforms, and the docs for each tool are shared too.
Tools with a browser build
Each card lists what changes in the browser. The full setup is on the web installation page.
Network
Captures the page’s fetch and XHR calls, with overrides, conditions, pins and saved requests. Import @buoy-gg/core/web/register first to include the requests made while the page loads. CORS decides which headers and bodies are readable. Workers, other frames and WebSockets are not captured.
@buoy-gg/network/web
Storage
Reads and edits localStorage and sessionStorage. IndexedDB and cookies are separate APIs and are not shown.
@buoy-gg/storage/web
Zustand
Register live stores with watchStores({ name: useStore }). Store actions stay callable after edits and restores.
@buoy-gg/zustand/web
Jotai
Register atoms with watchAtoms(store, { countAtom }), passing the store your app uses.
@buoy-gg/jotai/web
React Query
Mount FloatingDevTools inside your QueryClientProvider. The tool uses that client.
@buoy-gg/react-query/web
Redux
Mount inside your Redux Provider. To let Time Machine restore the store, add buoyDevtoolsEnhancer from @buoy-gg/redux/web to the store’s enhancers.
@buoy-gg/redux/web
Routes
Captures History API and hash navigation. List your paths with registerBrowserRoutes([...]), and connect a router such as React Router or Next.js with registerBrowserRouter.
@buoy-gg/route-events/web
Env
Bundlers replace env values at build time, so pass the public ones explicitly with setRemoteEnv({ ... }).
@buoy-gg/env/web
Console
Captures browser console calls made after the host mounts.
@buoy-gg/console/web
Events Timeline
Collects events from the other registered tools into one timeline.
@buoy-gg/events/web
Sentry
Pass sentryGetClient={Sentry.getClient} from your browser Sentry SDK.
@buoy-gg/sentry/web
Time Machine
Uses the same snapshots and restore as native. Only registered sources take part; Redux needs the enhancer described on the Redux page.
@buoy-gg/time-machine/web
Ask Buoy
Uses the same agent and the actions of the tools you registered.
@buoy-gg/ask-buoy/web
Impersonate
Configure it with createWebTool(createImpersonateTool({ onSearchUsers })) in apps. The header is added to the page’s fetch and XHR calls.
@buoy-gg/impersonate/web
Perf Monitor
Measures frame rate, JS heap where the browser exposes it, and long tasks. CPU, memory and thermal readings are native-only.
@buoy-gg/perf-monitor/web
JS Top
Measures JavaScript callbacks in the page.
@buoy-gg/js-top/web
Highlight Updates
Needs import '@buoy-gg/core/web/register' at the top of your entry file, before React DOM loads.
@buoy-gg/highlight-updates/web
Assets
Sees resources the page loads. For files that haven’t loaded, add the buoyAssets() Vite plugin and call loadBrowserAssetManifest('/buoy-assets.json').
@buoy-gg/assets/web
Image Overlay
Targets elements marked data-testid="image-target:Name", or places a free overlay. Pasting follows browser clipboard permissions.
@buoy-gg/image-overlay/web
Where to use it
Browser limits
Network capture covers the current page's fetch and XHR calls from the moment the early hook loads, so requests made while the page loads are included. Workers, other frames and WebSockets need separate collectors, and CORS decides which headers and bodies are readable. Storage shows localStorage and sessionStorage, not IndexedDB or cookies. CPU, memory and thermal readings are native-only.
Does my web app need React Native?
Does it work with Next.js or React Router?
Is it free?
Will it end up in my production bundle?
Add Buoy to your web app
Start with a Free account, install the web entries and open the floating menu.
npm install @buoy-gg/core react-native-web