Skip to main content
  1. All Posts/

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>