Copying Screen Info as JSON for Bug Reports

Why Include Screen Info in Bug Reports?

Many front-end bugs are viewport-dependent or device-specific. Including precise screen and display data in bug reports helps developers reproduce issues faster.

What to Include

A complete screen info JSON contains:

{
  "screen": {
    "width": 1920,
    "height": 1080,
    "colorDepth": 24,
    "pixelDepth": 24,
    "orientation": "landscape-primary",
    "orientationAngle": 0,
    "availableArea": {
      "width": 1920,
      "height": 1032,
      "top": 0,
      "left": 0
    }
  },
  "viewport": {
    "width": 1903,
    "height": 937
  },
  "window": {
    "innerWidth": 1920,
    "innerHeight": 937,
    "outerWidth": 1920,
    "outerHeight": 1032
  },
  "devicePixelRatio": 1,
  "touch": {
    "Touch supported": false,
    "Max touch points": 0,
    "TouchEvent API": false,
    "PointerEvent API": true
  },
  "mediaQueries": {
    "prefers-color-scheme: dark": true,
    "prefers-reduced-motion": false,
    "pointer: fine": true,
    "hover: hover": true
  },
  "breakpoints": {
    "tailwind": "2xl",
    "bootstrap": "xxl"
  }
}

How to Use It

1. Open the Screen Info Display tool in the browser where the bug occurs
2. Reproduce the bug conditions (resize to the problematic viewport, etc.)
3. Click Copy as JSON to capture all metrics
4. Paste into the bug report alongside screenshots and steps to reproduce

Key Fields for Common Bug Types

Layout breaks at certain widths:

• viewport.width, viewport.height
• breakpoints.tailwind, breakpoints.bootstrap

Images appear blurry:

• devicePixelRatio
• screen.width, screen.height

Hover effects not working on tablet:

• mediaQueries["hover: hover"]
• mediaQueries["pointer: fine"]
• touch.Touch supported

Dark mode issues:

• mediaQueries["prefers-color-scheme: dark"]

Automating with JavaScript

If you want to collect this data programmatically in your app:

function getScreenDiagnostics() {
  return {
    viewport: {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
    },
    dpr: window.devicePixelRatio,
    screen: {
      width: screen.width,
      height: screen.height,
    },
    darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
    touch: navigator.maxTouchPoints > 0,
  };
}