Weinre style checking does not work with AngularJS

Question

I am trying to use Weinre to debug an AngularJS application, but style checking does not work. I can use Weinre to select elements on a page, but it never displays related style information coming from CSS selectors. I narrowed it down by simply enabling AngularJS (I'm using version 1.2.5) on the page breaks the Weinre style check. I found some links online so that Weinre does not work with AngularJS ( https://issues.apache.org/jira/browse/CB-2651 ), but JIRA says that it is allowed. Any ideas?

Answer 1

Turn on the following function and run it at an early stage:

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 stated in https://issues.apache.org/jira/browse/CB-6161 Now I can check most (maybe not all) styles.

Answer 2

They "fixed" this by catching the exception and continuing. The problem seems to be caused (as webkit thinks) by invalid CSS selectors.

Answer 3

I know this problem is outdated, but I ran into it when debugging in Internet Explorer 11. I updated the previous whackWebkitMatchesSelector to include IE code:

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