0

I'm trying develop with angularjs, a custom devtool chrome panel that list network calls :

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

The listener work properly and the self.callData array is filled.

In Html file I would like to see the list of "endpoint" by:

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

or a simple {{callData}} but it doesn't work :(

neither a $watch became usefull:

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

I'm forced to run self.charge() (that actually don't do anything) to see something in my Html page and that run me crazy!! I've really no idea, any suggestion is more than appreciated, thank's

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Francesco Giunta
  • 1

1 Answers1

0

Finally I find a "Dirty" solution by this:

AngularJS. How to call controller function from outside of controller component

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

There is something in chrome.devtools.network.onRequestFinished.addListener preventing angular binding or similar. Looking for contribution for more elegant solution!

Francesco Giunta
  • 1