![\"Npm](\"https://badge.fury.io/js/mobx-log.svg\"){kind=icon}
\n ![\"NPM](\"http://img.shields.io/npm/dm/mobx-log.svg\")
\n ![\"Tests\"](\"https://github.com/kubk/mobx-log/actions/workflows/main.yml/badge.svg?branch=master\"){kind=icon}
\n\n \n \n \n
\n ![\"mobx-log](\".github/main-prev.png\")
\n
Logger + Redux devtools for MobX
\n\n### Installation\n\n```\nnpm i mobx-log\n```\n\nThere are 3 ways how you can use `mobx-log` in your project:\n\n### Usage with Redux Devtools\n\n1. Make sure [Redux Devtools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) are installed\n2. Add `makeLoggable` to each store you'd like to debug:\n\n```diff\nimport { makeLoggable } from 'mobx-log'\n\nclass SomeStore {\n ...\n\n constructor() {\n makeAutoObservable(this)\n+ makeLoggable(this)\n }\n}\n```\n\nResult:\n\n\n### Usage with browser logger\n\n1. Add `makeLoggable` to a store:\n\n```diff\nclass SomeStore {\n ...\n\n constructor() {\n makeAutoObservable(this)\n+ makeLoggable(this)\n }\n}\n```\n\n2. In Chrome DevTools, press F1 to load the Settings. Scroll down to the Console section and check \"Enable custom formatters\":\n\n\n\nYou'll only need to do it once.\n\nResult:\n\n\n> [!IMPORTANT]\n> If you have Redux devtools installed then you need to deactivate it. The `mobx-log` package tries to detect automatically what you'd like to use - browser console or Redux devtools. Installed Redux devtools take precedence over browser console.\n\n### Use only browser formatters\n\n`mobx-log` uses custom Chrome formatters, so you won't see awkward `[Proxy, Proxy]` in your console anymore. All your `console.log(store)` calls will be nicely formatted. If it is the only feature you need from this package, you can use just formatters:\n\n```typescript\nimport { applyFormatters } from 'mobx-log';\n\napplyFormatters();\n```\n\nMake sure this function is called at the very top of your code\n\n> [!IMPORTANT]\n> Make sure to enable [custom formatters](#usage-with-browser-logger) before using it\n\n> [!NOTE]\n> You don't have to call `applyFormatters` if you are already using [makeLoggable](#usage-with-browser-logger). In this case formatters are applied automatically.\n\n## Customize\n\n### Access stores as global variables in browser console.\n\nBy default, all the stores marked as loggable become accessible as global variables. Example:\n\n```js\nclass AuthStore {\n constructor() {\n makeLoggable(this);\n }\n}\n```\n\nThen you can type `store.authStore` in your browser console. Feel free to log store, call actions and computeds in the console. Works only in dev mode.\n\nIf you'd like to disable this feature use this:\n\n```js\nimport { configureLogger } from 'mobx-log';\n\nconfigureLogger({\n storeConsoleAccess: false,\n});\n```\n\nMake sure this function is called at the very top of your code\n\n### Disable the browser console fallback\n\nBy default `mobx-log` auto-detects the environment: if Redux Devtools are installed it uses them, otherwise it falls back to logging store changes into the browser console. On machines or branches where the extension isn't set up this fallback can add a lot of noise to the console.\n\nIf you only want logging when Redux Devtools are available, disable the fallback:\n\n```js\nimport { configureLogger } from 'mobx-log';\n\nconfigureLogger({\n browserConsoleFallback: false,\n});\n```\n\nWith this option, when Redux Devtools are missing, `makeLoggable` skips the logging setup and writes nothing to the console. The `storeConsoleAccess` global still works. Make sure this function is called at the very top of your code.\n\n### Log observables / computeds / actions conditionally\n\nAn example how to log only `actions` and `computeds`:\n\n```js\nimport { configureLogger } from 'mobx-log';\n\nconfigureLogger({\n filters: {\n computeds: true,\n actions: true,\n observables: false,\n },\n});\n```\n\n### Log observables / computeds / actions of a specific store.\n\nAn example how to log only changes in `computeds` of a store `Counter`.\n\n```js\nimport { makeLoggable } from 'mobx-log';\n\nclass Counter {\n value = 0;\n\n constructor() {\n makeAutoObservable(this);\n makeLoggable(this, {\n filters: {\n events: {\n computeds: true,\n observables: false,\n actions: false,\n },\n },\n });\n }\n}\n```\n\n### Customize logger output\n\nExample - add time for each log entry:\n\n```typescript\nimport { configureLogger, DefaultLogger, LogWriter } from 'mobx-log';\n\nexport const now = () => {\n const time = new Date();\n const h = time.getHours().toString().padStart(2, '0');\n const m = time.getMinutes().toString().padStart(2, '0');\n const s = time.getSeconds().toString().padStart(2, '0');\n const ms = time.getMilliseconds().toString().padStart(3, '0');\n\n return `${h}:${m}:${s}.${ms}`;\n};\n\nclass MyLogWriter implements LogWriter {\n write(...messages: unknown[]) {\n console.log(now(), ...messages);\n }\n}\n\nconfigureLogger({\n logger: new DefaultLogger(new MyLogWriter()),\n});\n```\n\n### Usage with factory functions\n\nYou can create stores without classes using makeAutoObservable / makeObservable:\n\n```typescript\nexport const createDoubler = () => {\n return makeAutoObservable({\n value: 0,\n get double() {\n return this.value * 2;\n },\n increment() {\n this.value++;\n },\n });\n};\n```\n\nYou can also log such stores using `makeLoggable`:\n\n```typescript\nexport const createDoubler = () => {\n return makeLoggable(\n makeAutoObservable({\n loggableName: 'doubler', // <-- Required\n value: 0,\n get double() {\n return this.value * 2;\n },\n increment() {\n this.value++;\n },\n })\n );\n};\n```\n\nThe store also become available in console if you turn on `storeConsoleAccess` option.\n\n### Usage with `useLocalObservable`\n\nBefore:\n\n```typescript\nimport { useLocalObservable } from 'mobx-react-lite'\n\n...\n\nconst App = observer(() => {\n const counterStore = useLocalObservable(() => {\n count: 0,\n increment: () => this.count++,\n })\n\n return ...\n})\n```\n\nAfter:\n\n```typescript\nimport { useMakeLoggable } from 'mobx-log'\n\n...\n\nconst App = observer(() => {\n const counterStore = useLocalObservable(() => {\n count: 0,\n increment: () => this.count++,\n })\n useMakeLoggable(counterStore, 'counter')\n\n return ...\n})\n```\n\nThe store also become available in console if you turn on `storeConsoleAccess` option.\n\n### How it is different from alternatives?\n\n- [mobx-logger](https://github.com/winterbe/mobx-logger) doesn't show [observables and computeds](https://github.com/winterbe/mobx-logger/issues/34) with Mobx 6 due to changes in Mobx internals.\n- [mobx-remotedev](https://github.com/zalmoxisus/mobx-remotedev/issues) is [not maintained](https://github.com/zalmoxisus/mobx-remotedev/issues/55) anymore. It also doesn't show computeds.\n- [mobx-devtools](https://github.com/mobxjs/mobx-devtools) does not show changes in computeds\n- [mobx-react-devtools](https://github.com/mobxjs/mobx-react-devtools) is deprecated\n- [mobx-formatters](https://github.com/motion/mobx-formatters) doesn't support Map & Set. Also it's just a proxy formatter, not a logger\n\n### Example project\n\nThis library has example project located in `./example` folder. It is used for development purposes. To run it go to `./example` folder and run `npm run start`.\n\n### Store destructuring\n\nPrior to Mobx 6.3.4 bound actions didn't appear in the log. If you are using store destructuring and want your actions appear in the log please update your Mobx to 6.3.4. See the discussion for details: https://github.com/mobxjs/mobx/discussions/3140\n","readmeFilename":"README.md"}