Google Chrome: 如何在按住鼠标按钮的同时观察 DOM 的状态

Question

在我的 DOM 中，我有许多 SVG 矩形（每个都在一个单独的中），只要用户单击（使用 d3.js 拖动事件），它们的大小就会增加。大小从 2px 增加到 20px。它有效，一切都很好 - 但是：

我有一个 QUnit 测试来测试尺寸是否正确，它目前显示为红色，告诉我尺寸保持在 2px。

我试图在 DOM-Inspector 中检查实际大小，但是当我点击矩形触发事件时，它的组在 DOM-Inspector 中崩溃了，我无法查看。如果我松开鼠标，该组会再次扩大，但又是原来的状态，我不想检查。

我想查看鼠标被点击时DOM的状态。有没有办法立即停止执行？

我已经尝试使用 Event-Listener-Breakpoints 和元素状态 :active/:focus 等，但没有成功。

提前致谢！
凯夫

Answer 1

再将一个 mousedown 事件处理程序附加到您的元素。在此事件处理程序期间，您可以继续进行测试。只需确保此处理程序在将更改应用于元素的处理程序之后执行即可。

对于 QUnit，您可以使用 var done = assert.async() 来获取您将在测试完成时调用的函数。在回调结束时，只需调用 done.

例如（使用jQuery）：

$('#element')
   .on('mousedown', function () { $(this).css({color:'red'}); })
   .on('mouseup', function () { $(this).css({color:'blue'}); })
   .on('mousedown', function () { 

          // this is the second callback I am talking about

          // make your tests...
          console.log($(this).css('color')) 

          // now it is done, call "done()"

   })

将记录红色。

Google Chrome: 如何在按住鼠标按钮的同时观察 DOM 的状态

Google Chrome: How can I watch the state of the DOM while holding the mouse button

javascript

svg

dom

d3.js