{"id":18429653,"url":"https://github.com/jsdom/jsdom-devtools-formatter","last_synced_at":"2025-04-07T17:33:11.285Z","repository":{"id":48521240,"uuid":"124103837","full_name":"jsdom/jsdom-devtools-formatter","owner":"jsdom","description":"Make jsdom elements look like real DOM elements in Chrome Devtools console","archived":false,"fork":false,"pushed_at":"2023-07-20T03:51:34.000Z","size":440,"stargazers_count":52,"open_issues_count":4,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-26T04:03:01.119Z","etag":null,"topics":["chrome-devtools","debug","dom","jsdom"],"latest_commit_sha":null,"homepage":"","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/jsdom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null,"publiccode":null,"codemeta":null},"funding":{"tidelift":"npm/jsdom"}},"created_at":"2018-03-06T16:09:16.000Z","updated_at":"2024-06-19T09:17:01.925Z","dependencies_parsed_at":"2024-06-19T09:16:54.350Z","dependency_job_id":"aab2ade5-b412-47e5-8ca2-2067cf63ecd2","html_url":"https://github.com/jsdom/jsdom-devtools-formatter","commit_stats":{"total_commits":21,"total_committers":1,"mean_commits":21.0,"dds":0.0,"last_synced_commit":"f9073a205263f78b5c8782dcb33080124e100651"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdom%2Fjsdom-devtools-formatter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdom%2Fjsdom-devtools-formatter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdom%2Fjsdom-devtools-formatter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdom%2Fjsdom-devtools-formatter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdom","download_url":"https://codeload.github.com/jsdom/jsdom-devtools-formatter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247698007,"owners_count":20981288,"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","debug","dom","jsdom"],"created_at":"2024-11-06T05:18:07.640Z","updated_at":"2025-04-07T17:33:10.796Z","avatar_url":"https://github.com/jsdom.png","language":"JavaScript","readme":"# jsdom-devtools-formatter [![Build Status](https://travis-ci.org/jsdom/jsdom-devtools-formatter.svg?branch=master)](https://travis-ci.org/jsdom/jsdom-devtools-formatter)\n\nIn a nutshell: Instead of trying to understand what [jsdom](https://github.com/jsdom/jsdom)'s elements represents by inspecting their _implementation_ objects like so:\n![before.png](before.png)\n\u003c!-- screenshots should be of width 888px to match default layout on github.com --\u003e\n\n…let's just inspect them like they were real HTML elements:\n![after.png](after.png)\n\nTypical use-case would be some script/test that utilizes [jsdom](https://github.com/jsdom/jsdom) in a Node.js environment, e.g. [Jest](https://jestjs.io/).\n\n\n## How to use\n\n```bash\nnpm install jsdom-devtools-formatter\n```\n\n```js\n// in some file.js\nconst jsdomDevtoolsFormatter = require('jsdom-devtools-formatter');\njsdomDevtoolsFormatter.install();\n```\n\n```js\n// You can also opt-out at some later point by:\njsdomDevtoolsFormatter.uninstall();\n```\n\nE.g. for Jest you need to install the formatter in a [`setupFilesAfterEnv` configuration file](https://jestjs.io/docs/configuration#setupfilesafterenv-array).\n\nAs a one-time thing also need to:\n- Open Chrome's Devtools\n- Click the \"⠇\" in the upper-right corner \u003e Settings\n- Under \"Console\", check _\"Enable custom formatters\"_\n\n\n## Development\n\nThe source code is all plain vanilla JS and standard CommonJS modules.\nTests are written using [Jest](https://jestjs.io/)\n\nSee package.json's `scripts` sections for all available commands. The most useul ones are probably:\n\n### Automated Tests\n\n```bash\n# run all tests once:\nnpm test\n\n# run tests in \"watch mode\"\nnpm test -- --watch\n```\n\n\n### Manual Testing\n\nIn addition to verifying _logical changes_ using the automated tests, it's recommended to verify that things \"look \u0026 feel\" as expected using the _manual_ tests:\n\n- Open [chrome://inspect](chrome://inspect) and click the _\"Open dedicated DevTools for Node\"_ link\n- Then run:\n\n```bash\nnpm run test:manual_node\n# -or-\nnpm run test:manual_jest\n```\n\nIt should stop at the `debugger` call site, from there you can follow the inlined comment with instructions to play with the console output.\n\n\n## Related resources\n\n- https://github.com/jsdom/jsdom\n- [Custom Object Formatters in Chrome DevTools (gdoc)](https://bit.ly/object-formatters)\n- [Contributing to Chrome DevTools (gdoc)](https://bit.ly/devtools-contribution-guide)\n- [Debugging Node.js Apps](https://nodejs.org/en/docs/inspector/)\n- [Debugger, Advanced usage, V8 Inspector Integration for Node.js](https://nodejs.org/dist/latest-v18.x/docs/api/debugger.html#v8-inspector-integration-for-nodejs)\n","funding_links":["https://tidelift.com/funding/github/npm/jsdom"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdom%2Fjsdom-devtools-formatter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdom%2Fjsdom-devtools-formatter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdom%2Fjsdom-devtools-formatter/lists"}