Детекторът на компоненти автоматично идентифицира коя фронтенд рамка (framework) използва даден уебсайт и разкрива пълното му дърво с компоненти. Вижте имената на компонентите за React, Vue, Angular и Svelte, стойностите на техните props/state и йерархията на влагане — всичко това от един панел за проверка.
Някога чудили ли сте се с каква рамка е изграден даден уебсайт? Или сте искали да видите как сложният потребителски интерфейс (UI) се разлага на компоненти? Component Detector отговаря незабавно и на двата въпроса. Той сканира страницата за специфични за рамката сигнатури (възли на React fiber, инстанции на компоненти във Vue, маркери за зони в Angular, метаданни за компоненти в Svelte) и идентифицира рамката, нейната версия и пълното дърво на компонентите. За React и Vue стига и по-далеч — показвайки props и state (състояние) на компонентите, за да разберете какви данни управляват всяка част от потребителския интерфейс. Щракнете върху произволен компонент в дървото, за да подчертаете съответния DOM елемент на страницата, или щракнете върху елемент на страницата, за да намерите неговия компонент в дървото. Това е като React DevTools или Vue DevTools, но вградено във вашата страница като лек плаващ панел.
Автоматично открива React (включително Next.js, Gatsby, Remix), Vue (включително Nuxt), Angular, Svelte (включително SvelteKit), Preact, Solid и други рамки. Показва името на рамката, точния номер на версията и режима на рендиране (client-side, SSR или хибриден).
Изобразява пълната йерархия на компонентите в сгъваем дървовиден изглед. Вижте как компонентът App на най-високо ниво съдържа Navbar, който съдържа NavLinks, които пък съдържат отделни Link компоненти. Дълбочината на влагане и отношенията родител-дете са кристално ясни.
За компонентите на React и Vue вижте текущите props и state (състояния), подадени към всеки компонент. Вижте, че компонентът Dashboard получава title="Overview", loading=false и columns=2. Безценно за разбиране на потока от данни.
Щракнете върху произволен компонент в панела с дървото, за да подчертаете съответния му DOM елемент на страницата с цветен слой. Или щракнете върху който и да е елемент на страницата, за да намерите и изберете неговия родителски компонент в дървото. Навигирайте в посоката, която ви е по-удобна.
Вижте общия брой компоненти, рендирани на страницата, колко са уникалните срещу повтарящите се инстанции и кои компоненти се появяват най-често. Полезно за разбиране на сложността на страницата и идентифициране на модели за повторно използване.
Открива рамки дори при минифицирани продуктови билдове. Fiber дървото на React, маркерите __vue__ на Vue и ng атрибутите на Angular се запазват в производствен режим — Component Detector ги разчита независимо от конфигурацията на билда.
Посетете произволен уебсайт и разберете незабавно дали е изграден с React, Vue, Angular или Svelte — включително точната версия. Комбинирайте със Site Stack за пълен технологичен одит, включително информация за CDN, анализи и CMS.
Изучавайте как истинските приложения (production applications) разлагат своя UI на компоненти. Вижте как Stripe структурира своята страница с цени, как Linear организира своето табло или как всяко добре изградено приложение разделя оформлението, навигацията и съдържанието в компоненти.
Някой компонент не се изобразява правилно? Проверете неговите props и state, за да видите какви данни действително получава. Сравнете очакваните стойности с действителните стойности, за да идентифицирате къде се прекъсва потокът от данни — без console.log изрази.
Подготвяте се за интервю за фронтенд позиция? Разгледайте реални сайтове (production sites), за да видите модели на компоненти от реалния свят — разделяния контейнер/презентация, използване на render props, context providers и HOC обвивки, които са видими в дървото на компонентите.
Посетете подобни продукти, изградени с различни рамки, и сравнете техните компонентни структури. Вижте как едно React приложение спрямо едно Vue приложение подхожда към един и същ UI модел — навигация, формуляри, таблици с данни, модални прозорци — и разберете архитектурните разлики.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Component Detector. Инструментът сканира DOM на страницата за специфични маркери на рамката и изгражда дървото на компонентите.
Заглавната част на панела показва откритата рамка (React, Vue, Angular, Svelte), нейната версия и режима на рендиране. Ако не бъде открита рамка, той съобщава, че страницата е на чист (vanilla) HTML/CSS/JS.
Разгънете и свийте компонентите в дървото, за да изследвате йерархията. Имената на компонентите се появяват с посочена с отстъп (indentation) дълбочина на влагане. Повтарящите се компоненти показват брой инстанции.
Щракнете върху произволен компонент в дървото, за да видите текущите му props и state в раздела с подробности по-долу. За React: props, state и куки (hooks). За Vue: props, данни (data) и изчислени свойства (computed properties).
Щракнете върху произволен компонент, за да подчертаете съответния му DOM елемент на страницата с цветна рамка и полупрозрачен слой. Щракнете върху елемент на страницата, за да го локализирате в дървото.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
