Technique for debugging Three.js

Question

I have a Three.js page that I'd like to update from r42 to r55. A fair amount of the API has changed in that time.

Some of these changes were straightforward, but now I'm stuck on some gnarly details of the JSONLoader, for which the format has changed from JavaScript to JSON and possibly other changes are causing it to fail. An undefined value is tripping up the API somewhere internally, and I can't tell what the issue is because the top few layers of the stack are in minified code.

What technique works best for getting the full source here? Are there source maps available?

I tried swapping the three.min.js file for Three.js, however the minified file contains many other files too. I don't like the idea of having to load all those files into my workspace and reference each of them just to debug a single issue for a minute.

Is there a single file that contains the non-minified equivalent of three.min.js? Is there another approach that would work just as well?

---

EDIT So I'm cloning the three.js repo to get the source files, and will end up with a bunch of HTML like this:

<script type="text/javascript" src="three.js/src/Three.js"></script>
<script type="text/javascript" src="three.js/src/core/Object3D.js"></script>
<script type="text/javascript" src="three.js/src/core/Geometry.js"></script>
...

The repo is ~200MB and is taking an age to clone. There's no way to do partial clones with Git, apparently.

There has to be an easier way!

Answer 1

Actually that is what I do when I want to debug my code. Swap out three.min.js and put in three.js. The minified version contains the same code.

The non-minified version of the file is under version control:

https://github.com/mrdoob/three.js/tree/master/build

Answer 2

1. use non-minified builds
2. look at the commented out debugging points already present in three.js (i.e. console.log)
3. 'use strict' if not already
4. add more console.log/debugs