时间戳

首页 > 解决方案 > angularJS 自定义 chrome devtools 网络

angularjs - angularJS 自定义 chrome devtools 网络

问题描述

我正在尝试使用 angularjs 进行开发，这是一个列出网络调用的自定义 devtool chrome 面板：

function devToolCtrl($scope, $http) {

  self = $scope;

  self.callData = [];
  self.call = {};
  let i = 0;

  chrome.devtools.network.onRequestFinished.addListener(function (data) {
    data.getContent(function (content) {
      if (data._resourceType == "xhr") {
        if (data.response.status !== 0) {
          let endpoint = data.request.url.substr(data.request.url.lastIndexOf("/") + 1);
          let call = { id: i, endpoint: endpoint, requMeta: data, response: content };
          self.callData.push(call); 
          i++;
        }
      }
    })
  });

  self.clear = function () {
    self.callData = [];
    console.log('AFTER!', self.callData);
  }

  self.charge = function () {
    console.log('CHARGED!', self.callData);
  }
};

angular
  .module('devToolDecript', [])
  .controller('devToolCtrl', devToolCtrl);

侦听器正常工作，并且self.callData数组已填充。

在 Html 文件中，我想通过以下方式查看“端点”列表：

<li ng-repeat="call in callData | filter:search ">

或简单 {{callData}}但不起作用:(

$watch 都没有用：

self.$watch('dataArray', function () {
console.log('UPDATE!', self.dataArray);
}, true);

我被迫运行self.charge()（实际上什么都不做）在我的 Html 页面中看到一些东西，这让我发疯了！我真的不知道，任何建议都非常感谢，谢谢

标签： angularjsgoogle-chrome-devtools

解决方案

最后我找到了一个“肮脏”的解决方案：

角JS。如何从控制器组件外部调用控制器功能

chrome.devtools.network.onRequestFinished.addListener(function (d) {
  d.getContent(function (c) {
    if (d._resourceType == "xhr") {
      if (d.response.status !== 0) {
        let e = d.request.url.substr(d.request.url.lastIndexOf("/") + 1);
        let call = { endpoint: e, meta: d, content: c };
        var scope = angular.element(document.getElementById("devToolCtrl")).scope();
        scope.$apply(function () {
          scope.dataArray.push(call);;
        });
      }
    }
  })
});

有一些东西可以chrome.devtools.network.onRequestFinished.addListener防止角度绑定或类似的东西。寻找更优雅的解决方案的贡献！

推荐阅读