...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.
9条答案
按热度按时间58wvjzkj1#
触发此操作的简便方法:
现在高亮将保持“粘住”,直到您在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
。mcvgt66p2#
无论预期行为如何,Firefox和Chrome之间的行为都是不一致的,因为高亮不会停留在Firefox上。
bt1cpqcv3#
两个之间的一个小但可能重要的差异是,原生元素面板似乎不会在鼠标移出时留下"卡住"的高亮显示。我不确定我是否理解——这正是我提出问题的原因。所以,是的,我认为这是一个重要的差异。我每天都会遇到这个问题。
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.
doinxwow5#
我在这里花了半个小时,但我甚至没有一个远程的想法来解释为什么事件不会触发。让我们问问推特吧。 $x_{1e0f1}^{x}$
f0ofjuux6#
我提到了这个 on Twitter ,但是我深入研究了 devtools 的源代码,以了解它们是如何处理鼠标移动和高亮 DOM 元素的。
看起来 devtools 主要更新悬停状态的地方是在它们的 _onmousemove 处理器中。这个函数反过来调用 _highlightTreeElement ,有趣的是,它没有被其他任何事件处理器引用。
还有一些其他方法(
_onfocusout
、_onmouseleave
、_ondragstart
和_reset
)调用SDK.OverlayModel.hideDOMNodeHighlight()
,正如其名称所暗示的那样,它会从主页面上移除高亮显示。编辑:忘了提一下,我想特别指出这组不同的事件处理器,因为当前的 itemData 实现似乎绑定到了
onMouseMove
和onMouseLeave
。devtools 观察到的额外事件也可能使事情变得更加健壮,如果你担心拖拽或更多的焦点变化处理问题的话。yzckvree7#
这是一个非常烦人的问题。有什么办法可以"清除"它吗?当我在React开发者工具和元素选项卡之间切换时,它多次卡住。
o2g1uqev8#
或者只是能够完全禁用DOM高亮就太棒了。
x6492ojm9#
我的系统在遇到火焰图并悬停在一个大型组件上的节点轨迹时会停止运行。由于DOM节点的高亮显示,Chrome在几秒钟内完全无响应。我已经关闭了Chrome上悬停时的元素高亮显示,但无法为React Dev Tools执行相同的操作。