React Devtools for custom extensions
  • 06 Jul 2022
  • 1 Minute to read
  • Dark
    Light

React Devtools for custom extensions

  • Dark
    Light

React Devtools is a popular and common utility for developing apps, and is now available for Airtable developers to use when building Custom extensions. 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 extension in your extensions dashboard. Start by opening your custom extension and locating the bottom toolbar. Both the “Components” and “Profiler” tabs are part of React Devtools.

1500001460061devtools.png

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 extension. 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.

FAQs

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 extensions.

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.


Was this article helpful?