谷歌浏览器:如何在按住鼠标按钮的同时观察 DOM 的状态

Question

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

我有一个 QUnit 测试，测试大小是否正确，它目前呈红色运行，告诉我大小保持在 2px。

我试图在 DOM 检查器中检查实际大小，但是一旦我单击矩形以触发事件，它的组就会在 DOM 检查器中折叠，我无法查看。如果我释放鼠标，组会再次展开，但它又是原始状态，我不想检查。

我想查看单击鼠标时 DOM 的状态。有什么方法可以立即停止执行吗？

我已经尝试使用事件侦听器断点和元素状态：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()"
   })

将记录红色。