docs.v1.1.0

Everything the panel
knows about your app.
Written down.

Install paths, every panel section, the console globals and the read-only Agent API that lets an assistant read the resolved CSS cascade of a running Mendix app. Mendix 10 & 11 React client, Chrome · Edge · Firefox 128+.

Features.

One dockable panel with a footer row of pickers. Everything reads from the client-side React Fiber tree.

DATA INSPECTOR
Every entity, object, attribute

Four sections (Page Parameters, Context Objects, On Page, Other Cached) with search across everything. Hover an entity row and its containers pulse on the page; click an attribute to copy the value. Dirty and new badges per object, system members shown separately.

Only what you exposeIt shows what the Mendix runtime sent to your session, nothing more. Attributes your role has no read access to never reach the browser, so they never show here. Log in as a role and open your pages to check what that role can read. It covers the pages you open, so it adds to a security review rather than replacing one.
auto-refresh on SPA navigation
PERFORMANCE
Real first-load timings

A document-start tracker captures Load, DOM nodes, request count, JS heap, FCP, LCP, TTFB and CLS, colour-coded against industry thresholds with a tooltip per metric explaining what to aim for.

per-navigation buckets
DATA SOURCES (LIVE)
Every /xas/ call this page made

Deduped by operationId on Mendix 10 or microflow name on classic. Repeat calls are flagged ×2+ as likely nested data sources, with inferred shape and average duration. Refreshes every five seconds without redrawing the panel.

list ×50 sorted filtered · 84ms avg
SECURITY SCAN
What the browser can reach

CVE check against the detected runtime version, secret detection across Mendix Constants (JWT, AWS, GitHub, Slack, Stripe, Google, OpenAI/Anthropic, PEM, connection strings) with an entropy fallback, demo users, anonymous session, dev-mode indicators and writable sensitive entities.

values redacted · reveal per row
STYLE INSPECTOR
One picker for type and box

Hover any element for its tag, Mendix and custom class chips, full typography and CSS box in a single tooltip. Margin and padding are painted on the page: orange for margin, green for padding.

Esc leaves picker mode
HEALTH SCORE & A11Y
One number, ranked insights

A 0–100 score weighted across performance, accessibility, security and nesting, with exact deductions. Page-wide audits cover WCAG level and failures, ARIA, landmarks, skip links and touch-target sizes, plus typography and CSS analysis.

PDF export of the full report

Installation.

Chrome Web Store and Firefox Add-ons: live Chrome, Edge and other Chromium browsers install MxInspector from the Chrome Web Store, Firefox from Firefox Add-ons. Both builds come out of the same source tree and are functionally identical.

Chromium: Chrome, Edge, Brave, Opera, Vivaldi, Arc
~1 min

Add to ChromeFrom the Chrome Web Store. Edge asks once to allow extensions from other stores. Prefer the zip? Load it unpacked:

01Download mendix-inspector-v1.1.0-chromium.zip and unzip it to a local folder.
02Open chrome://extensions (or edge://extensions).
03Enable Developer mode, click Load unpacked and select the folder.
Firefox 128+
~1 min

Add to FirefoxFrom Firefox Add-ons, signed by Mozilla. Prefer the zip? Firefox only installs an unsigned extension permanently in Developer Edition, so there are two ways to load it:

A · Temporary add-on

Works in any Firefox 128+. Open about:debugging → This Firefox → Load Temporary Add-on and pick manifest.json from the unzipped Firefox zip. Unloads when Firefox closes.

B · Developer Edition

Permanent. In Developer Edition, Nightly or ESR set xpinstall.signatures.required to false in about:config, then install the Firefox zip itself from about:addons.

Downloads · v1.1.0

Permissions.

What the browser asks you to allow, and why. None of it sends data anywhere: everything MxInspector reads stays in your tab.

Access to all sitesA Mendix app can run on any domain, your own included, so the extension cannot list them in advance. A small timing script starts on every page, so requests are measured from the very first one. On a page without Mendix markup the scripts stay idle: no request is wrapped and nothing is read.
activeTabLets the panel open on the tab where you click the icon, and only there.
scriptingLoads the panel into that tab when you click the icon. The panel and the Agent API do not exist on a page until you do.
storageRemembers three settings in your own browser: theme, material, and whether the Agent API is switched on.
NetworkMxInspector makes no requests of its own. The one exception is the doc-endpoint probe in Security, which sends up to four HEAD requests to your own app when you click its button.

The full policy is on the privacy page.

Usage.

Click the toolbar icon on any Mendix app. The panel slides in from the right. Drag the header to reposition, double-click it to minimise.

Footer buttons & shortcuts
Dataopen the Data Inspector
Styleelement-picker mode
PDFexport the full report
Escleave any picker mode
Double-click headerminimise / restore
// console globals
window.__MxDataExtractor
window.__MxDataPanel.open()
window.__mxiPerf.getSummary()
window.__MxSecurity.detect()
window.__mxInspectorRun()
// scan the page for containers
__MxDataExtractor.scanAllDataContainers()

Agent API.

