JSPM

@krasnovbusiness/devtools

0.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q55347F

Package Exports

  • @krasnovbusiness/devtools

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@krasnovbusiness/devtools) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

DevTools

Плавающий тулбар для дизайн-QA прямо в браузере. Инструменты в одном виджете:

  • 📐 Линейка — наведи на любой элемент: outline, размер и расстояния до краёв родителя (rose) и до соседних элементов (emerald), как в Figma.
  • 🎯 Копировать контейнер — клик по элементу копирует в буфер его описание (имя React-компонента, тег, классы, размеры, отступы). Вставляешь в чат с AI-агентом — и он находит элемент в коде.
  • 💧 Колор-пикер — нативный EyeDropper браузера: тык по любому пикселю → hex в буфер.
  • 📌 Заморозка — не даёт дропдаунам/попапам/меню закрываться по клику снаружи (и по Esc/потере фокуса). Удобно, чтобы спокойно навести пипетку и взять цвет из открытого дропдауна.
  • ⚙️ Настройки — меню (открывается вверх): тогл «Показывать виджет при включённом инструменте» — пока активен любой инструмент, виджет закреплён и не прячется. Состояние сохраняется в localStorage.

Чистый React, без Tailwind и без icon-библиотек. Зависит только от react. Один файл — копируется в любой проект.

Установка (одна команда)

npx @krasnovbusiness/devtools add

Команда скопирует файл DevTools.tsx в твой проект (по умолчанию src/components/DevTools.tsx).

Подключи его один раз в корневом layout / App:

import { DevTools } from "./components/DevTools"

export default function App() {
  return (
    <>
      {/* ...весь твой UI... */}
      <DevTools />
    </>
  )
}

Next.js (App Router) — в app/layout.tsx:

import { DevTools } from "@/components/DevTools"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <DevTools />
      </body>
    </html>
  )
}

Только для разработки:

{process.env.NODE_ENV === "development" && <DevTools />}

Опции команды

npx @krasnovbusiness/devtools add --out src/widgets/DevTools.tsx   # свой путь
npx @krasnovbusiness/devtools add --force                          # перезаписать
npx @krasnovbusiness/devtools --help

Промт для AI-агента

Установи в проект тулбар дизайн-QA: выполни npx @krasnovbusiness/devtools add, затем подключи <DevTools /> один раз в корневом layout (рядом с {children}). Зависимости — только react, Tailwind не нужен.

Использование

Инструмент Как пользоваться
Линейка Кнопка 📐 или Alt/Cmd + I. Наводи на элементы — видишь размеры и отступы. Esc — выкл.
Контейнер Кнопка 🎯, затем клик по элементу — описание уходит в буфер.
Пипетка Кнопка 💧 → тык по пикселю → hex в буфере (Chrome/Edge; Safari/Firefox не поддерживают EyeDropper API).
Заморозка Кнопка 📌 — пока активна, дропдауны/попапы/меню не закрываются по клику снаружи. Удобно с пипеткой.
Настройки Кнопка ⚙️ — меню с тоглом «держать виджет при включённом инструменте».

Тулбар спрятан внизу по центру — наведи туда курсор, он выезжает.

Кастомизация

Всё в одном файле DevTools.tsx:

  • Цвета — объект C сверху файла (card, accent, cyan, rose, emerald…).
  • Позиция / размер зоны — константы PEEK, TRIGGER_W, TRIGGER_H.
  • Игнор-атрибут — IGNORE_ATTR (data-devtools-ignore). Повесь его на свой UI, чтобы инспектор его не трогал.

z-index захардкожен в максимум int32 — виджет всегда поверх модалок/оверлеев.

Что внутри пакета

Лицензия

MIT