Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsdom/jsdom-devtools-formatter
Make jsdom elements look like real DOM elements in Chrome Devtools console
https://github.com/jsdom/jsdom-devtools-formatter
chrome-devtools debug dom jsdom
Last synced: 2 months ago
JSON representation
Make jsdom elements look like real DOM elements in Chrome Devtools console
- Host: GitHub
- URL: https://github.com/jsdom/jsdom-devtools-formatter
- Owner: jsdom
- Created: 2018-03-06T16:09:16.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-20T03:51:34.000Z (over 1 year ago)
- Last Synced: 2024-04-26T04:03:01.119Z (9 months ago)
- Topics: chrome-devtools, debug, dom, jsdom
- Language: JavaScript
- Homepage:
- Size: 430 KB
- Stars: 52
- Watchers: 4
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# jsdom-devtools-formatter [](https://travis-ci.org/jsdom/jsdom-devtools-formatter)
In a nutshell: Instead of trying to understand what [jsdom](https://github.com/jsdom/jsdom)'s elements represents by inspecting their _implementation_ objects like so:
…let's just inspect them like they were real HTML elements:
Typical 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/).
## How to use
```bash
npm install jsdom-devtools-formatter
```
```js
// in some file.js
const jsdomDevtoolsFormatter = require('jsdom-devtools-formatter');
jsdomDevtoolsFormatter.install();
```
```js
// You can also opt-out at some later point by:
jsdomDevtoolsFormatter.uninstall();
```
E.g. for Jest you need to install the formatter in a [`setupFilesAfterEnv` configuration file](https://jestjs.io/docs/configuration#setupfilesafterenv-array).
As a one-time thing also need to:
- Open Chrome's Devtools
- Click the "⠇" in the upper-right corner > Settings
- Under "Console", check _"Enable custom formatters"_
## Development
The source code is all plain vanilla JS and standard CommonJS modules.
Tests are written using [Jest](https://jestjs.io/)
See package.json's `scripts` sections for all available commands. The most useul ones are probably:
### Automated Tests
```bash
# run all tests once:
npm test
# run tests in "watch mode"
npm test -- --watch
```
### Manual Testing
In addition to verifying _logical changes_ using the automated tests, it's recommended to verify that things "look & feel" as expected using the _manual_ tests:
- Open [chrome://inspect](chrome://inspect) and click the _"Open dedicated DevTools for Node"_ link
- Then run:
```bash
npm run test:manual_node
# -or-
npm run test:manual_jest
```
It should stop at the `debugger` call site, from there you can follow the inlined comment with instructions to play with the console output.
## Related resources
- https://github.com/jsdom/jsdom
- [Custom Object Formatters in Chrome DevTools (gdoc)](https://bit.ly/object-formatters)
- [Contributing to Chrome DevTools (gdoc)](https://bit.ly/devtools-contribution-guide)
- [Debugging Node.js Apps](https://nodejs.org/en/docs/inspector/)
- [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)