React Devtools is a popular and common utility for developing apps, and is now available for Airtable developers to use when building Custom Apps. This article will detail how to open React Devtools and start using them in your development process.
How to access devtools
Devtools can be accessed from an open custom app in your apps dashboard. Start by opening your custom app and locating the bottom toolbar. Both the “Components” and “Profiler” tabs are part of React Devtools.
There are two primary ways that developers can use these devtools which are covered in more detail below.
Inspecting the running application
Using the components tab allows you to:
- See “props” or “state” and the heirarchy of react components that are currently rendered
- Edit props or state to see changes in real time
- Inspect which React components correspond to which elements in the UI
Profiling performance of the application
By using the “Profiler” tab, you can inspect the performance of your custom app. This will give you critical information such as why components re-render, and how much time is spent re-rendering any given component. This allows you to see why an application might feel slow and determine how to fix it.
For more information please see the blog post from Facebook introducing the React Devtools Profiler.
Can I use my web browser extension instead of React Devtools?
Unfortunately the React Devtools web browser extension can’t currently target iframes and therefore aren’t currently compatible with Custom Apps.
Is there support for the standalone version of React Devtools?
This would require always opening a local network request from Airtable (and causes conflicts if you have multiple development sessions open at the same time). Custom userscripts (e.g. Tampermonkey) can be used to get such a solution working - but isn’t supported by Airtable.