Weinre style inspection not working with AngularJS - 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.

Answer 3

I know this issue is old but I've come across the same one when debugging under Internet Explorer 11. I've updated the previous whackWebkitMatchesSelector to include the IE case:
function whackWebkitMatchesSelector() {
var oldMatches;
if (Element.prototype.msMatchesSelector) {
oldMatches = Element.prototype.msMatchesSelector;
Element.prototype.msMatchesSelector = function(selector) {
try { return oldMatches.call(this, selector); }
catch (err) { return false; }
};
} else if (Element.prototype.webkitMatchesSelector) {
oldMatches = Element.prototype.webkitMatchesSelector;
Element.prototype.webkitMatchesSelector = function(selector) {
try { return oldMatches.call(this, selector); }
catch (err) { return false; }
};
}
}
whackWebkitMatchesSelector();