andywer / andywer/postcss-debug

How to actually use this

Open
#19 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
94
Forks
7
PR merge metrics
No merged PRs in 30d

Description

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](https://www.npmjs.com/package/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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.