Checking style of div, that appears only while mouse button is pressed

Question

In the page I have a div, that is added with JS while I am holding the mouse button, and is removed as soon, as button is released. (It is part of JQuery draggable)

Is it possible to check the styles of this div in Firefox or Chrome (or some other) developer tools?

Extra points, if answer will not suggest to modify the code.

EDIT: When div is not visible (mouse button is not pressed), it is not in DOM at all.

Answer 1

yes, You can do one thing: get the page rendered on the browser you want to check with, then go to console tab of the browser's developer tool (inspect element) and then execute javascript like written below:

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);
}

In above-given code, you can comment and uncomment those two lines inside IF condition one at a time to trigger either mousedown event or mouseup event.

And as you execute the code, you can check its style in browser at that particular event.

Hope this will serve your purpose.