Weinre样式检查在AngularJS中无法工作。

Question

我正在尝试使用Weinre调试一个AngularJS应用程序，但是样式检查不起作用。我可以使用Weinre选择页面上的元素，但它从未显示来自CSS选择器的相关样式信息。我已经缩小范围，发现只要在页面上包含AngularJS（我使用的版本是1.2.5），就会破坏Weinre样式检查。我在网上找到了一些关于Weinre与AngularJS不兼容的参考资料（https://issues.apache.org/jira/browse/CB-2651），但JIRAs表示该问题已得到解决。有什么想法吗？

- chinabuffet

Answer 1

请在页面早期包含以下函数并运行：

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

如https://issues.apache.org/jira/browse/CB-6161所建议的那样，我现在可以检查大多数（可能不是全部）样式。

- obiuquido144

---

顺便说一句，我在使用Sencha Touch 1和weinre时也遇到了同样的问题，这个解决方案也解决了它。很奇怪，因为我能看到一些样式，但不是全部。在index.html中应用上述函数后，所有样式都显示出来了 - 非常感谢 :) - Philip Murphy

Answer 2

我知道这个问题旧了，但在Internet Explorer 11下调试时遇到了相同的问题。我已更新之前的whackWebkitMatchesSelector以包括IE情况：

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

- Yann Leflour

Answer 3

他们通过捕获异常并继续执行来“修复”它。显然，这个问题是由于（webkit认为的）无效的CSS选择器引起的。

- Jeff Hubbard

---

AngularJS到底做了什么导致它崩溃了？:S - chinabuffet

看起来是[ng-cloak]等样式。 - Jeff Hubbard