检查div的样式，仅在按下鼠标按钮时出现

Question

在页面中我有一个div，当我按住鼠标按钮时会添加JS，并在按钮释放后立即删除。 （它是JQuery draggable的一部分）

是否可以在Firefox或Chrome（或其他一些）开发人员工具中检查此div的样式？

额外积分，如果回答不建议修改代码。

编辑：当div不可见时（未按下鼠标按钮），它根本不在DOM中。

Answer 1

是， 您可以做一件事：在要检查的浏览器上呈现页面，然后转到浏览器开发人员工具的控制台选项卡（检查元素），然后执行如下所示的javascript：

var targetNode = document.querySelector ("div");
if (targetNode) {
    /*--- Simulate a natural mouse-click sequence. Keep open any one line at a time based on the event you want to test. */
    triggerMouseEvent (targetNode, "mousedown");
    //triggerMouseEvent (targetNode, "mouseup");
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

在上面给出的代码中，您可以在IF条件中一次注释和取消注释这两行，以触发mousedown事件或mouseup事件。

当您执行代码时，您可以在该特定事件的浏览器中检查其样式。

希望这符合您的目的。