Registry / testing / friendly-mobx-console-formatter

friendly-mobx-console-formatter

library0.0.2jsnpmunverified

A browser DevTools custom object formatter that renders MobX observable objects in a clean, readable way in the console. Version 0.0.2, released December 2024, peer dependency on MobX ^4.0.0 || ^5.0.0 || ^6.0.0. Supports Chrome, Edge, and Firefox via custom formatter API. Differentiates from generic object formatters by specifically targeting MobX internals, flattening and labeling observable, computed, and action fields. Ships TypeScript types. Early-stage package with low bundle size.

testing

npm install friendly-mobx-console-formatter

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FRIENDLY-MOBX-CONS

friendly-mobx-console-formatter

testingjavascriptv0.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import install from 'friendly-mobx-console-formatter'

✗ import { install } from 'friendly-mobx-console-formatter'

Package exports a default function that must be called to activate the formatter.

install

✓ const install = require('friendly-mobx-console-formatter')

✗ const { install } = require('friendly-mobx-console-formatter')

CommonJS require returns the default export as a single function, not an object.

FormattedMobX

✓ import type { FormattedMobX } from 'friendly-mobx-console-formatter'

TypeScript type export for type-checking formatted output. Only available when using TypeScript.

Shows how to install and use Friendly MobX Console Formatter with a MobX store, highlighting the formatted console output.

import install from 'friendly-mobx-console-formatter'; import { observable, autorun } from 'mobx'; // Activate the custom formatter (call once) install(); // Create a MobX observable const store = observable({ count: 0, todos: [] }); // Observe changes autorun(() => { console.log('Store:', store); // In DevTools with custom formatters enabled, store appears as: // Object { count: 0, todos: [] } with MobX-specific hints }); // Modify the store store.count = 1; store.todos.push({ id: 1, text: 'Learn MobX' }); // The formatter updates automatically on re-log

Debug

Known issues

gotchaCustom object formatters must be enabled in browser DevTools before the formatter works.

fix

In Chrome/Edge DevTools, go to Settings → Console → Enable custom formatters. In Firefox, toggle 'Enable custom formatters' in DevTools options.

affects: >=0.0.1

deprecatedMobX v4 and v5 are no longer maintained and may have compatibility issues with newer browser APIs.

fix

Upgrade to MobX v6.x for long-term support and security updates.

affects: >=0.0.1

gotchaFormatters are browser-specific and may not work in Node.js or non-browser environments.

fix

This package is intended for browser DevTools only. For Node.js debugging, use mobx-devtools-mst or similar packages.

affects: >=0.0.1

gotchaThe formatter only works after install() is called; it does not auto-activate on import.

fix

Call install() once at application entry point before any MobX observables are logged.

affects: >=0.0.1

Errors

Common errors & fixes

Error: No provider for "friendly-mobx-console-formatter"

Package not installed or peer dependency MobX missing.

fix

Run 'npm install friendly-mobx-console-formatter mobx' and ensure both are in package.json.

TypeError: install is not a function

Incorrect import syntax, e.g., named import instead of default import.

fix

Use 'import install from "friendly-mobx-console-formatter"' (ESM) or 'const install = require("friendly-mobx-console-formatter")' (CJS).

Objects are not formatted in console

Custom formatters not enabled in DevTools, or install() not called.

fix

Enable custom formatters in DevTools settings and ensure install() is invoked once before logging MobX objects.

Upgrade

Version history

0.0.2latest on npm

Audit

Dependencies

mobxrequiredPeer dependency required to format MobX observable objects.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/zheeeng/friendly-mobx-console-formatter ↗

packagefriendly-mobx-console-formatter ↗

homepagehttps://github.com/zheeeng/friendly-mobx-console-formatter#readme ↗