Детектор компонентов автоматически определяет, какой фронтенд-фреймворк использует сайт, и показывает его полное дерево компонентов. Просматривайте имена компонентов React, Vue, Angular и Svelte, значения их props/state и иерархию вложенности — всё в одной панели инспектора.
Хотите узнать, на каком фреймворке построен сайт? Или посмотреть, как сложный интерфейс разбит на компоненты? Детектор компонентов мгновенно отвечает на оба вопроса. Он сканирует страницу на наличие специфических сигнатур фреймворков (fiber-узлы React, экземпляры компонентов Vue, маркеры zone Angular, метаданные компонентов Svelte) и определяет фреймворк, его версию и полное дерево компонентов. Для React и Vue он идёт дальше — показывает props и state компонентов, чтобы вы понимали, какие данные управляют каждой частью интерфейса. Нажмите на любой компонент в дереве, чтобы выделить соответствующий DOM-элемент на странице, или нажмите на элемент страницы, чтобы найти его компонент в дереве. Это как React DevTools или Vue DevTools, но встроенные прямо в страницу в виде лёгкой плавающей панели.
Автоматически определяет 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 бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
