How to debug a blank page error (caused by UI-Router)?

Question

I just wondering does anybody know how to debug situation when you have blank page for UI-Router. (Of course, without any errors in console)

By doing console.log for router events(take from here) I found you that it went to correct state but after did not stop on breakpoint inside state controller that I specified in UI-Router state:

.state('invited-user', {
   parent: 'authPublic',
    url: '/users/invitation/accept?back_link&invitation_token',
    templateUrl: 'auth/invited-form.html',
    controller: 'InvitedUserController',
    data: {
      hidePageNavigation: true
    }
}) 

so I guess that controller is a problem. Already tried to mock it:

.state('invited-user', {
   parent: 'authPublic',
    url: '/users/invitation/accept?back_link&invitation_token',
    templateUrl: 'auth/invited-form.html',
    controller: function(){
      debugger
    },
    data: {
      hidePageNavigation: true
    }
})  

but without any result, unfortunately.

I look for solution for current issue and general approach how to debug such kind of situations in general.

Answer 1

So I came to conclusion that the logic of debug should be so:

1. console.log router events (code is here) to check router logic
2. check the template of current router state (mock it if needed)
3. check the controller of current state (mock with empty function if needed)
4. check all templates and controllers of parent states from current one, starting from nearest parent and going up.

Actually it would be nice to have exception from box to see exact problem, but unfortunately we have what we have.