How to debug scripts retrieved by RequreJS in Chrome

Question

I am using a third party plugin which calls scripts using RequireJS. I want to debug e.g. setting breakpoints in those scripts but they didn't show up in the script tab of Chrome's developer tools.

Is there anyway for me to perform the debugging in chrome?

Are require calls dynamic? or are they required on page load? — Joseph, Jun 05 '12 at 06:04
Writing a [mock](http://stackoverflow.com/questions/11439540/) seems to be the best solution. — Paul Sweatte, Aug 22 '12 at 21:42

score 0 · Answer 1 · answered Jan 30 '14 at 02:36

The only difficulty in debugging modules loaded with RequireJS is that if a module is loaded only if conditions X happens and this condition does not exist when the application is first loaded, you have to wait until the condition occurs before you can put breakpoints on the module's code.

For instance if you want to debug the function bar in module foo and foo is loaded like this:

if (X) {
    require(["foo"], function (foo) {
        foo.bar();
    });
}

You'd have to trigger condition X before you can start adding breakpoints inside foo.bar. Most likely, you'd want to put a breakpoint at the location of the foo.bar() call so that you have the opportunity to add a breakpoint inside foo.bar.

This is true in Chrome and Firefox, and probably in other browsers that offer debugging facilities.

How to debug scripts retrieved by RequreJS in Chrome

1 Answers1