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?

score 14 · Answer 1 · edited Oct 28 '14 at 12:20

14

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.

edited Oct 28 '14 at 12:20

Fabio Antunes

22,251
15
81
96

answered Sep 01 '14 at 03:41

obiuquido144

623
7
9

BTW, I had the same problem using Sencha Touch 1 and weinre, and this solution solved it too. It was weird as I could see some of the styles, but not all of them. After applying above function in index.html all styles showed up - a million thanks :) – Philip Murphy Apr 21 '15 at 17:12

score 1 · Answer 2 · answered Dec 20 '13 at 16:50

1

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

answered Dec 20 '13 at 16:50

Jeff Hubbard

9,822
3
30
28

what is AngularJS doing then that's causing it to break? :S – chinabuffet Dec 20 '13 at 19:49
1

It appears to be the [ng-cloak], etc. styles. – Jeff Hubbard Dec 20 '13 at 21:32

score 1 · Answer 3 · answered Nov 26 '15 at 18:38

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

Weinre style inspection not working with AngularJS

3 Answers3