Self-Promotion
Show off what you're working on
Start new thread

Nitpique: A Technical Inspection Toolkit for the Modern Web

by•

Inspecting a webpage is rarely just about looking at its CSS.

A layout issue can involve the cascade, specificity, inherited styles, stacking contexts, containing blocks, or a parent grid constraint. A visual mismatch can come down to font metrics, line-height, spacing, or colour contrast.

Diagnosing these issues often means moving between DevTools, measurement utilities, colour analysers, accessibility checkers and screenshot tools.

Nitpique brings these inspection workflows into one browser extension.

Inspect the rendering, not just the element

  • Explore computed styles, the CSS cascade and source rules.

  • Inspect stacking contexts, transforms, pseudo-states and layout behaviour.

  • Analyse Flexbox and Grid overlays.

  • Inspect fonts, typography metrics, Shadow DOM and iframe content.

Measure and modify

  • Measure element dimensions, distances and spacing.

  • Inspect the box model, text edges, cap height, x-height and baseline.

  • Edit CSS properties live and test visual changes.

  • Copy extracted styles as CSS, Tailwind or JSX.

  • Force hover, focus and active states.

Analyse visual quality and accessibility

  • Inspect colour values across HEX, RGB and OKLCH.

  • Evaluate WCAG 2 and APCA contrast.

  • Check target sizes, heading structure and tab order.

  • Simulate colour-vision deficiencies.

  • Analyse design tokens, typography scales and spacing systems.

Debug responsive behaviour

  • Test custom and preset viewport dimensions.

  • Inspect layout changes across screen sizes.

  • Identify horizontal overflow and layout shifts.

  • Examine asset weight and page-level technical signals.

Capture and document findings

  • Capture visible and full-page screenshots.

  • Annotate and redact screenshots.

  • Preserve visual evidence for debugging, design reviews and QA.

Built for people who work with the browser

Nitpique is designed for frontend engineers, UI/UX designers and QA teams who need to inspect how a webpage is constructed, rendered and behaves.

It does not attempt to replace Chrome DevTools, Lighthouse or dedicated testing platforms. It complements them by consolidating frequently used inspection, measurement, editing and analysis workflows.

Inspect the cascade. Measure the layout. Analyse the rendering. Debug the details.

Website:

Chrome Web Store:

3 views

Add a comment

Replies

Be the first to reply

Have a question or a thought to share? Add a comment above to start the conversation.