AdapTable DevTools
Summary
- 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
AdapTable DevTools is a Chrome Developer Tools extension.
Important
- 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.
Note
Scripts, tests and AI coding agents can read a live Grid without the extension. See the DevTools in-page API.
Developer Guide
Installing DevTools
Add AdapTable DevTools 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.
Note
- 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: 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.
Hint
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 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 connected to the instance:
- Manage — displays a list of Adaptable State 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 and restore the migrated State onto the live instance
Theme Builder
This section allows you to edit AdapTable CSS variables on the selected Adaptable instance.
You can set Colors, Radius, Spacing and Typography.
Note
- 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.
Find Out More
See Customising AdapTable Themes 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.