Firebug / Chrome debugger inside 1-line function

Question

This question is entirely for my own curiosity. So there are a lot of methods in Angular (and probably other frameworks) that are defined anonymously on one line. For example (taken from angular-route.js):

$http.get(templateUrl, {cache: $templateCache}).
    then(function(response) { return response.data; })

I want to set a breakpoint inside the promise callback and inspect what's in response at that point. For the moment I've just been temporarily hacking at the source, which isn't ideal.

This is an odd request, I know, and I'm almost certain the UI doesn't provide for it. But you never know.

Answer 1

I guess what you're actually asking for is to be able to format the code, so it's easy to set the breakpoint right at the return response.data; statement.

The Chrome DevTools have an option for this:

as well as the Firefox DevTools:

In combination with source maps it's possible to debug minified code easily.

For Firebug it is also planned for one of the next versions to integrate code pretty-printing and source maps. See issue 1238 and issue 5765 there.