Version: Next ๐Ÿšง

Relay DevTools

Installation#

Follow this link and install it from the chrome store.


How to Navigate the Relay DevTools Extension#

You should have a new tab called Relay in your Chrome DevTools. In this tab, you will be able to select between 2 panels: the network panel and the store panel.

Network Panel#

The network panel allows users to view individual requests in an active environment. Users can scroll through these requests, search for the requests and view the details of each request. The details of each request includes the status, the variables, and the responses for the request.

Store Panel#

The store panel allows users to view individual records from the store data in an active environment. Users can scroll through these records, search for the records, and view the details of each request. Users can also copy the the store data in JSON format to the clipboard.The details of each record includes the ID, the typename, and all of the data in the record. If one of the fields in the data is a reference to another record, users can click on the reference, which will take them to that record.


Multiple Environments#

As you switch through the store and network panels, you'll notice that there is also a dropdown menu on the left side of the developer tools. This dropdown allows users to switch between environments. The requests in the network tab and the store data are grouped by environment, so users can easily shuffle between active environments.

Give Feedback#

Look in the top-right corner of the extension panel!


Is this page useful?
Last updated on by Tianyu Yao