Make jsdom elements look like real DOM elements in Chrome Devtools console
Branch: master
Clone or download
viddo Update how-to-use detail
Menu item changed in more recent versions of Chrome devtools
Latest commit dbad8ca May 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
manual-testing Fix Readme screenshots would look nicer as PNGs, instead of JPEG (#3) Apr 1, 2018
src Make rendered output look more consistent Mar 7, 2018
.gitignore
.travis.yml Setup travis Mar 7, 2018
CHANGELOG.md Prep changelog for release Apr 9, 2018
README.md Update how-to-use detail May 25, 2018
RELEASE.md Add how-to-release docs Apr 1, 2018
after.png Fix Readme screenshots would look nicer as PNGs, instead of JPEG (#3) Apr 1, 2018
before.png Fix Readme screenshots would look nicer as PNGs, instead of JPEG (#3) Apr 1, 2018
index.js Fix Readme screenshots would look nicer as PNGs, instead of JPEG (#3) Apr 1, 2018
index.test.js Fix Readme screenshots would look nicer as PNGs, instead of JPEG (#3) Apr 1, 2018
package-lock.json 0.2.0 Apr 1, 2018
package.json Update refs to new home repo Apr 9, 2018

README.md

jsdom-devtools-formatter Build Status

In a nutshell: Instead of trying to understand what jsdom's elements represents by inspecting their implementation objects like so: before.png

…let's just inspect them like they were real HTML elements: after.png

Typical use-case would be some script/test that utilizes jsdom in a Node.js environment, e.g. Jest.

How to use

npm install jsdom-devtools-formatter
// in some file.js
const jsdomDevtoolsFormatter = require('jsdom-devtools-formatter');
jsdomDevtoolsFormatter.install();

// You can also opt-out at some later point by:
jsdomDevtoolsFormatter.uninstall();

E.g. for Jest it's probably easiest to integrate through setupTestFrameworkScriptFile configuration.

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

See package.json's scripts sections for all available commands. The most useul ones are probably:

# run all tests once:
npm test

# run tests in "watch mode"
npm test -- --watch

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 and click the "Open dedicated DevTools for Node" link (one-time thing)
  • Then run one of the following commands
npm run test:manual_node
# -or-
npm run test:manual_jest

It should stop at the debugger call, from there you can follow the inlined comment with instructions to play with the console output.

Related resources