使用vscode对threejs的本地调试

始终坚信阅读和调试结合的方式,才是学习开源的高效方法

一、老版本调试

遥想当年的threejs(使用版本为r75)还没有CommonJS,对于我这个小白可以拿起大刀大杀四方......(咳。咳。 就是拿来简单画个方块啥的。。。),使用vscode简单配置一下就可以老老实实的拜倒在我的淫威之下。这种小秘籍已经遍地都是,说出来也不怕大家偷学去。

1 准备

vscode + debugger for chrome

2 设置

打开html所在目录后,F5开始调试,选择chrome调试器

使用vscode对threejs的本地调试

生成launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "chrome",
            "request": "launch",
            "webRoot": "${workspaceFolder}",
            "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
            "file": "${workspaceFolder}/examples/canvas_geometry_birds.html",
            "runtimeArgs":["--allow-file-access-from-files"]
        }
    ]
}

主要设置的内容为runtimeExecutable,该参数为当前系统chrome浏览器的地址,file为要调试的网页地址;设置完成以后保存,找到要调试的网页,并在javascript段打上断点,然后F5启动调试,小功告成,欲要神功大成,先需。。,你懂的

使用vscode对threejs的本地调试

二、新版本调试

由于今年开始使用导入导出功能,所以就需要进行版本的升级(r113),一跑代码,我去,开不了了,原来新版本已经引入CommonJs的理念,需要在服务端运行。好吧,继续捣鼓吧。

1 准备

vscode + debugger for chrome + nodejs

2 设置

我选择的是使用nodejs作为服务器,nodejs+npm的安装我就不多介绍了,小伙伴们自己找秘籍吧。如果想使用其他方法,建议参考Testing with NPM一文。
在vscode的terminal窗口进行npm的安装操作,建议国内的还是使用cnpm,不然要等到天荒地老。

cnpm install

然后

npm run dev

然后在命令窗口中看到

[HTTP] Starting up http-server, serving ./
[HTTP] Available on:
[HTTP]   http://192.168.1.144:8080
[HTTP]   http://127.0.0.1:8080
[HTTP] Hit CTRL-C to stop the server

ok,现在你的本地服务已经运行起了,可以记载网页进行调试了。

跟老版本的调试差不多,生成launch.json,配置参数略微调试

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8080/examples/#webgl_animation_cloth",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

将url改成你要访问的文件路径,这里面使用的是路由的方式,注意没有.html。到你要调试的页面断点开始调试吧,祝你好运。

使用vscode对threejs的本地调试

上一篇:ROS机器人 (三) : xacro模型搭建小车


下一篇:ROS基础(三):参数服务器、命名空间与launch文件大全解