Weinre style inspection not working with AngularJS

Question

I'm trying to use Weinre to debug an AngularJS application, but the style inspection isn't working. I can use Weinre to select elements on the page, but it never shows the associated style information coming from CSS selectors. I've narrowed it down to simply including AngularJS (I'm using version 1.2.5) on the page breaks Weinre style inspection. I've found a few references online to Weinre not working with AngularJS (https://issues.apache.org/jira/browse/CB-2651) but the JIRAs say that it's resolved. Any ideas?

Answer 1

Include the following function, and run it early on your page:

function whackWebkitMatchesSelector() {
    var oldMatches = Element.prototype.webkitMatchesSelector

    function newMatches(selector) {
        try {
            return oldMatches.call(this, selector)
        }
        catch (err) {
            return false
        }
    }

    Element.prototype.webkitMatchesSelector = newMatches
}

whackWebkitMatchesSelector()

As suggested in https://issues.apache.org/jira/browse/CB-6161 I can now inspect most (probably not all) styles.

Answer 2

They "fixed" it by catching the exception and continuing on. Apparently the issue is caused by (what webkit thinks) are invalid CSS selectors.