Как узнать, какой компонент я проверяю?

Question

Я использую стилевые компоненты в моем CRA. Дело в том, что когда я проверяю элемент в браузере, все, что я вижу, выглядит примерно так:

<div class="js-cskdjf fdsfsjk fdsfds">..</div>

Понятия не имею, что это за компонент, как я могу это выяснить? Я тоже удалил приложение.

Answer 1

Если вы используете CRA v2, то он поддерживает babel-plugin-macros

Вы можете использовать макрос babel из стилизованных компонентов, изменив основной импорт на:

import styled, { createGlobalStyle } from 'styled-components/macro';

Это принесет все свойства плагина babel, который стилизовал компоненты (которые вы должны будете добавить, чтобы добавить). Это включает в себя лучший опыт отладки, показывая имена компонентов внутри devtools. Подробнее об этом, , читайте документы здесь .

Answer 2

Вы можете использовать расширение 'React Developer Tools', чтобы увидеть макет Компонентов:

• для Chrome ,

• для FireFox .