urql-devtools - GitLite

KO | EN

gitlite — search

#javascript #python #llm #go #rust #deep-learning #docker #macos #windows #awesome #kubernetes #vue #pytorch #ios

urql-devtools

(★ 273)

A tool for monitoring and debugging urql during development

File Explorer

Download Latest Version (.zip)

- config.json
- README.md
- - bug_report_extension.md
  - bug_report_standalone.md
  - feature_request.md
- - ci.yml
  - release.yml
- preview.gif
- changelog.js
- cli.js
- cosmos-add-badge.js
- postinstall.js
- - icon-128.png
  - icon-16.png
  - icon-256.png
  - icon-32.png
  - icon-48.png
  - icon-512.png
  - icon-64.png
  - icon-disabled-128.png
  - icon-disabled-256.png
  - icon-disabled-32.png
  - icon-disabled-512.png
  - icon-disabled-64.png
  - icon.svg
- - main.ts
- - background.ts
  - content_script.ts
  - devtools.html
  - devtools.ts
  - manifest.json
- - App.css
  - App.test.tsx
  - App.tsx
  - cosmos.decorator.tsx
  - definitions.d.ts
  - panel.html
  - panel.tsx
  - prism.ts
  - styled.d.ts
  - theme.ts
- - connections.ts
  - index.ts
- - debug.ts
  - EventTarget.ts
  - index.ts
- setupTests.ts
- webpack.electron.config.js
- webpack.extension.config.js
.env
.eslintignore
.eslintrc
.gitignore
.npmignore
.nvmrc
.prettierignore
babel.config.js
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
cosmos.config.json
cosmos.override.js
DEVELOPMENT.md
jest.config.js
LICENSE
package.json
pnpm-lock.yaml
README.md
tsconfig.json

// 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>

<br />
<br />

<div align="center">
  <img width="500" src="https://raw.githubusercontent.com/urql-graphql/urql-devtools/ed4391cefc94bb0394e00cf4e405838ddc8e854d/assets/preview.gif" />
</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).