How to actually use this

[1j01]

The documentation is quite lacking. It basically doesn't explain how to actually use the thing. You have to follow the link to the Webdebugger README (under Contributing) to learn that it rewrites index.html with the debugging data embedded.

debug.inspect() doesn't appear to do much (it doesn't start a web server or anything), but behind the scenes it "automagically" updates the Webdebugger's static page. The Webdebugger is supposed to be "loosely coupled" and "stand-alone" but I'm not sure how you'd use one without the other.

To debug multiple files you have to call debug multiple times and debug.inspect only once, which is reasonable, but not documented.

Here's what I would suggest:

1. Consider the "Webdebugger" a vital part of this tool and explain how to access it on the README. It's best to do this with live-server i.e. live-server --open node_modules/postcss-debug/webdebugger/build/
2. Instead of rewriting index.html, have index.html include the debugging data via a script tag. Let the static page truly be a static page and avoid having to patch it with string replacement.
3. Rename debug.inspect to something like debug.dump or debug.write, and provide a callback with the path to the static page, so the user can log something when it's done, maybe launch a server, and to improve the code's ability to self-document.
4. Document the methods of the API explicitly, not just through code examples

[andywer]

It's so hard to get feedback on the documentation sometimes... Thanks for sharing this!

I will have a deeper look into this later. I'm pretty busy right now, at work and with https://github.com/andywer/webpack-blocks and https://github.com/flux-capacitor/flux-capacitor. Sorry. But we will address this and keep you involved 👍