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...

missing dependencies

...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

Another way to verify / access the loaded sources is via the Network tab in Chrome Developer Tools. You can right-click on the source to view it. — Fuhrmanator
– Fuhrmanator, Commented Nov 17, 2015 at 16:33

Steve Greatrex · Accepted Answer · 2013-01-16 22:24:59Z

4

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

answered Jan 16, 2013 at 22:24

Steve Greatrex

16k5 gold badges62 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robbert van den Bogerd Over a year ago

Quite interesting this was my suggestion one month before you posted this (see below), but not a single upvote..

Steve Greatrex Over a year ago

@RobbertvandenBogerd I don't see any answer besides the one from jeremyawesome. If you mean your comment on that answer then yes, that's true - you should have posted it as a separate answer!

mix3d Over a year ago

@RobbertvandenBogerd +1 upboats from the future!

jeremysawesome · Accepted Answer · 2013-01-16 20:00:43Z

1

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>

edited Jan 16, 2013 at 20:00

answered Jan 16, 2013 at 19:12

jeremysawesome

7,2745 gold badges35 silver badges38 bronze badges

5 Comments

Steve Greatrex Over a year ago

The example was typed directly into SO - the array is closed in the real code. I've updated the question

Steve Greatrex Over a year ago

Yes, I am using the data-main attribute and the files are definitely loading correctly (I can see that because my tests are running). I am actually specifying a separate baseUrl as well as some path mappings but I don't think that's the problem

Steve Greatrex Over a year ago

I hadn't, but (at first glance) that's about scripts disappearing rather than never appearing in the first place. I'll read through though

Robbert van den Bogerd Over a year ago

@jeremysawesome your assumption is wrong, r.js is the requireJS optimizer

jeremysawesome Over a year ago

@RobbertvandenBogerd really it is? Are you sure it's not another random JavaScript file named "r.js"? You can't be sure, you must be assuming that the r.js file is the optimizer. The point is: if r.js was not the RequireJS file then the OP was not including a necessary file. However, in the future, rather than assuming, I will simply ask "are you including the require.js file? Because the screenshot doesn't show it."

Collectives™ on Stack Overflow

Debugging/finding scripts loaded by RequireJS

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related