raunofreiberg / inspx

Pixel perfect layout inspection.

inspx

Pixel perfect layout inspection.

Built for React as a proof of concept.

Setup

Install the package:

npm install inspx --save-dev

Wrap the root of your application or arbitrary component trees:

import Inspect from 'inspx';

<Inspect>
  <App />
</Inspect>

Usage

Inspect elements by hovering an element and holding Option (⌥) simultaneously.

By default, any element with padding, margin, or width and height is inspectable.

You can disable certain properties:

<Inspect 
  margin 
  size={false} 
  padding={false}
>
  <App />
</Inspect>

Configuration

By default, the component will only be enabled in the development environment.

You can configure this behavior with the disabled prop:

<Inspect
  disabled={
    process.env.NODE_ENV === 'staging' || 
    process.env.NODE_ENV === 'production'
  }
>
  <App />
</Inspect>

Optionally, you can leverage code splitting by wrapping the exported component and using your own instead.

The library is lightweight enough for this to likely be a premature and insignificant optimization.

import * as React from 'react';
import { InspectProps } from 'inspx';

const Inspect = React.lazy(() => import('inspx'));

export default function Loader(props: InspectProps) {
  if (process.env.NODE_ENV === 'production') {
    return props.children;
  }
  return (
    <React.Suspense fallback={null}>
      <Inspect disabled={false} {...props} />
    </React.Suspense>
  );
}

inspx's Issues

Can not Inspect small button elements in chrome devtool mobile mode

Can not Inspect small button elements in chrome devtool mobile mode.

if I click the button first, and then hover an element and hold Option (⌥) , it works. but some button will redirect to another page, so ......

Disabled is ignored if NODE_ENV=production

Hello and thank you for the great library.

I have a specific problem, as I would like inspx to stay active on development/qa/preview deploys. This would help people who review and test features on these non-production branches.

But it seems that library itself disables when NODE_ENV is set to production and disabled is ignored.

Code looks something like this:

const isPreviewOrDev =
  process.env.NODE_ENV === 'development' || process.env.PREVIEW_ENV;

<Inspect disabled={!isPreviewOrDev}>
  <Component {...props} {...pageProps} />
</Inspect>

Where PREVIEW_ENV is a env variable which tells the app it runs in a (p)review mode and not in a real production mode.

I hope I was clear enough 🙈

Thank you!

Suporte ao linux?

When recommending to a linux user friend, the alt and alt gr keys do not work.

Is it possible to specify a container instead of creating a span?

Creating a span tag package will affect the page layout and is not flexible enough.

It is recommended to be able to pass in a ref or an ID or the like.