Recommendations for inspecting/debugging/troubleshooting a (js)DOM node?

[Nicklas Gummesson]

Hi there,

I'm curious about how do people troubleshoot/inspect a DOM nodes in a test that utilizes jsdom (e.g. Jest)? I don't see any easy way to inspect an element and its children to see the state of things at a glance, the closest thing I've got so far is using .inner/outerHTML, like so:

For comparison, a real browser gives an easy way to inspect DOM elements which makes it very easy and pleasant:

The closet thing I've found on these lines is #1719 (Feature request: Chrome Debugging Protocol support), but not sure how problematic it would be to implement that? Any pointers or suggestions? What do other people do or think about this?

Cheers,

[Domenic Denicola]

outerHTML seems like the best solution to me!

---

From: js...@googlegroups.com <js...@googlegroups.com> on behalf of Nicklas Gummesson <nicklas....@gmail.com>
Sent: Friday, March 2, 2018 8:59:10 PM
To: jsdom
Subject: Recommendations for inspecting/debugging/troubleshooting a (js)DOM node?

 

--
You received this message because you are subscribed to the Google Groups "jsdom" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsdom+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Nicklas Gummesson]

So I dug into this a little bit more during the weekend, turns out Chrome Devtools provides an API to implement custom formatters.

It was fairly easy to implement something that makes jsdom's nodes to look&feel like the native DOM inspector in the console at least:

Would you accept a PR for this into the jsdom repo? 

Otherwise no worries, I can put this up as a separate lib that can be npm install'ed separately.

Cheers,

[Nicklas Gummesson]

For what it's worth, I put up what I have so far at https://github.com/viddo/jsdom-devtools-formatter for the time being.

[Domenic Denicola]

Wow, this is really cool! I’m not sure we should bundle this into jsdom; not everyone debugs using devtools, and you’ve done some great work in your own repo that I wouldn’t want to make integrate into our testing framework etc. But I’d love to link to it from the jsdom readme. Feel free to file an issue so we don’t forget to do so, or file a pull request to add it directly.

[Nicklas Gummesson]

Yeah, that's all reasonable and understandable. 

Happy to send a PR to add it! I'll do it in a bit.

You received this message because you are subscribed to a topic in the Google Groups "jsdom" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsdom/5bZXCNvqZmM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsdom+un...@googlegroups.com.