How to setup a common debug window in ionic/angularjs

Question

I would like to have a place to put common debug information while developing an ionic app. The main reason is to have a common place for the debug info an not have to look around for this info in platform specific places. So whether I'm in an iOS or Androis emulator I can see the debug info in the same place.

I have added a "debug" page in the side menu for this purpose. I am having difficulting figuring out how to add information to this page from different places (i.e. start page, deail page etc.) in the app.

I have a template "debug.html" with a div container, where I would like to add the debug info.

How do I add the info to the div container in the "debug.html" from anywhere in the app?

tuks · Accepted Answer · 2016-01-23 14:08:37Z

1

You can create a service which would hold an array of debug information and display that information in your debug.html template. A quick example:

app.service('debug', function(){
  this.messages = [];
  this.add = function(message){
    this.messages.push(message);
  }
});

And in your template:

<div ng-repeat="message in debug.messages">{{message}}</div>

of course, inject the service in the template controller:

app.controller('debugController', function(debug) {
  this.debug = debug;
});

So in, for example, start page, you could add debug info like this:

app.controller('startPageController', function(debug, ...){
    debug.add("Start page controller initiated.");
    ...
});

answered Jan 23, 2016 at 14:08

tuks

8003 gold badges12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cw24 Over a year ago

Thanks this works well. I did have to tweak one thing, though. in the template I added "tracked by $index" to prevent a "Duplicates in a repeater are not allowed" error. docs.angularjs.org/error/ngRepeat/dupes

tuks Over a year ago

@cw24 Glad I helped, this was just a quick example, although it's "track by" instead of "tracked by"

Collectives™ on Stack Overflow

How to setup a common debug window in ionic/angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related