{"id":41130,"library":"friendly-mobx-console-formatter","title":"Friendly MobX Console Formatter","description":"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.","status":"active","version":"0.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/zheeeng/friendly-mobx-console-formatter","tags":["javascript","mobx","mobx formatter","console formatter","debugger formatter","custom formatter","chrome","firefox","edge","typescript"],"install":[{"cmd":"npm install friendly-mobx-console-formatter","lang":"bash","label":"npm"},{"cmd":"yarn add friendly-mobx-console-formatter","lang":"bash","label":"yarn"},{"cmd":"pnpm add friendly-mobx-console-formatter","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to format MobX observable objects.","package":"mobx","optional":false}],"imports":[{"note":"Package exports a default function that must be called to activate the formatter.","wrong":"import { install } from 'friendly-mobx-console-formatter'","symbol":"default","correct":"import install from 'friendly-mobx-console-formatter'"},{"note":"CommonJS require returns the default export as a single function, not an object.","wrong":"const { install } = require('friendly-mobx-console-formatter')","symbol":"install","correct":"const install = require('friendly-mobx-console-formatter')"},{"note":"TypeScript type export for type-checking formatted output. Only available when using TypeScript.","wrong":"","symbol":"FormattedMobX","correct":"import type { FormattedMobX } from 'friendly-mobx-console-formatter'"}],"quickstart":{"code":"import install from 'friendly-mobx-console-formatter';\nimport { observable, autorun } from 'mobx';\n\n// Activate the custom formatter (call once)\ninstall();\n\n// Create a MobX observable\nconst store = observable({\n  count: 0,\n  todos: []\n});\n\n// Observe changes\nautorun(() => {\n  console.log('Store:', store);\n  // In DevTools with custom formatters enabled, store appears as:\n  // Object { count: 0, todos: [] } with MobX-specific hints\n});\n\n// Modify the store\nstore.count = 1;\nstore.todos.push({ id: 1, text: 'Learn MobX' });\n\n// The formatter updates automatically on re-log","lang":"typescript","description":"Shows how to install and use Friendly MobX Console Formatter with a MobX store, highlighting the formatted console output."},"warnings":[{"fix":"In Chrome/Edge DevTools, go to Settings → Console → Enable custom formatters. In Firefox, toggle 'Enable custom formatters' in DevTools options.","message":"Custom object formatters must be enabled in browser DevTools before the formatter works.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Upgrade to MobX v6.x for long-term support and security updates.","message":"MobX v4 and v5 are no longer maintained and may have compatibility issues with newer browser APIs.","severity":"deprecated","affected_versions":">=0.0.1"},{"fix":"This package is intended for browser DevTools only. For Node.js debugging, use mobx-devtools-mst or similar packages.","message":"Formatters are browser-specific and may not work in Node.js or non-browser environments.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"Call install() once at application entry point before any MobX observables are logged.","message":"The formatter only works after install() is called; it does not auto-activate on import.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"search_vec":"'0.0.2':25 '2024':28 '4.0.0':33 '5.0.0':34 '6.0.0':35 'action':61 'api':44 'browser':6 'bundl':72 'chrome':37,84 'clean':18 'comput':59 'consol':3,23,78 'custom':8,42,82 'debugg':80 'decemb':27 'depend':30 'devtool':7 'differenti':45 'earli':67 'early-stag':66 'edg':38,86 'field':62 'firefox':40,85 'flatten':55 'formatt':4,10,43,49,77,79,81,83 'friend':1 'generic':47 'intern':54 'javascript':74 'label':57 'low':71 'mobx':2,13,32,53,75,76 'object':9,15,48 'observ':14,58 'packag':69 'peer':29 'readabl':19 'releas':26 'render':12 'ship':63 'size':73 'specif':51 'stage':68 'support':36 'target':52 'type':65 'typescript':64,87 'version':24 'via':41 'way':20","created_at":"2026-06-04T18:50:55.082244+00:00","updated_at":"2026-06-04T18:50:55.082244+00:00","problems":[{"fix":"Run 'npm install friendly-mobx-console-formatter mobx' and ensure both are in package.json.","cause":"Package not installed or peer dependency MobX missing.","error":"Error: No provider for \"friendly-mobx-console-formatter\""},{"fix":"Use 'import install from \"friendly-mobx-console-formatter\"' (ESM) or 'const install = require(\"friendly-mobx-console-formatter\")' (CJS).","cause":"Incorrect import syntax, e.g., named import instead of default import.","error":"TypeError: install is not a function"},{"fix":"Enable custom formatters in DevTools settings and ensure install() is invoked once before logging MobX objects.","cause":"Custom formatters not enabled in DevTools, or install() not called.","error":"Objects are not formatted in console"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/zheeeng/friendly-mobx-console-formatter#readme","github":"https://github.com/zheeeng/friendly-mobx-console-formatter","docs":null,"changelog":null,"pypi":null,"npm":"friendly-mobx-console-formatter","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}