CODEWITHSUNDEEP
angularjsweinre
chinabuffet
chinabuffet

Reputation: 5598

Weinre style inspection not working with AngularJS

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?

Upvotes: 6

Views: 1145

Answers (3)

Yann Leflour
Yann Leflour

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

Upvotes: 1

obiuquido144
obiuquido144

Reputation: 623

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.

Upvotes: 14

Jeff Hubbard
Jeff Hubbard

Reputation: 9902

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

Upvotes: 1

Related Questions