javascript - Technique for debugging Three.js - Stack Overflow

admin管理员组

文章数量:1391999

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!

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!

• javascript
• debugging
• three.js
• source-maps

Share Improve this question Follow edited Feb 3, 2013 at 20:00 Drew Noakes asked Feb 3, 2013 at 19:04 Drew NoakesDrew Noakes 312k172172 gold badges698698 silver badges765765 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./mrdoob/three.js/tree/master/build

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

本文标签： javascriptTechnique for debugging ThreejsStack Overflow