{"id":13839840,"url":"https://github.com/mattzeunert/immutable-object-formatter-extension","last_synced_at":"2025-04-13T12:34:26.375Z","repository":{"id":6122950,"uuid":"54753028","full_name":"mattzeunert/immutable-object-formatter-extension","owner":"mattzeunert","description":"Make ImmutableJS objects more readable when viewed in Chrome DevTools","archived":false,"fork":false,"pushed_at":"2022-11-16T02:56:01.000Z","size":770,"stargazers_count":134,"open_issues_count":8,"forks_count":14,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T12:10:26.146Z","etag":null,"topics":["chrome-devtools","immutablejs"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/hgldghadipiblonfkkicmgcbbijnpeog","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/mattzeunert.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}},"created_at":"2016-03-25T23:24:08.000Z","updated_at":"2024-02-29T01:40:18.000Z","dependencies_parsed_at":"2023-01-11T16:56:58.804Z","dependency_job_id":null,"html_url":"https://github.com/mattzeunert/immutable-object-formatter-extension","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/mattzeunert%2Fimmutable-object-formatter-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattzeunert%2Fimmutable-object-formatter-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattzeunert%2Fimmutable-object-formatter-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattzeunert%2Fimmutable-object-formatter-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattzeunert","download_url":"https://codeload.github.com/mattzeunert/immutable-object-formatter-extension/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248714652,"owners_count":21149931,"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":["chrome-devtools","immutablejs"],"created_at":"2024-08-04T17:00:36.167Z","updated_at":"2025-04-13T12:34:26.330Z","avatar_url":"https://github.com/mattzeunert.png","language":"JavaScript","funding_links":[],"categories":["好用的插件"],"sub_categories":[],"readme":"# Immutable.js Object Formatter (Chrome Extension)\n\nTransforms Immutable JS objects to a more readable format when they are logged to the console.\n\n[Install the Chrome Extension](https://chrome.google.com/webstore/detail/immutablejs-object-format/hgldghadipiblonfkkicmgcbbijnpeog)\n\nBased on [immutable-devtools](https://github.com/andrewdavey/immutable-devtools).\n\nThe Chrome extension will only work if you **enable Custom Formatters** in the DevTools settings.\n\n### Step 1: Open DevTools settings\n\n![](https://user-images.githubusercontent.com/1303660/36625688-48c2160e-195f-11e8-9a5f-ba9ea8553b06.png)\n\n### Step 2: Enable custom formatters\n\n![](https://cloud.githubusercontent.com/assets/1303660/18231278/a271ede6-72ad-11e6-8623-367f3e8eb686.png)\n\n## How it works\n\nThe code in \"/immutable-devtools\" is essentially just a copy of `immutable-devtools`.\n\nThe two main differences are:\n\n1. We can't use `instanceof Immutable.Record` to detect if an object is a record, since we don't have access to the Immutable module that's loaded on the page. (We only have access to the one loaded in the extension.)  \n  We can still identify Records correctly, but the way we do it means there's a chance that an internal change in how Immutable.JS works could break that.\n2. The code can be loaded and unloaded several times on the same page, so we can't rely on variables inside the modules to detect if the formatters have already been injected into the page. Instead I'm setting a `window.__ImmutableJSDevToolsFormattersInstalled` property.\n\nThen all that's left to do is to load the code in \"devtools.js\".\n\n## Running the code locally\n\n1. `npm install`\n2. `npm run dev`\n3. Load the \"/extension\" directory as an unpacked Chrome extension\n4. Open \"/test-page/index.html\" to check everything looks as expected\n\nMake sure to reload the extension after any changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattzeunert%2Fimmutable-object-formatter-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattzeunert%2Fimmutable-object-formatter-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattzeunert%2Fimmutable-object-formatter-extension/lists"}