隐藏React开发人员工具的ReactJS组件

Question

我知道有些网站使用reactJS作为前端部分，但他们正在使用一些先进的技术来隐藏组件结构。因此，我们无法使用反应开发人员工具查看组件部分。

示例网站 - facebook site

请告诉我facebook用来隐藏组件结构的内容吗？

Answer 1

尝试在生产中使用以下代码

<script>
    if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
        __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
    }
</script>

请在此处参考react-devtools问题#191

Answer 2

通常，当我想在“组件”树中细化视图时，我会转到“ 视图设置菜单” ，它是位于左上角的搜索组件树栏上的齿轮图标：

在“视图设置”菜单中，您可以访问“组件树”选项。 隐藏组件位置过滤器是一项非常有用的功能。如果您希望从组件树中排除大量噪声，则可以输入正则表达式。在下面的示例中，我输入了一个正则表达式来隐藏除名为“ ContractForm”的组件以外的所有内容：

在组件窗格中产生以下结果：