Детектор компонентов автоматически определяет, какой фронтенд-фреймворк использует сайт, и показывает его полное дерево компонентов. Просматривайте имена компонентов React, Vue, Angular и Svelte, значения их props/state и иерархию вложенности — всё в одной панели инспектора.
Когда-нибудь задумывались, на каком фреймворке построен сайт? Или хотели увидеть, как сложный UI разбит на компоненты? Component Detector мгновенно отвечает на оба вопроса. Он сканирует страницу на предмет специфичных для фреймворков сигнатур (fiber-узлы React, экземпляры компонентов Vue, маркеры zone в Angular, метаданные компонентов Svelte) и определяет фреймворк, его версию и полное дерево компонентов. Для React и Vue инструмент идёт дальше — показывает props и значения state, чтобы вы могли понять, какие данные управляют каждой частью интерфейса.
Кликните по любому компоненту в дереве, чтобы подсветить соответствующий DOM-элемент на странице, или кликните по элементу на странице, чтобы найти его компонент в дереве. Это похоже на React DevTools или Vue DevTools, но встроено прямо в страницу как лёгкая плавающая панель — без установки отдельного расширения под каждый фреймворк, с которым приходится работать.
Определение работает даже на минифицированных production-сборках, где имена компонентов и переменных изменены до нечитаемого вида, — инструмент ищет структурные сигнатуры, а не полагается на читаемый исходный код, поэтому он продолжает работать на сайтах, которые никогда не публиковали source map. Помимо основной четвёрки фреймворков, инструмент также распознаёт мета-фреймворки, надстроенные поверх них, такие как Next.js и Nuxt, и показывает их отдельным слоем поверх базового рантайма React или Vue. Это делает его быстрым первым шагом всякий раз, когда вы попадаете на незнакомую кодовую базу или сайт конкурента и вам нужно разобраться, с чем вы имеете дело, прежде чем копать глубже.
Автоматически определяет React (включая Next.js, Gatsby, Remix), Vue (включая Nuxt), Angular, Svelte (включая SvelteKit), Preact, Solid и другие фреймворки. Показывает название фреймворка, точный номер версии и режим рендеринга (клиентский, SSR или гибридный).
Отображает полную иерархию компонентов в виде сворачиваемого дерева. Видно, как корневой компонент App содержит Navbar, который содержит NavLinks, которые содержат отдельные компоненты Link. Уровень вложенности и связи родитель-потомок абсолютно прозрачны.
Для компонентов React и Vue просматривайте текущие значения props и state каждого компонента. Видно, что компонент Dashboard получает title="Overview", loading=false и columns=2. Незаменимо для понимания потока данных.
Нажмите на любой компонент в панели дерева, чтобы выделить соответствующий DOM-элемент на странице цветным наложением. Или нажмите на любой элемент страницы, чтобы найти и выбрать его родительский компонент в дереве. Навигация в любом удобном направлении.
Смотрите общее количество компонентов на странице, сколько из них уникальных и сколько повторяющихся экземпляров, а также какие компоненты встречаются чаще всего. Полезно для оценки сложности страницы и выявления паттернов повторного использования.
Определяет фреймворки даже в минифицированных продакшн-сборках. Fiber-дерево React, маркеры __vue__ в Vue и атрибуты ng в Angular сохраняются в продакшн-режиме — Детектор компонентов считывает их вне зависимости от конфигурации сборки.
Зайдите на любой сайт и мгновенно узнайте, построен ли он на React, Vue, Angular или Svelte — включая точную версию. Используйте вместе с инструментом Site Stack для полного технологического аудита, включая CDN, аналитику и CMS.
Изучайте, как продакшн-приложения разбивают интерфейс на компоненты. Смотрите, как Stripe структурирует страницу с ценами, как Linear организует свой дашборд, или как любое хорошо построенное приложение разделяет раскладку, навигацию и контент на компоненты.
Компонент отображается некорректно? Проверьте его props и state, чтобы увидеть, какие данные он фактически получает. Сравните ожидаемые значения с реальными и определите, где нарушается поток данных — без операторов console.log.
Готовитесь к фронтенд-интервью? Просматривайте продакшн-сайты, чтобы увидеть реальные паттерны компонентов — разделение контейнер/представление, использование render props, провайдеры контекста и HOC-обёртки — всё это видно в дереве компонентов.
Зайдите на похожие продукты, построенные на разных фреймворках, и сравните их структуры компонентов. Посмотрите, как React-приложение и Vue-приложение подходят к одному и тому же паттерну интерфейса — навигации, формам, таблицам данных, модальным окнам — и поймите архитектурные различия.
Откройте плавающий dock DevSuite Pro и нажмите на значок Детектора компонентов. Инструмент сканирует DOM страницы на наличие маркеров фреймворков и строит дерево компонентов.
В заголовке панели отображается обнаруженный фреймворк (React, Vue, Angular, Svelte), его версия и режим рендеринга. Если фреймворк не обнаружен, страница определяется как обычная HTML/CSS/JS.
Разворачивайте и сворачивайте компоненты в дереве для изучения иерархии. Имена компонентов отображаются с отступами, соответствующими глубине вложенности. У повторяющихся компонентов указывается количество экземпляров.
Нажмите на любой компонент в дереве, чтобы увидеть его текущие значения props и state в секции деталей ниже. Для React: props, state и хуки. Для Vue: props, data и вычисляемые свойства.
Нажмите на любой компонент, чтобы выделить соответствующий DOM-элемент на странице цветной рамкой и полупрозрачным наложением. Нажмите на элемент страницы, чтобы найти его в дереве.
Установите DevSuite Pro бесплатно и разблокируйте более 64 инструментов разработчика для вашего браузера.
