{"id":13774317,"url":"https://github.com/motion/mobx-formatters","last_synced_at":"2025-04-13T22:01:55.446Z","repository":{"id":79965056,"uuid":"89401447","full_name":"motion/mobx-formatters","owner":"motion","description":"Chrome console formatters for mobx","archived":false,"fork":false,"pushed_at":"2017-07-24T03:58:12.000Z","size":106,"stargazers_count":56,"open_issues_count":2,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-02-15T03:34:29.377Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/motion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-25T20:02:07.000Z","updated_at":"2024-01-30T10:09:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"fc98252d-d569-4f88-8083-234ae538c29e","html_url":"https://github.com/motion/mobx-formatters","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motion%2Fmobx-formatters","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motion%2Fmobx-formatters/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motion%2Fmobx-formatters/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motion%2Fmobx-formatters/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/motion","download_url":"https://codeload.github.com/motion/mobx-formatters/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224838242,"owners_count":17378266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T17:01:25.603Z","updated_at":"2024-11-15T20:16:43.113Z","avatar_url":"https://github.com/motion.png","language":"JavaScript","funding_links":[],"categories":["Awesome MobX"],"sub_categories":["Development Tools"],"readme":"# mobx formatters for chrome\n\n[![Npm Version](https://badge.fury.io/js/mobx-formatters.svg)](https://badge.fury.io/js/mobx-formatters)\n[![NPM downloads](http://img.shields.io/npm/dm/mobx-formatters.svg)](https://www.npmjs.com/package/mobx-formatters)\n[![devDependency Status](https://david-dm.org/andrewdavey/mobx-formatters/dev-status.svg)](https://david-dm.org/andrewdavey/mobx-formatters#info=devDependencies)\n\n\u003cimg alt=\"mobx formatters\" src=\"screen.png\" align=\"right\" width=\"300px\" /\u003e\n\n[Mobx](https://mobx.js.org/) is fantastic, but inspecting mobx collections in Chrome's Dev Tools is awkward. You only see the internal data structure, not the logical contents. For example, when inspecting the contents of an Mobx Object, you'd really like to see the items in the list.\n\nChrome (v47+) has support for custom \"formatters\". A formatter tells Chrome's Dev Tools how to display values in the Console, Scope list, etc. This means we can display Lists, Maps and other collections, in a much better way.\n\nThis library provides a formatter to do just that.\n\n\n## Features\n\nThe library currently has formatters for:\n\n - [x] `Object`\n - [x] `Array`\n\nWant something more? [Write down your wishes!](https://github.com/motion/mobx-formatters/issues/new)\n\n## Installation\n\nChrome v47+\n\nIn Dev Tools, press F1 to load the Settings. Scroll down to the Console section and tick \"Enable custom formatters\".\n\nThen, in your project, install via npm:\n\n```\nnpm install --save-dev mobx-formatters\n```\n\nAnd enable with:\n\n```js\nvar Mobx = require('mobx')\nvar mobxFormatters = require('mobx-formatters')\n\nmobxFormatters(Mobx)\n```\n\nNote: You probably only want this library for debug builds, so perhaps wrap with `if (DEBUG) {...}` or similar.\n\n## Chrome Extension\n\nWould be awesome if someone helped create a Chrome Extension to automatically do this.\n\nIt could even be bundled with [this extension](https://chrome.google.com/webstore/detail/mobx-developer-tools/pfgnfdagidkfgccljigdamigbcnndkod/related).\n\n## Using with webpack\n\nYou could use `webpack.DefinePlugin` to create a condition that will be allowed to install `mobx-formatters` in the debug build but unreachable in the production build:\n\n```javascript\n// webpack.config.js\nvar webpack = require('webpack')\nmodule.exports = {\n  // ...\n  plugins: [\n    new webpack.DefinePlugin({\n      __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production')\n    })\n  ],\n};\n```\n\nIn your source you'd have something like this...\n\n```javascript\n// index.js\nvar mobx = require('mobx');\nif (__DEV__) {\n  var installDevTools = require('mobx-formatters')\n  installDevTools(mobx)\n}\n```\n\nAnd then by adding the `-p` shortcut to webpack for production mode which enables dead code elimination, the condition that requires mobx-formatters will be removed.\n\n```\nNODE_ENV=production webpack -p index.js\n```\n\n\n## Credit\n\nAll credit for the initial code and readme goes to Andrew Davey and [this repo](https://github.com/andrewdavey/immutable-devtools). Thank you.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotion%2Fmobx-formatters","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmotion%2Fmobx-formatters","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotion%2Fmobx-formatters/lists"}