如何知道我正在检查哪个组件？

Posted 2023-03-16

【中文标题】如何知道我正在检查哪个组件？

【英文标题】：How to know which component i am inspecting?

【发布时间】：2019-03-31 21:05:26

【问题描述】：

我在我的 CRA 中使用 styledcomponents。问题是，当我在浏览器中检查一个元素时，我看到的都是这样的：

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

不知道这是什么组件，我该如何弄清楚？我也退出了应用程序。

【参考方案1】：

如果你使用的是 CRA v2，那么它支持babel-plugin-macros

您可以使用样式组件中的babel macro，方法是将主导入更改为：

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

这将引入用于样式化组件的 babel 插件的所有属性（您必须弹出才能添加）这包括更好的调试体验，通过在 devtools 中显示组件名称。更多关于这方面的信息，read docs here。

【参考方案2】：

您可以使用“React Developer Tools”扩展来查看组件布局：

for Chrome,

for FireFox.

【讨论】：

@bierhier 在开发者工具中除了Elements 之外，应该会出现一个名为React 的新标签：duaw26jehqd4r.cloudfront.net/items/3A1u130I1x021I1G240z/…