Weinre 风格检查不适用于 AngularJS答案

【问题标题】：Weinre style inspection not working with AngularJSWeinre 风格检查不适用于 AngularJS
【发布时间】：2014-01-09 10:10:39
【问题描述】：

我正在尝试使用 Weinre 调试 AngularJS 应用程序，但样式检查不起作用。我可以使用 Weinre 来选择页面上的元素，但它从不显示来自 CSS 选择器的相关样式信息。我已将范围缩小到在分页符 Weinre 样式检查中仅包含 AngularJS（我使用的是 1.2.5 版）。我在网上找到了一些关于 Weinre 不使用 AngularJS (https://issues.apache.org/jira/browse/CB-2651) 的参考资料，但 JIRA 说它已经解决了。有什么想法吗？

【问题讨论】：

标签： angularjs weinre

【解决方案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 中所建议的那样我现在可以检查大多数（可能不是全部）样式。

【讨论】：

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

【解决方案2】：

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

【讨论】：

AngularJS 在做什么导致它崩溃？ :S
好像是[ng-cloak]等样式。

【解决方案3】：

我知道这个问题很老，但我在 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();

【讨论】：