Debug CSS

A CSS debugger visualization for any screenshot.

debugCss.js

const mql = require('@microlink/mql')

const debugCss = async (url, opts = {}) => {
  const { data } = await mql(url, {
    meta: false,
    screenshot: true,
    ...opts,
    scripts: [
      ...(opts.scripts || []),
      '[].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})'
    ]
  })

  return data.screenshot
}

const result = await debugCss('https://microlink.io')

mql.render(result)

Read docs

Edit on GitHub