A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/jsdom/jsdom-devtools-formatter below:

jsdom/jsdom-devtools-formatter: Make jsdom elements look like real DOM elements in Chrome Devtools console

jsdom-devtools-formatter

In a nutshell: Instead of trying to understand what 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 in a Node.js environment, e.g. Jest.

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 you need to install the formatter in a setupFilesAfterEnv configuration file.

As a one-time thing also need to:

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

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:

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.


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4