Introduction API Reference Debug Example Important Usage with React Examples

Debug

The debug tool of Scroom can help you locate the problem quickly.

import { createScroom, debug } from "scroom";

const sc = createScroom(...);

debug(sc)

Example

() => {
  const ref = React.useRef()
  React.useEffect(() => {
    const sc = createScroom({
      target: ref.current,
    })
    const debugController = debug(sc)
    return () => {
      sc.destroy()
      debugController.destroy()
    }
  }, [])
  return <div ref={ref} style={{ height: '300px' }} />
}

() => {
  const ref = React.useRef()
  React.useEffect(() => {
    const sc = createScroom({
      target: ref.current,
    })
    const debugController = debug(sc)
    return () => {
      sc.destroy()
      debugController.destroy()
    }
  }, [])
  return <div ref={ref} style={{ height: '300px' }} />
}

You can also provide a debug ID.

debug(sc, "your-id");

Important

It is not recommended to use debug tool in a production environment. It will affect performance and bundle size.

Debug

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Example

Important

Example