react Bug: DevTools DOM高亮在长时间悬停后卡住 翻译结果:Bug: DevTools的DOM高亮在长时间悬停后卡住,

pinkon5k  于 4个月前  发布在  React
关注(0)|答案(9)|浏览(63)

重现步骤

  1. 在DevTools中悬停一个组件
  2. 保持悬停大约一秒钟
  3. 快速将光标移出DevTools,同时不悬停其他任何东西
    预期结果:DOM高亮消失。
    实际结果:DOM高亮卡住了。
58wvjzkj

58wvjzkj1#

触发此操作的简便方法:

  1. 在组件树中点击以选择一个元素
  2. 将鼠标移出DevTools
  3. 点击上下箭头
    现在高亮将保持“粘住”,直到您在DevTools中聚焦于其他内容。
    老实说,这是我心目中的预期行为,因为它与浏览器的Elements面板相匹配,只要原生元素被悬停或聚焦。
    如果我们想的话,我们可以通过更新Tree ...
    react/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
    第207行到第223行
    | | consthighlightNativeElement=useCallback( |
    | | (id: number)=>{ |
    | | constelement=store.getElementByID(id); |
    | | constrendererID=store.getRendererIDForElement(id); |
    | | if(element!==null&&rendererID!==null){ |
    | | bridge.send('highlightNativeElement',{ |
    | | displayName: element.displayName, |
    | | hideAfterTimeout: false, |
    | | id, |
    | | openNativeElementsPanel: false, |
    | | rendererID, |
    | | scrollIntoView: false, |
    | | }); |
    | | } |
    | | }, |
    | | [store,bridge], |
    | | ); |
    ...也像SelectedElement那样传递hideAfterTimeout: true
mcvgt66p

mcvgt66p2#

无论预期行为如何,Firefox和Chrome之间的行为都是不一致的,因为高亮不会停留在Firefox上。

bt1cpqcv

bt1cpqcv3#

两个之间的一个小但可能重要的差异是,原生元素面板似乎不会在鼠标移出时留下"卡住"的高亮显示。我不确定我是否理解——这正是我提出问题的原因。所以,是的,我认为这是一个重要的差异。我每天都会遇到这个问题。

pb3skfrl

pb3skfrl4#

...to also pass hideAfterTimeout: true like SelectedElement does...
That sounds like it would always remove the highlighting after a few seconds. So it would solve this issue, but by making the other case worse. That doesn't seem like an acceptable solution to me.
Ideally, all I want is for highlighting to reliably be removed the very moment I put my cursor outside the DevTools. Just like the native one does.
I understand there are edge cases like "what if I keep using the keyboard" but I'm not hitting them all the time. By contrast, I am hitting this particular bug (inconsistently reset highlighting on mouseout) every day many times.

doinxwow

doinxwow5#

我在这里花了半个小时,但我甚至没有一个远程的想法来解释为什么事件不会触发。让我们问问推特吧。 $x_{1e0f1}^{x}$

f0ofjuux

f0ofjuux6#

我提到了这个 on Twitter ,但是我深入研究了 devtools 的源代码,以了解它们是如何处理鼠标移动和高亮 DOM 元素的。
看起来 devtools 主要更新悬停状态的地方是在它们的 _onmousemove 处理器中。这个函数反过来调用 _highlightTreeElement ,有趣的是,它没有被其他任何事件处理器引用。
还有一些其他方法( _onfocusout_onmouseleave_ondragstart_reset )调用 SDK.OverlayModel.hideDOMNodeHighlight() ,正如其名称所暗示的那样,它会从主页面上移除高亮显示。
编辑:忘了提一下,我想特别指出这组不同的事件处理器,因为当前的 itemData 实现似乎绑定到了 onMouseMoveonMouseLeave 。devtools 观察到的额外事件也可能使事情变得更加健壮,如果你担心拖拽或更多的焦点变化处理问题的话。

yzckvree

yzckvree7#

这是一个非常烦人的问题。有什么办法可以"清除"它吗?当我在React开发者工具和元素选项卡之间切换时,它多次卡住。

o2g1uqev

o2g1uqev8#

或者只是能够完全禁用DOM高亮就太棒了。

x6492ojm

x6492ojm9#

我的系统在遇到火焰图并悬停在一个大型组件上的节点轨迹时会停止运行。由于DOM节点的高亮显示,Chrome在几秒钟内完全无响应。我已经关闭了Chrome上悬停时的元素高亮显示,但无法为React Dev Tools执行相同的操作。

相关问题