将光标移动到 React 组件时，React DevTools 显示非常大的背景

编程问答 2022-05-29

问题描述

Chrome 版本 87.0.4280.141（官方版本）(x86_64)

React 开发者工具 4.10.1 (12/4/2020)

为 Chrome 浏览器安装了 React Developer Tools 扩展。

  • 打开一个由 React tech 开发的网站（例如 https://react-dev-inspector.zthxxx.me/ 可以用来试一试）
  • 打开 Chrome 菜单 ... => 更多工具 => 开发者工具
  • 如果当前页面加载了 React 组件，请转到“组件”选项卡。
  • 在标签页的左上角，有一个带有工具提示的光标按钮：“选择页面中要检查的元素”，单击它，然后将鼠标移动到网页上。
  • 它将显示带有工具提示的 React 组件。 （就像下面的截图）
  • “更多”按钮是一个 HTML 元素“a”，大小为 66px x 40px。

the normal status

但我的问题是，在我们开发的网站上，React inspect 会以非常大的黑色背景显示。就像下面的截图。

  • 这是一个大小为 240px x 52px 的按钮
  • 但提示的位置不在组件旁边，而是在屏幕顶部
  • 还有一个非常大的背景

我不确定我们在哪里/什么配置设置不正确。

任何评论和帮助将不胜感激。

my website with problems

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreact-devtoolsreactjsreactjsreactjsreactjs