Debugging/finding scripts loaded by RequireJS

Question

I have just started using RequireJS to load the scripts for my page, but have hit a roadblock when trying to debug a problem using chrome.

Let's say that I have my main script that relies on two dependencies: dep1 and dep2

require(["dep1", "dep2"], function(dep1, dep2) {
    //do something
});

Whilst running unit tests I notice that something in dep1.js isn't working correctly, so I open up chrome dev tools to insert a breakpoint, except...

...dep1.js doesn't exist!

How do I locate the source file to insert my breakpoint?!

I am sure that the files are being loaded as the scripts are being run correctly. I just can't see them in the list of sources

Answer 1

Finally realised the problem was that I was using r.js instead of require.js. As soon as I switched I could see the files without a problem.

As an aside, a temporary work-around was to insert the line below at the end of the inserted files. This just about gets chrome to pick up on the files.

//@ sourceURL=GameWorldAction.js

Answer 2

You never close your array in your example above.

require(["dep1", "dep2", function(dep1, dep2) {
    //do something
});

Should be:

require(["dep1", "dep2"], function(dep1, dep2) {
    //do something
});

Edit in Response to Update to Question:

I am assuming r.js is the RequireJs file. It looks like RequireJS is not loading the files correctly, if it had then the files would've shown up in your inspector.

Are you using the data-main attribute on your script tag to specify a main JS file? If so, are the dep1 and dep2 files in the same directory as the main JS file? You might have to specify a different baseUrl if you are trying to load files from a different path or domain. You can change the baseUrl by setting it in the require.config.

<script>
  require.config({
    //path can also be a domain like "//image.mydomain.tld/jscript"
    baseUrl: "/another/path" 
  });
</script>