PanescopeMulti-device testing & QA
Add to Chrome
FeaturesDebug tools

42 debug tools. Any screen, one click.

Simulate how people see your page, stress the layout with longer text and hostile CSS, and look inside the stacking order in 3D. Every tool works on one screen or all of them and comes back after a reload.

Add to Chrome — it’s freePricing
Panescope · panescope.com/demo
Debug tools popover with vision simulations, and layout outlines on the laptop screen
42 tools, per screenLayout outlines onCounted in the status bar
01

See it the way your visitors do

Eighteen simulations: every kind of colour blindness, blurred vision, myopia, cataracts, glaucoma, tunnel vision, macular degeneration, bright sunshine, photophobia, a dimmed screen and night mode.

  • Physiologically based colour-blindness filters
  • Apply a different simulation to each screen
  • Combine with contrast and target-size overlays
Pro
Panescope · panescope.com/demo
Four phone screens: deuteranopia, blurred vision, bright sunshine and tunnel vision
Panescope · panescope.com/demo
02

Stacking contexts in 3D

Why is that modal under the header? Panescope pulls the page apart into 3D layers. Stacking contexts in red, z-index in blue; hover a slab to see what created it.

  • Drag to rotate, Ctrl+scroll to zoom, double-click to reset
  • Reasons listed: position + z-index, opacity, transform, filter, isolation, will-change, contain, fixed and sticky
  • The real page is not transformed: measurements stay true
Pro
03

Stress the layout before users do

Real content is longer, translated and sometimes styled by someone else. Try it now.

Pro
Panescope · panescope.com/demo
Chaos test doubling all the text

Chaos test. Doubles every text to find clipping and overflow.

Panescope · panescope.com/demo
Layout outlines on the laptop screen
04

Layout X-ray

Outline every element by depth, label every z-index, turn off CSS or images, and find containers that show scrollbars they don't need.

  • Layout outlines coloured by nesting depth
  • Show z-index values on the page
  • Disable CSS, disable images, unneeded scrollbars
Pro
05

Thumb reachability

Easy, OK and hard zones for the right or the left thumb, on the phone sizes you choose.

  • Right-hand and left-hand maps
  • Shown on top of the live page
Pro
Panescope · panescope.com/demo
Thumb zones on three phones

All 42 debug tools

Vision · 18

ProtanopiaProtanomalyDeuteranopiaDeuteranomalyTritanopiaTritanomalyAchromatopsiaAchromatomalyBlurred visionMyopiaCataractsGlaucomaTunnel visionMacular degenerationBright sunshinePhotophobiaDimmed screenNight mode

Accessibility · 11

Contrast AAContrast AAATarget size 24pxTarget size 44pxTarget size 48pxTrack focusShow rolesShow ARIA attributesText spacingSmall textDyslexia

Layout · 9

Layout debuggingStacking context 3D viewShow z-indexDisable CSSDisable imagesHostile CSSUnneeded scrollbarsReachability (right hand)Reachability (left hand)

Content · 4

PlaceholdifyChaos testReadabilityEdit content

Also in Debug tools

Edit content

Make the page editable and try other copy in place, on every screen.

Rulers, guides, reference image

Overlay a design export with opacity, Difference or Invert, scrolling with the page.

Color picker

Pick any colour on screen and check its contrast against another (EyeDropper).

Next

Accessibility

WCAG 2.2 audits, contrast, focus and roles.

Test every screen before your users do.

Free to start. Pro for 3 days without a card.

Add to Chrome — it’s freeSee pricing