Dom Timeline

DOM Breakpoints Click here for more details.

As soon as you will start recording, DOM Timeline offers you the opportunity to break into javascript whenever a specific kind of change happens. This is useful for debugging purposes.

You can use any javascript code to determine when to break into an event, and explore the "m" variable, which is a mutation record. In addition, you can use m.claim (a string that represents how this mutation was being executed) and m.stack (the javascript callstack at the time of the change).

Examples of things you can do (and their convenient shortcut, if any):

ATTRIBUTES: Detect changes of the style attribute on an element whose id is "abc"

if(attributeChanged('style') && matches('#abc', m.target)) { debugger; }

if(m.type == 'attributes' && m.target && m.target.id == 'abc' && m.attributeName == 'style') { debugger; }

ATTRIBUTES: Detect when the 'selected' class is added to an element

if(attributeChanged('class', {newlyContains:'selected'})) { debugger; }

if(m.type == 'attributes' && m.attributeName == 'class' && (!m.oldValue || m.oldValue.indexOf('selected') == -1) && (m.newValue && m.newValue.indexOf('selected') >= 0)) { debugger; }

ATTRIBUTES: Detect when the 'tabindex' attribute is added to an element

if(attributeChanged('class', {oldValue:null})) { debugger; }

if(m.type == 'attributes' && m.attributeName == 'tabindex' && m.oldValue == null) { debugger; }

NODES: Detect when a node with a given id is removed from the document

if(anyRemovedNode(n => n.id=='abc', { deep: false })) { debugger; }

if(m.removedNodes && m.removedNodes.length && [].slice.call(m.removedNodes, 0).some(n => n.id=='abc').length) { debugger; }

NODES: Detect when a node with a given id is added to the document

if(anyAddededNode(n => n.id=='abc', { deep: false })) { debugger; }

if(m.addedNodes && m.addedNodes.length && [].slice.call(m.addedNodes, 0).some(n => n.id=='abc').length) { debugger; }

NODES: Detect when a node with a given html content is added to the document

if(anyAddededNode(n => n.innerHTML.indexOf('Microsoft')>=0, { deep: false })) { debugger; }

if(m.addedNodes && m.addedNodes.length && [].slice.call(m.addedNodes, 0).some(n => n.id=='abc').length) { debugger; }

NODES: Detect when any change happens within a link without href

if(closest('a', m.target, link => !link.href)) { debugger; }

//if(true) { debugger; };
    
function closest(selector, node, converter) {
    while(node && !matches(selector, node)) {
        node = node.parentNode;
    }
    return node ? converter(node) : node;
}

function matches(selector, node) {
    var matches = node.matches || node.webkitMatchesSelector || node.mozMatchesSelector || node.msMatchesSelector || function() { return false };
    return matches.call(node, selector);
}

function attributeAdded(name) {
    return m.type == 'attributes' && m.newValue != null && m.oldValue == null;
}

function attributeRemoved(name) {
    return m.type == 'attributes' && m.newValue == null && m.oldValue != null;
}

function attributeChanged(name, options) {
    var matches = m.type == 'attributes';
    matches = matches && (name===undefined || (m.attributeName === name));
    matches = matches && (options.newValue===undefined || (m.newValue === options.newValue));
    matches = matches && (options.newValueContains===undefined || (m.newValue && m.newValue.indexOf(options.newValueContains) >= 0));
    matches = matches && (options.oldValue===undefined || (m.oldValue === options.oldValue));
    matches = matches && (options.oldValueContains===undefined || (m.oldValue && m.oldValue.indexOf(options.oldValueContains) >= 0));
    matches = matches && (options.newlyContains===undefined || (
        (!m.oldValue || m.oldValue.indexOf(options.newlyContains) == -1) 
        && (m.newValue && m.newValue.indexOf(options.newlyContains) >= 0)
    ));
    matches = matches && (options.previouslyContained===undefined || (
        (!m.newValue || m.newValue.indexOf(options.previouslyContained) == -1) 
        && (m.oldValue && m.oldValue.indexOf(options.previouslyContained) >= 0)
    ));
    return matches;
}

Return to the top of settings