urql-devtools
Tools
TypeScript
Urql Devtools
The official browser extension for Urql
<p>
</a><br /> <a rel="nofollow noopener" target="_blank" href="https://urql-devtools.netlify.com/"></p>
<p>
</a><br /> <a rel="nofollow noopener" target="_blank" href="https://spectrum.chat/urql"></p>
<p>
</a>
</p>
<p>
<a rel="nofollow noopener" target="_blank" href="https://raw.githubusercontent.com/FormidableLabs/urql-devtools/ed4391cefc94bb0394e00cf4e405838ddc8e854d/assets/preview.gif"></a>
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-features" class="anchor" aria-hidden="true" href="#features"></a>Features
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content--event-timeline" class="anchor" aria-hidden="true" href="#-event-timeline"></a>📬 Event timeline
</h3>
<p>
See all debugging and network events in real time.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content--cache-explorer" class="anchor" aria-hidden="true" href="#-cache-explorer"></a>🗂 Cache explorer
</h3>
<p>
Explore your cache and see when cached data is being used.
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content--request-tool" class="anchor" aria-hidden="true" href="#-request-tool"></a>🚀 Request tool
</h3>
<p>
Explore your backend schema and trigger queries directly via your running Urql client.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-usage" class="anchor" aria-hidden="true" href="#usage"></a>Usage
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-add-the-urql-exchange" class="anchor" aria-hidden="true" href="#add-the-urql-exchange"></a>Add the urql exchange
</h3>
<p>
Follow the instructions to install and setup the devtools exchange
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content--browser" class="anchor" aria-hidden="true" href="#-browser"></a>🌐 Browser
</h3>
<p>
Install the extension for your browser of choice
</p>
<ul dir="auto">
<li>
<a rel="nofollow noopener" target="_blank" href="https://chrome.google.com/webstore/detail/urql-devtools/mcfphkbpmkbeofnkjehahlmidmceblmm">Chrome extension</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://addons.mozilla.org/en-GB/firefox/addon/urql-devtools">Firefox addon</a>
</li>
</ul>
<p>
Open the <a rel="nofollow noopener" target="_blank" href="https://developers.google.com/web/tools/chrome-devtools/open">devtools panel</a> in your browser and click on the Urql tab
</p>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content--react-native" class="anchor" aria-hidden="true" href="#-react-native"></a>📱 React Native
</h3>
<p>
Start the electron app from a dedicated shell
</p>
<pre>npx urql-devtools</pre>
<blockquote>
<p>
<strong>Note:</strong> Android users may need to forward port 7700 from their device to their local machine:
</p>
<pre>adb reverse tcp:7700 tcp:7700</pre>
</blockquote>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-integrations" class="anchor" aria-hidden="true" href="#integrations"></a>Integrations
</h2>
<p>
Visit the <a rel="nofollow noopener" target="_blank" href="https://formidable.com/open-source/urql/docs/advanced/debugging/#adding-your-own-debug-events">debugging docs</a> to find out how to integrate your self-made exchanges with our devtools.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-contributing" class="anchor" aria-hidden="true" href="#contributing"></a>Contributing
</h2>
<p>
Have experience working with devtools extensions or want to get involved? Check out our contributing docs to get started, information on setting up the project can be found here.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-maintenance-status" class="anchor" aria-hidden="true" href="#maintenance-status"></a>Maintenance Status
</h2>
<p>
<strong>Active:</strong> Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
</p>