Browser based debug interface for metalsmith
Provides nice ui to navigate metalsmith files and metadata, allowing you to view any stage of the build process
- nice ui for exploring files & metadata
- can jump forwards and backwards through the build process
- cool react based client
npm i --save metalsmith-debug-ui
metalsmith-debug-ui clones your metalsmith files and metadata strutures at
different times during the build process and stores this history. Then it
injects a browser based client into your build output which allows you to view
This will report after every plugin. You need to patch your metalsmith instance.
let ms =ms
report as a plugin
let ms = // no need to patchms
metalsmith CLI / metalsmith.json
This plugin won't work in metalsmith CLI mode.
The client should be built with the rest of your site, and will be located at
debug-ui/index.html in your build directory. You should use your favourite static development server to view it in the same way you would view anything else in your build directory.
errors during build
When a plugin throws an error metalsmith will just die as per normal behaviour, but the data debug-ui has collected will still be written to the build dir.
The only problem is that if you're using a dev server like
metalsmith-dev-server you won't be able to view the ui to see what went wrong. I recommend implementing browser-sync or something instead.
It's difficult to reliably detect the names of plugins in order to report them in the ui. debug-ui first tries to sniff the plugin name from a stack trace, if that fails it checks whether the plugin returns a named function, and if that fails it will simply list the plugin as
In most cases this is satisfactory. If something is reported as anonymous you can easily work out what it is by looking at the plugins before and after it.
see metalsmith-all-the-things for a full working demo.
Some plugins may not write to the
debug-ui log, although I haven't found any
yet. In theory any plugins using
debug v2.x.x should work. If you find one
please post an issue.
Deprecation warning re: parseQuery is from upstream package. Don't worry about it.
npm run watch
Levi Wheatcroft firstname.lastname@example.org
Contributions welcome; Please submit all pull requests against the master branch.