microlink logo

Microlink Recipe

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')
console.log(result)