KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

urql-devtools

★ 273 Open GitHub ↗

A tool for monitoring and debugging urql during development

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <img alt="logo" src="https://raw.githubusercontent.com/urql-graphql/urql-devtools/master/src/assets/icon.svg?sanitize=true" />
  <h1>Urql Devtools</h1>
  <p>The official browser extension for Urql</p>
  <a href="https://chrome.google.com/webstore/detail/urql-devtools/mcfphkbpmkbeofnkjehahlmidmceblmm">
    <img alt="Chrome Web Store" src="https://badgen.net/chrome-web-store/v/mcfphkbpmkbeofnkjehahlmidmceblmm?color=fbbc07" />
  </a>
  <a href="https://addons.mozilla.org/en-GB/firefox/addon/urql-devtools/">
    <img alt="Firefox Addon" src="https://badgen.net/amo/v/urql-devtools?color=ff7821" />
  </a>
  <a href="https://urql-devtools.netlify.com/">
    <img alt="Fixtures" src="https://badgen.net/badge/fixtures/netlify/cyan" />
  </a>
  <a href="https://github.com/urql-graphql/urql-devtools/blob/master/LICENSE">
    <img alt="Licence MIT" src="https://badgen.net/github/license/urql-graphql/urql-devtools" />
  </a>
</div>

## Features

### 📬 Event timeline

See all debugging and network events in real time.

### 🗂 Cache explorer

Explore your cache and see when cached data is being used.

### 🚀 Request tool

Explore your backend schema and trigger queries directly via your running Urql client.

## Usage

### Add the urql exchange

Follow the instructions to [install and setup the devtools exchange](https://github.com/urql-graphql/urql-devtools-exchange#usage)

### 🌐 Browser

Install the extension for your browser of choice

- [Chrome extension](https://chrome.google.com/webstore/detail/urql-devtools/mcfphkbpmkbeofnkjehahlmidmceblmm)
- [Firefox addon](https://addons.mozilla.org/en-GB/firefox/addon/urql-devtools)

Open the [devtools panel](https://developers.google.com/web/tools/chrome-devtools/open) in your browser and click on the _Urql_ tab

### 📱 React Native

Start the electron app from a dedicated shell

```sh
npx urql-devtools
```

> **Note:** Android users may need to forward port 7700 from their device to their local machine:
>
> ```sh
> adb reverse tcp:7700 tcp:7700
> ```

## Integrations

Visit the [debugging docs](https://formidable.com/open-source/urql/docs/advanced/debugging/#adding-your-own-debug-events) to find out how to integrate your self-made exchanges with our devtools.

## Contributing

Have experience working with devtools extensions or want to get involved? Check out our [contributing](./CONTRIBUTING.md) docs to get started, information on setting up the project can be found [here](https://github.com/urql-graphql/urql-devtools/blob/master/DEVELOPMENT.md).

urql-devtools

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README