angularjs - Weinre 风格检查不适用于 AngularJS

Question

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

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

Answer 2

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

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