{"_id":"jsdom-devtools-formatter","_rev":"5-9aa2ac5833e1e9e0074830c71a333f36","name":"jsdom-devtools-formatter","dist-tags":{"latest":"1.0.1"},"versions":{"0.1.0":{"name":"jsdom-devtools-formatter","version":"0.1.0","description":"Format jsdom's elements to look like real DOM elements in the Chrome Devtools console","repository":{"type":"git","url":"git+https://github.com/viddo/jsdom-devtools-formatter.git"},"engines":{"node":">=8.9.4"},"main":"index.js","files":["index.js","src"],"scripts":{"test":"jest","test:debug":"node --inspect=0.0.0.0 ./node_modules/.bin/jest --runInBand","test:manual_jest":"node --inspect=0.0.0.0 ./node_modules/.bin/jest --runInBand manual-testing/jest","test:manual_node":"node --inspect=0.0.0.0 manual-testing/node.js"},"keywords":["jsdom","chrome","devtools","console","formatter"],"author":{"name":"Nicklas Gummesson"},"license":"MIT","devDependencies":{"jest":"^22.4.2","jsdom":"^11.6.2"},"dependencies":{},"gitHead":"8f49b24f8c83b7c03ed63d34235df2c379617ab6","bugs":{"url":"https://github.com/viddo/jsdom-devtools-formatter/issues"},"homepage":"https://github.com/viddo/jsdom-devtools-formatter#readme","_id":"jsdom-devtools-formatter@0.1.0","_npmVersion":"5.7.1","_nodeVersion":"8.4.0","_npmUser":{"name":"viddo","email":"nicklas.gummesson@gmail.com"},"dist":{"integrity":"sha512-5t+k9UJ3VohO5Es71+v/aT6Or44anq3sWN6b32eORx4Sw2RroiUVN1M+FO9JTH2IoyysQKLECNsBxIh1bNpyCg==","shasum":"e2faad7f637561dac4b397a565f6c16a8320efc9","tarball":"https://registry.npmjs.org/jsdom-devtools-formatter/-/jsdom-devtools-formatter-0.1.0.tgz","fileCount":12,"unpackedSize":8068,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGN5LppO76cxyxUkKhzBZg1iWkFoBddCRuUnwPr4u4AAiEA6ICEwWrqjWNWD55lStTtCKYPtf+J5qRtWDNFx8B/oIw="}]},"maintainers":[{"name":"viddo","email":"nicklas.gummesson@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jsdom-devtools-formatter_0.1.0_1520407526198_0.5288919386246231"},"_hasShrinkwrap":false},"0.2.0":{"name":"jsdom-devtools-formatter","version":"0.2.0","description":"Make jsdom elements look like real DOM elements in Chrome Devtools console","repository":{"type":"git","url":"git+https://github.com/viddo/jsdom-devtools-formatter.git"},"engines":{"node":">=8.9.4"},"main":"index.js","files":["index.js","src"],"scripts":{"test":"jest","test:debug":"node --inspect=0.0.0.0 ./node_modules/.bin/jest --runInBand","test:manual_jest":"node --inspect=0.0.0.0 ./node_modules/.bin/jest --runInBand manual-testing/jest","test:manual_node":"node --inspect=0.0.0.0 manual-testing/node.js"},"keywords":["jsdom","chrome","devtools","console","formatter"],"author":{"name":"Nicklas Gummesson"},"license":"MIT","devDependencies":{"jest":"^22.4.2","jsdom":"^11.6.2"},"dependencies":{},"gitHead":"ba10afe1a4b7643e49149194ea989d850630d789","bugs":{"url":"https://github.com/viddo/jsdom-devtools-formatter/issues"},"homepage":"https://github.com/viddo/jsdom-devtools-formatter#readme","_id":"jsdom-devtools-formatter@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"viddo","email":"nicklas.gummesson@gmail.com"},"dist":{"integrity":"sha512-I6fqevqIwvAsmCcEHdW6pCRnrMMq/itNDHR6bYe4z2swjH65iRhIlIpNP65JZM9yBQ026Id1pKiHXc2nJm+d3A==","shasum":"b16048c53674179eb1b509cb1b57b86c8531f7b2","tarball":"https://registry.npmjs.org/jsdom-devtools-formatter/-/jsdom-devtools-formatter-0.2.0.tgz","fileCount":12,"unpackedSize":9014,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJoR9//tV0uUOFNG4GNcsxjezWzCJNun8G2Sl82+MUpAiEAih+nhSfyPpbf+n5i1BCwOca4ZUCUQ2LJI5kaC3nyNhM="}]},"maintainers":[{"name":"viddo","email":"nicklas.gummesson@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jsdom-devtools-formatter_0.2.0_1522611321443_0.44034480739292614"},"_hasShrinkwrap":false},"1.0.0":{"name":"jsdom-devtools-formatter","version":"1.0.0","description":"Make jsdom elements look like real DOM elements in Chrome Devtools console","repository":{"type":"git","url":"git+https://github.com/jsdom/jsdom-devtools-formatter.git"},"engines":{"node":">=8.9.4"},"main":"index.js","files":["index.js","src"],"scripts":{"test":"jest","test:debug":"node --inspect=0.0.0.0 ./node_modules/.bin/jest --runInBand","test:manual_jest":"node --inspect=0.0.0.0 ./node_modules/.bin/jest --runInBand manual-testing/jest","test:manual_node":"node --inspect=0.0.0.0 manual-testing/node.js"},"keywords":["jsdom","chrome","devtools","console","formatter"],"author":{"name":"Nicklas Gummesson"},"license":"MIT","devDependencies":{"jest":"^22.4.2","jsdom":"^11.6.2"},"dependencies":{},"gitHead":"cbef16ee379ed276e64391d60baec0072b3972f1","bugs":{"url":"https://github.com/jsdom/jsdom-devtools-formatter/issues"},"homepage":"https://github.com/jsdom/jsdom-devtools-formatter#readme","_id":"jsdom-devtools-formatter@1.0.0","_npmVersion":"5.8.0","_nodeVersion":"8.10.0","_npmUser":{"name":"viddo","email":"nicklas.gummesson@gmail.com"},"dist":{"integrity":"sha512-wOdpa8BP/G35+FfryPvPNstxFPdkH0XodB0nS5Byqg6UjG4aq2ZU8IprqkXwMYd8yLYyZdykhYYS2Tz+lqbobg==","shasum":"9451db70600d584d151ad56b752151a56cee9da0","tarball":"https://registry.npmjs.org/jsdom-devtools-formatter/-/jsdom-devtools-formatter-1.0.0.tgz","fileCount":12,"unpackedSize":9064,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGL7OGhKsQU4uJXO85KlVx+d//N7bhsdnYlertQW9Q2OAiBZapDXIt7Gt6Ped5cYYCfIg0Ig2I4hl/7qf+f+8Anylw=="}]},"maintainers":[{"name":"viddo","email":"nicklas.gummesson@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jsdom-devtools-formatter_1.0.0_1523285801969_0.2830480665960091"},"_hasShrinkwrap":false},"1.0.1":{"name":"jsdom-devtools-formatter","version":"1.0.1","description":"Make jsdom elements look like real DOM elements in Chrome Devtools console","repository":{"type":"git","url":"git+https://github.com/jsdom/jsdom-devtools-formatter.git"},"engines":{"node":">=18.12.1"},"main":"index.js","scripts":{"test":"jest","test:debug":"node --inspect ./node_modules/.bin/jest --runInBand","test:manual_jest":"node --inspect ./node_modules/.bin/jest --runInBand manual-testing/jest","test:manual_node":"node --inspect manual-testing/node.js"},"keywords":["jsdom","chrome","devtools","console","formatter"],"author":{"name":"Nicklas Gummesson"},"license":"MIT","devDependencies":{"jest":"^29.3.1","jest-environment-jsdom":"^29.3.1","jsdom":"^20.0.3"},"gitHead":"1ed8f1a14185be730ac2abf3637f335c0f0fb17c","bugs":{"url":"https://github.com/jsdom/jsdom-devtools-formatter/issues"},"homepage":"https://github.com/jsdom/jsdom-devtools-formatter#readme","_id":"jsdom-devtools-formatter@1.0.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-4YHGhoCKzYemZI6MgwnMaN75NfdfGePghTpDXWlk1sCrPdhbdgWe9uRKJASArt98HjK7rLQ3iK8Kh/Wj35H/vw==","shasum":"3ff073d57c4ebc0cbe0174bde148bc4ee43c07fc","tarball":"https://registry.npmjs.org/jsdom-devtools-formatter/-/jsdom-devtools-formatter-1.0.1.tgz","fileCount":10,"unpackedSize":8299,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNMkItRLqDcxrxk0llrQGLAu0Uc/3+WBeYMQCXuUbCzAiEApUAutO4/M+YFgPPKrQnDP6D2Nmlomb9Y1/HCSFx7Yts="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrXdgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHWA//WWAAXQHqslM78Yf2tN9+GWfmBH6ir0ihs9xKsncJKkaMTNid\r\nFD3erNM4RcMpa5efYZHbKoXcI4VcjoVoI3wAVZaQw0Sp6ytZ0+bWB6vW8qIE\r\n0VY/Z2omMXsYsATW99Zmo7RgOCMD+ix7X3Z9r5Cip714oKQdDcOJCw97xkRW\r\nMoxn+GO4OLeQX4fGw0kz3ldBiUB06OgY3/Nz5vfd+plVvtCnUCzFb/V2NurK\r\nO0q/P0RX+JtkUL1qYZq5z9igt9nXGdtJFvN7CO0s1KV87wXhtF6VsWKJ7//i\r\n/lyBZff5e2SCN+qig/ENpTM/qonsrRg4PWaJFwZ0kTIL5bNA2p1uCRzx2b3y\r\nxSoyc8yN6vTZ/ciS+S75C6hvM0hAGn2KwHFm+IIzmm4Jx2nH7UT/C4q6ZtlF\r\nyKKTMVxizjtakqhvmWyRPHkT3PtdsfQD1xkdT6xK6zfz96emNHXIBQspMFFU\r\nU/AdSI23KKvLgK+scvvHikwEHkwaU3T9x6R7QJOOp+5GcXqNjvsMq9XLXgb+\r\nVUrr4MFD/HzeMXzs2cf+RwpRqgQNT+nE3R0Db2rvbHBcP2hvdNLii7P1+SQy\r\nidbCeLPiZ26XLah4CfiSpvvH3lmSI0JprQ0RbTX4v4GE3LEjXYdWgcZZva1O\r\nqD7ia/Qxc92z1bI8LC/12YTXSP3LEO8sD8M=\r\n=XmKL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"viddo","email":"nicklas.gummesson@gmail.com"},"directories":{},"maintainers":[{"name":"viddo","email":"nicklas.gummesson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/jsdom-devtools-formatter_1.0.1_1672312671960_0.5689416210935674"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-07T07:25:26.197Z","0.1.0":"2018-03-07T07:25:26.324Z","modified":"2022-12-29T11:17:52.228Z","0.2.0":"2018-04-01T19:35:21.524Z","1.0.0":"2018-04-09T14:56:42.053Z","1.0.1":"2022-12-29T11:17:52.147Z"},"maintainers":[{"name":"viddo","email":"nicklas.gummesson@gmail.com"}],"description":"Make jsdom elements look like real DOM elements in Chrome Devtools console","homepage":"https://github.com/jsdom/jsdom-devtools-formatter#readme","keywords":["jsdom","chrome","devtools","console","formatter"],"repository":{"type":"git","url":"git+https://github.com/jsdom/jsdom-devtools-formatter.git"},"author":{"name":"Nicklas Gummesson"},"bugs":{"url":"https://github.com/jsdom/jsdom-devtools-formatter/issues"},"license":"MIT","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<!-- screenshots should be of width 888px to match default layout on github.com -->\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 > 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 & 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","readmeFilename":"README.md"}