调试Three.js的技巧

时间:2013-02-03 19:04:13

标签: javascript debugging three.js source-maps

我有一个Three.js页面,我想从r42更新到r55。相当数量的API在那段时间发生了变化。

其中一些变化很简单,但现在我仍然坚持JSONLoader的一些粗略细节,格式已经从JavaScript变为JSON,可能还有其他变化导致它失败。一个undefined值在内部的某个地方绊倒了API,我无法分辨出问题是什么,因为堆栈的前几层是缩小的代码。

哪种技术最适合在这里获取完整的来源?有source maps可用吗?

我尝试交换Three.jsthree.min.js文件,但是缩小的文件也包含许多其他文件。我不喜欢必须将所有这些文件加载​​到我的工作区并引用每个文件只是为了调试一个问题一分钟。

是否有一个文件包含非缩小的等效three.min.js?还有另一种方法可行吗?


编辑所以我正在克隆three.js repo以获取源文件,并最终得到一堆像这样的HTML:

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

回购约200MB,并且需要克隆一个年龄。显然,没有办法用Git做部分克隆。

必须有一种更简单的方法!

2 个答案:

答案 0 :(得分:3)

实际上,当我想调试代码时,这就是我的工作。交换三个.min.js并输入three.js。缩小版本包含相同的代码。

该文件的非缩小版本受版本控制:

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

答案 1 :(得分:2)

  1. 使用非缩小版本
  2. 查看已经存在于three.js中的注释掉的调试点(即console.log)
  3. 'use strict'如果还没有
  4. 添加更多console.log / debugs