window.__mxiAgent is a read-only, JSON-serialisable view of the page aimed at AI coding assistants. getComputedStyle() tells you a padding is 24px; it never tells you which rule, file and token produced it.

The module rebuilds the cascade from document.styleSheets, so every declaration comes back with its origin. It is only injected on the icon click, so it does not exist on pages where you never opened the panel.

Call
Returns
guide()
The reasoning rules, shipped with the extension so an assistant can ask the API how to use itself
probe()
Environment: Mendix presence, widget and DOM counts, stylesheets and whether any are CORS-blocked, loaded modules
styles(target, opts)
Full cascade for one element: winning declaration per property with selector, source file and specificity, plus what it beat
capture(target, opts)
Subtree snapshot: each node with its mx-name, CSS path, viewport box and only the styles that differ from UA defaults
vars(target, filter)
Every CSS custom property resolving in that element's context; defaults to :root
widgets()
Data containers, entities and page parameters, delegated to the data extractor
annotate([targets])
Draws labelled outlines so a screenshot can be matched to the refs capture() returned
// ask for two properties
__mxiAgent.styles('myNavItem', {
  props: ['color', 'padding']
})
// hover rules are invisible to a
// normal cascade read, so ask for them
__mxiAgent.styles('myListRow', {
  states: [':hover']
})
"color": {
  "computed": "rgb(148, 152, 158)",
  "declared": {
    "value": "var(--text-muted)",
    "selector": ".app-sidebar .nav-item",
    "source": "/theme.compiled.css",
    "specificity": "0-2-0"
  },
  "resolvesVar": { "name": "--text-muted" },
  "overridden": []
}
resolvesVar

Reports the defining rule, not just the value. Tokens defined in terms of other tokens are followed through a via chain.

viaShorthand

A shorthand holding a var() cannot expand at parse time, so the longhand falls back and says which shorthand it came from.

overridden

Empty means nothing declared it: add a rule. Non-empty means a real competitor won on specificity. Opposite fixes.

Use it with your assistant

01Open MxInspector on the page you want help with.
02Click the AGENT badge in the panel header and switch the API on.
03Press Copy prompt in the same menu and paste it into an assistant that can run JavaScript in your tab: Claude Code with browser access, a DevTools MCP server, or Playwright.
THEN ASK, FOR EXAMPLE
Why is the Save button 24px wider than Cancel? Find the rule and write an override that wins.
Which rule sets the colour of the page title, and in which file does it live?
The rows in the orders grid turn grey on hover. Find that rule and make it light blue in our theme.
Which design tokens does the sidebar use, and which of them does our theme override?

Keep each question to one widget. The API answers per element and never dumps the whole page, which keeps answers fast and small.

Visible and switchable

The panel header carries an AGENT badge whenever the module is loaded: green when armed, grey when off, pulsing briefly on each call. It starts switched off; switch it on from the badge and the choice is remembered. Click it for the last ten calls with method, target, payload size and duration. Switching off disarms every method and stays off on the next page; probe() deliberately keeps answering so an agent discovers the state instead of silently receiving nothing.

Known limitations.

It reads a client that wasn't built to be read. The honest list:

Mendix 10 & 11 ReactTested there. DataGrid2 highlighting is handled, including the display:contents geometry pass.
Dojo client (7–9)Fallback paths still exist but aren't recently exercised. Expect rough edges.
Microflow namesMendix 10 sends opaque runtime operation IDs; Data Sources shows the hash plus inferred shape instead.
Cascade originAuthor stylesheets only. Cross-origin CSS can't be read at all; probe() reports the blocked count. @layer names are recorded but not yet weighted.
Doc-endpoint probeFires up to four HEAD requests at your own app, gated behind an explicit button so nothing goes out automatically.

What's next.

Live attribute editing, a client state viewer and a translation check are planned, with more ideas being explored. Requests from Mendix developers decide the order.

See the roadmap →Request a feature →

PolyForm Shield 1.0.0

Free to use for any purpose, including commercially. The one thing it doesn't allow is using the software to build a product that competes with it.

Back to the overview Read the full license →

Credits.

MxInspector stands on good type and good icons. Thank you to the people who made them. The same typefaces run this site and the extension panel.

Familjen GroteskTypeface by Familjen STHLM. Headings and text, on this site and in the panel. SIL Open Font License 1.1.
Source · Google Fonts · Licence
IBM Plex MonoTypeface by IBM, designed by Mike Abbink with Bold Monday. Code, numbers and labels, on this site and in the panel. We ship IBM's own unmodified files. SIL Open Font License 1.1, Reserved Font Name "Plex".
Source · Licence
Phosphor IconsIcon family by Helena Zhang and Tobias Fried. Part of the icons in the extension panel. MIT License.
phosphoricons.com · Licence
Browser logosFrom browser-logos by Cătălin Mariș, MIT License. Chrome, Edge and Firefox and their logos are trademarks of Google, Microsoft and Mozilla.

The extension package carries every licence in full: THIRD-PARTY-NOTICES.txt and the licence files in fonts/.