SatchelJS Store Inspector

A read-only Chrome DevTools extension for inspecting the complete SatchelJS root store as an expandable tree.

Features

• Discovers globalThis.__satchelGlobalContext.rootStore in the inspected page.
• Displays every root-level store and nested property with type-aware previews.
• Filters root-store names with exact matches first, followed by prefix and substring matches, while bolding the matched text.
• Truncates string previews after 200 characters while preserving the complete value and length in the details pane.
• Supports objects, arrays, MobX/ES maps, sets, dates, regular expressions, functions, and circular references.
• Searches keys, values, types, and complete property paths directly in the live page, independently of the displayed snapshot limit.
• Skips traversal into DOM elements and Window objects during search by default, with an option to include their properties.
• Keeps the store tree visible while search results, value details, and value breakpoints appear in separate collapsible right-side sections.
• Navigates between matches and automatically expands their ancestors.
• Refreshes manually or automatically at a selectable interval.
• Restores the selected path after refresh, falling back to the nearest surviving parent when part of the path was removed.
• Expands and selects any detailed or searched value in the left store tree using the Expand to here action.
• Shows a formatted value view for the selected node.
• Provides copyable JavaScript for retrieving the selected value from globalThis.__satchelGlobalContext.rootStore.
• Copies the complete value displayed in the details pane.
• Edits primitive leaf values (string, finite number, boolean, null, and undefined).
• Deletes selected map entries and array items after confirmation.
• Installs exact assignment breakpoints on configurable object properties and array items by wrapping and later restoring their property descriptors.
• Marks breakpoint nodes with a red dot and lists every active breakpoint for one-click tree navigation.

Load the extension

1. Open chrome://extensions.
2. Enable Developer mode.
3. Select Load unpacked and choose this directory.
4. Open DevTools on a page using SatchelJS.
5. Select the SatchelJS panel.

After changing extension files, select Reload on chrome://extensions, then close and reopen DevTools.

Architecture

The DevTools panel calls chrome.devtools.inspectedWindow.eval in the inspected page's main JavaScript world. It initially transfers only the root-level store descriptors, then loads each node's direct children when that node is expanded. This avoids Chrome DevTools protocol payload limits while keeping the complete graph accessible.

There is no node or depth limit. Data is transferred one expanded level at a time, so large applications do not need to serialize the complete store graph in one message.

Automatic refresh is disabled by default because refreshing replaces the current lazy tree. Enable it when continuously watching root-level store changes; use manual refresh while exploring deeply nested values.

Search runs separately against the complete live store graph with breadth-first traversal and no node, time, or result limit.

Value breakpoint limitations

Value breakpoints pause inside an injected setter with the original assignment caller still on the JavaScript stack. They require a configurable own property descriptor. Non-configurable MobX properties, map entries, set entries, mutations inside an existing object, Object.defineProperty replacement, and changes that bypass the setter cannot be intercepted this way. Removing a breakpoint restores its original descriptor and preserves the latest assigned value.