React: 错误:长时间悬停后,DevTools DOM高亮显示卡住了

创建于 2020-01-16  ·  6评论  ·  资料来源: facebook/react

重现步骤

  1. 将鼠标悬停在DevTools中
  2. 持续将鼠标悬停一秒钟左右
  3. 快速将光标移出DevTools,无需悬停其他任何内容

预期:DOM突出显示消失。
实际:DOM高亮显示卡住了。

Developer Tools Bug

最有用的评论

在Twitter上提到了这一点,但我浏览了devtools的源代码,以了解它们如何处理鼠标移动并突出显示DOM元素。

看起来devtools更新其悬停状态的主要位置是在_onmousemove处理程序中。 该函数依次调用_highlightTreeElement ,有趣的是,其他任何事件处理程序均未引用

其他一些方法( _onfocusout_onmouseleave_ondragstart_reset )调用SDK.OverlayModel.hideDOMNodeHighlight() ,顾名思义,该方法将删除从主页突出显示。

编辑:忘记提及我想调出不同的事件处理程序集,因为itemData的当前实现目前似乎绑定到onMouseMoveonMouseLeave 。 devtools观察到的额外事件可能还会使事情变得更稳健,如果您拖累或更关注焦点更改处理。

所有6条评论

一种更简单的触发方式:

  1. 单击以在“组件”树中选择一个元素
  2. 将鼠标移至DevTools之外
  3. 单击向上或向下箭头

现在,高亮显示将“粘住”,直到您专注于DevTools中的其他内容为止。

TBH在我心中这是预期的行为,因为只要悬停或聚焦本机元素,它就与浏览器的“元素”面板的行为匹配。 1个

如果愿意,我们可以在几秒钟后通过更新Tree ...启用自动隐藏功能。
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223

...也像SelectedElement一样传递hideAfterTimeout: true ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89

1两者之间的一个小但可能重要的区别是,本机元素面板似乎没有将“卡住”的突出显示留在鼠标上。 也许更可靠地检测鼠标是否离开了整个开发人员工具的界限? 也许我们可以更好地做到这一点?

因为突出显示不会停留在Firefox上,所以它在Firefox和Chrome之间的预期行为是否不一致。

两者之间的一个小但可能重要的区别是,本机元素面板似乎没有在鼠标上留下“卡住”的突出显示。

我不确定我是否理解-这正是我提出的问题。 :-)是的,我认为这是一个重要的区别。 我每天都在碰这个问题。

...还传递hideAfterTimeout:true就像SelectedElement一样...

听起来好像几秒钟后总是会删除高亮显示。 因此它将解决此问题,但会使其他情况更糟。 这对我来说似乎不是一个可以接受的解决方案。

理想情况下,当我将光标放在DevTools之外的那一刻

我了解有些情况,例如“如果我继续使用键盘该怎么办”,但我并不是一直都在打。 相比之下,打这个特定的错误(鼠标移开时不一致复位高亮)每天都有很多次。

我在这里呆了半个小时,对于事件为何不触发,我什至没有一个遥远的想法。 让我们问一下推特。 https://twitter.com/dan_abramov/status/1222178476817633282

在Twitter上提到了这一点,但我浏览了devtools的源代码,以了解它们如何处理鼠标移动并突出显示DOM元素。

看起来devtools更新其悬停状态的主要位置是在_onmousemove处理程序中。 该函数依次调用_highlightTreeElement ,有趣的是,其他任何事件处理程序均未引用

其他一些方法( _onfocusout_onmouseleave_ondragstart_reset )调用SDK.OverlayModel.hideDOMNodeHighlight() ,顾名思义,该方法将删除从主页突出显示。

编辑:忘记提及我想调出不同的事件处理程序集,因为itemData的当前实现目前似乎绑定到onMouseMoveonMouseLeave 。 devtools观察到的额外事件可能还会使事情变得更稳健,如果您拖累或更关注焦点更改处理。

此页面是否有帮助?
0 / 5 - 0 等级