# AdapTable DevTools

Canonical page: https://www.adaptabletools.com/docs/dev-guide-support-devtools

- Chrome extension for inspecting and managing live AdapTable instances
- Install from the Chrome Web Store, then open the **AdapTable** tab in Chrome DevTools
- Four sections: Grid Info, State, Theme Builder and DevTools Debug Info
- The same instance data is available without the extension via the [in-page API](https://www.adaptabletools.com/docs/dev-guide-support-devtools-api/index.md)

AdapTable DevTools is a Chrome Developer Tools extension.

- DevTools is designed for **developers and support teams**, not for end users
- It sits outside the runtime Settings Panel and does not require a code change or extra licence key

AdapTable DevTools allows you to examine and update a running AdapTable instance — State, logs, theme and DevTools internals — without writing diagnostic code.

Scripts, tests and AI coding agents can read a live Grid without the extension. See the [DevTools in-page API](https://www.adaptabletools.com/docs/dev-guide-support-devtools-api/index.md).

### Installing DevTools

Add [AdapTable DevTools](https://chromewebstore.google.com/detail/adaptable-devtools/lfdcfjfpkjnhkfednbefomhhgohnhong) from the Chrome Web Store

Open any page that is running AdapTable

Open Chrome DevTools and choose the **AdapTable** tab

The header shows the selected `adaptableId`.

- When the page has one Grid, the adapableId is shown as text
- If it has more than one, the first one detected is selected; choose different one from the **Select Instance** dropdown

## Sections

DevTools has four sections:

| Section                                  | What it does                                                                                                      |
| ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **Grid Info**                            | Versions, the current Layout, a read-only column inspector, and logs for the selected Grid                        |
| **State**                                | Snapshots of [Adaptable State](https://www.adaptabletools.com/docs/dev-guide-adaptable-state/index.md): manage, compare and migrate |
| **Theme Builder**                        | Edit theme CSS variables on the selected Grid and export the CSS                                                  |
| **DevTools Debug Info** | Inspect the DevTools store and the theme variables discovered on the page                                         |

Grid Info, State and Theme Builder all use the currently selected AdapTable instance.

If there is more than one instance available and none is selected, it shows “No AdapTable instance detected”

There is also an **Open Grid Settings for…** in the header.

This opens the runtime [Settings Panel](https://www.adaptabletools.com/docs/ui-settings-panel/index.md) for a chosen module.

### Grid Info

Contains 4 tabs providing read-only information about the current AdapTable instance:

- **General** — Adaptable ID, AdapTable and AG Grid versions, license key, user name and primary key, with version-mismatch and outdated-release warnings
- **Layout** — current Layout (name, and Table or Pivot), sorts, column filters, Grid Filter, row & column counts
- **Column** — pick a column and read its summary info, plus details of all objects scoped to it (Format Column, Alert, Styled Column, Calculated Column etc.)
- **Logs** — AdapTable and Layout Manager messages for the instance; filter, sort, show timestamps, clear

### State

Contains 3 tabs that allows you to handle the [Adaptable State](https://www.adaptabletools.com/docs/dev-guide-adaptable-state/index.md) connected to the instance:

- **Manage** — displays a list of [Adaptable State](https://www.adaptabletools.com/docs/dev-guide-adaptable-state/index.md) snapshots taken as the Grid changes. You can:
  - Tag a snapshot
  - Upload or download its JSON
  - Restore it onto the live instance
  - Clear the history (or clear everything except tagged snapshots)
- **Compare** — pick two snapshots and see what differs
- **Migrate** — send the current persistent State to the [State Migration Tool](https://www.adaptabletools.com/docs/dev-guide-adaptable-state-migration-tool/index.md) and restore the migrated State onto the live instance

### Theme Builder

This section allows you to edit [AdapTable CSS variables](https://www.adaptabletools.com/docs/handbook-theming-custom/index.md) on the selected Adaptable instance.

You can set Colors, Radius, Spacing and Typography.

- Each AdapTable instance keeps its own edits
- Switching to another Grid leaves that Grid unchanged

Additionaly you can save a theme, import CSS, or show the CSS and add it to the application.

See [Customising AdapTable Themes](https://www.adaptabletools.com/docs/handbook-theming-custom/index.md) for how those values are applied in code

### DevTools Debug Info

Inspect what DevTools itself is holding:

- the DevTools store (serialisable UI state)
- the theme CSS variables discovered on the inspected page, with current values

Use this when you need to see why a theme or panel is not behaving as expected.