See all debugging and network events in real time.
Explore your cache and see when cached data is being used.
Explore your backend schema and trigger queries directly via your running Urql client.
Install the extension for your browser of choice
Install the devtools exchange
# npm
npm i -D @urql/devtools
# yarn
yarn add -D @urql/devtoolsAdd the exchange to your Urql client
import { createClient, defaultExchanges } from "urql";
import { devtoolsExchange } from "@urql/devtools";
const client = createClient({
url: "http://localhost:3001/graphql",
exchanges: [devtoolsExchange, ...defaultExchanges],
});Have experience working with devtools extensions or want to get involved? Check out our contributing docs to get started.