MDX Debugger

A dev tool to inspect the ast transformations done remark and rehype plugins during MDX compilation.

mdxdebugger.mp4

Usage

$ npm i mdx-debugger

import { withDebugger } from "mdx-debugger";

const file = { value: "# Hello", path: "test.md" };

const debugCompile = withDebugger(compile);
const result = await debugCompile(file, {
  remarkPlugins: [...],
  rehypePlugins: [...],
});

Options

import { withDebugger } from "mdx-debugger";

const file = { value: "# Hello", path: "test.md" };

const debugCompile = withDebugger(compile, {
  // only debug some files:
  filter: (file) => file?.path.includes("test.md"),
  // customize the message logged to the console:
  log: (filepath, url) => console.log(`${filepath} -> ${url}`),
});
const result = await debugCompile(file, {
  remarkPlugins: [...],
  rehypePlugins: [...],
});

Contribution

PRs welcome.

License

MIT