ClientSideTools Privacy-First Browser Tools

Interactive Element Hit-Box Debugger

Render interface markup safely, visualize clickable areas, and find controls whose hit boxes are too small or blocked.

Web Accessibility Local processing HTML is sandboxed locally and scripts are disabled.

Debugger

Sandboxed preview

Scripts are disabled. External resources are blocked. The preview is local only.

Results

Paste HTML and CSS, then render the hit-box preview.

Detected interactive elements

    Introduction

    A control can look large enough but still have a small clickable area. Padding, borders, inline layout, transforms, and pointer-event rules can all affect the real hit box.

    This tool renders your markup in a safe local preview and measures the actual bounding boxes of interactive elements.

    How it works

    The tool sanitizes pasted HTML and CSS, renders the result in a sandboxed iframe, and uses standard layout APIs to measure each detected interactive element.

    • Scripts are disabled in the preview.
    • External resources are blocked.
    • Hit boxes are measured using rendered bounding rectangles.
    • Content boxes are estimated by subtracting borders and padding.

    How to use

    1. Paste HTML markup.
    2. Add optional CSS.
    3. Set the minimum hit-box size.
    4. Click Render & debug hit boxes.
    5. Review overlays and the detected element list.
    6. Copy the report for documentation or bug tickets.

    Practical example

    A small icon button may visually appear acceptable, but if its clickable area is only 16 × 16 pixels, it can be difficult to activate on touch devices. The debugger shows the actual hit box and compares it against your selected minimum size.

    Use cases

    • Debugging tiny icon buttons.
    • Checking whether padding increases the clickable area.
    • Identifying controls blocked by pointer-events: none.
    • Reviewing custom controls built from divs or spans.
    • Auditing component-library hit areas.

    Best practices

    • Use padding to enlarge hit areas without changing visual size.
    • Avoid placing tiny controls close together.
    • Do not disable pointer events on interactive controls unless intentionally inert.
    • Prefer native buttons and links for built-in interaction behavior.
    • Test on real touch devices.

    Common mistakes

    • Measuring only the icon instead of the clickable wrapper.
    • Using transforms that visually enlarge an element without changing its hit box.
    • Applying pointer-events: none to a parent of an interactive control.
    • Relying on hover-only affordances for touch interfaces.
    • Making custom controls focusable but not clickable.

    Limitations

    • The sandboxed preview cannot execute JavaScript.
    • External fonts, images, and stylesheets are blocked.
    • Measurement accuracy depends on the provided markup and CSS.
    • Real-world behavior should still be tested on target devices.

    Browser compatibility

    The tool uses standard iframe sandboxing, CSS parsing, and layout measurement APIs. It works in current versions of major browsers.

    FAQ

    Is my HTML uploaded?

    No. Everything is rendered and measured locally in your browser.

    Can scripts run in the preview?

    No. The preview iframe is sandboxed without script execution.

    What does the blue dashed box mean?

    It shows the approximate content box after subtracting borders and padding from the full hit box.

    Does this replace touch target testing?

    No. It helps identify layout and hit-box issues, but real device testing is still recommended.

    References

    Version and changelog

    • Version: 1.0.0
    • Last updated: August 8, 2026
    • Changelog: Initial production release.