CODEWITHSUNDEEP
javascriptwindows-8touchdom-eventsinternet-explorer-10
Marcy Sutton
Marcy Sutton

Reputation: 917

How can I debug MSPointer events in IE10 when console.dir only outputs "[object Object]"?

I am having a bitch of a time debugging the new event object model in IE10. Since Microsoft changed the event model, code bound for "touchstart" throws errors when it encounters event.originalEvent.touches[0].target. Ok, fine. But I can't inspect the properties of their new MSPointer event object to make it work their way: for some reason IE10 only outputs [object Object] from console.log and "[object Object]" from console.dir.

WHY? (does anyone know?)

I heard that console.log(JSON.stringify(obj)) outputs properties, and it does--except for event objects, since they are really functions. GREAT!

Here is the crux of my question: does anyone have tips on how to debug event properties when binding MSPointerDown for touch events? Is there a setting I have to enable somewhere to get it to log useful information?

Here is some sample code:

$('body').bind( ( window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart" ), function (event) {
        console.dir(event);
        // outputs "[object Object]" in IE10
 });

Note: I also tried Firebug Lite from a bookmarklet but it won't allow Script output from my remote VM.

Upvotes: 1

Views: 774

Answers (2)

Marcy Sutton
Marcy Sutton

Reputation: 917

I ended up setting a breakpoint and using the debugging tool in IE. For example:

$('body').bind( ( window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart" ), function (event) {
    debugger;
});

Then in F12 Developer Tools with the page open, go to the Script tab and click "Start debugging". Interact with the page to trigger the event handler. The code should be stopped at your breakpoint; go to the "Locals" tab and start inspecting. From here I can see all the properties in the event object, among others. It's stupid that this is required but it's how I got things figured out.

enter image description here

Upvotes: 0

Esailija
Esailija

Reputation: 140234

I wrote a quick logging function, try it here:

http://jsfiddle.net/V28zY/3/

JSFiddle code:

function ownKeys(obj) {

    var o = {};
    for (var key in obj) {
        o[key] = true;
    }
    try {
        Object.getOwnPropertyNames(obj).forEach(function (k) {
            o[k] = true;
        });
    } catch (e) {}
    var ret = [];
    for (var key in o) {
        ret.push(key);
    }
    return ret;
}

function logObject(obj, indent, seen) {
    var seen = seen || [];
    var indent = indent || 0;

    ownKeys(obj).slice(0, 50).sort().forEach(function (key) {
        var value = obj[key];


        if (Object(value) === value) {
            if (typeof value === "function") {
                console.log(Array(indent * 4 + 1).join(" ") + key, " = ", "[Function]");
            } else if (value.appendChild) {
                console.log(Array(indent * 4 + 1).join(" ") + key, " = ", "[DOMNode]");

            } else if (seen.indexOf(value) === -1 && value !== obj && value !== window) {
                console.log(Array(indent * 4 + 1).join(" ") + key + ":");
                seen.push(value);
                logObject(value, indent + 1, seen);
            } else {
                console.log(Array(indent * 4 + 1).join(" ") + key, " = ", "[Recursion]");
            }
        } else {
            console.log(Array(indent * 4 + 1).join(" ") + key, " = ", JSON.stringify(value));
        }
    });
}

$('body').bind((window.navigator.msPointerEnabled ? "MSPointerDown" : "touchstart"), function (event) {
    logObject(event);
});

Upvotes: 1

Related Questions