Debug angular app from outside (browser console only)

Question

I have this angular website which for some reason cannot be debugged when everything is concat together (not minified). Fo example, if I try to set a breakpoint, the breakpoint is placed somewhere else (at the bottom of an other file) :(

So, to overcome this I would like to set a breakpoint using the browser console (if possible of course).

In my current situation I need to set a breakpoint inside a service method. So I figured, I need the reference holding that service. But where does angular keep those. For example, I tried this

$> var myApp = angular.module('myApp');
$> debug(myApp.injector('someSevice').someMethod);

If this would work, I would expect the debugger to kick in when someMethod is called.

Here is an other failed attempt:

$> myApp.run((someService) => { debug(someService.someMethod)});

Any help on how to do this would be appreciated?

UPDATE: Find a way to access a service

$> angular.injector(['myApp']).get('someService').someMethod

However, in my case, this function is called initially only

Answer 1

If you're trying to debug a live production app, there might be a chance where the debug info is disabled for the website which is actually done to increase performance of the website. So use angular.reloadWithDebugInfo(); in console and then try to debug.