使用vscode对threejs的本地调试
始终坚信阅读和调试结合的方式,才是学习开源的高效方法
一、老版本调试
遥想当年的threejs(使用版本为r75)还没有CommonJS,对于我这个小白可以拿起大刀大杀四方......(咳。咳。 就是拿来简单画个方块啥的。。。),使用vscode简单配置一下就可以老老实实的拜倒在我的淫威之下。这种小秘籍已经遍地都是,说出来也不怕大家偷学去。
1 准备
vscode + debugger for chrome
2 设置
打开html所在目录后,F5开始调试,选择chrome调试器
生成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启动调试,小功告成,欲要神功大成,先需。。,你懂的
二、新版本调试
由于今年开始使用导入导出功能,所以就需要进行版本的升级(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的本地调试的更多相关文章
- 工具系列 | VScode Remote 远程开发与调试(告别SSH)
简介 最近VScode发布了远程编程与调试的插件Remote Development,使用这个插件可以在很多情况下代替vim直接远程修改与调试服务器上的代码,同时具备代码高亮与补全功能,就和在本地使用 ...
- mapreduce 本地调试需要注意的问题
1.写好的程序直接在hadoop集群里面执行 2.如果需要在本地调试,需要注释掉mapred-site.xml <configuration> <!-- <property&g ...
- 开源分布式实时计算引擎 Iveely Computing 之 本地调试Topology(4)
当我们写完一个比较复杂的Topology之后,倘若直接提交到服务器上运行,难免会有很多问题,如何进行本地的调试Topology,是我们非常关心的问题.我们依然以WordCount作为代码示例. 首先, ...
- OpenCart本地调试环境搭建
OpenCart简介: 免费开源网络版电子商务系统,是建立在线商务网站首选之一.有众多用户和开发基础,结合其丰富特性与模板插件,可最大化定制在线商店.(也就是用来方便开网店的) 本地调试准备: Fir ...
- 在本地调试微信项目(C#)
之前一人负责微信的项目,那时2014年LZ还没毕业..啥都不懂,为此特别感谢@SZW,没有你的框架,我可能都无从下手 当时做项目最麻烦的就是调试,因为很多页面都要使用 网页授权获取用户信息 在电脑上打 ...
- Oracle在本地调试成功读取数据,但是把代码放到服务器读不出数据的解决方法。
用MVC EF框架开发项目,数据库用的是Oracle,本地调试的时候一切正常,但是把代码编译之后放到服务器就会读不出数据. 原因:本地调试环境与服务器环境不一致. 办法:在服务器上装ODT.NET组件 ...
- C#微信公众号——本地调试
测试微信,因为要与微信服务器进行交互,所以必须要是外网地址,实现本地调试首先需要解决的问题就是外网问题,这个我前面的文章有介绍,这里就不再详细介绍了,网址http://www.cnblogs.com/ ...
- Hive 本地调试方法
关键词:hive, debug 本地调试(local debug) Hive 可分为 exec (hive-exec,主要对应源码里的ql目录) 和 metastore 两部分,其中exec对外有两种 ...
- WebService访问oracle数据库本地调试
WebService访问oracle数据库本地调试-一步一个坑 上篇文章提到我们额数据库挂了,重装了数据库,然后呢我需要在本地调试WebService,看看那些数据结构缺失,迁移到新数据库中去.踩坑之 ...
随机推荐
- Html中div块居中显示
表面上这个问题很难,因为涉及到浏览器窗体大小,导致部分界面效果不一致.图中的方法适用于div块大小不变的界面. 如上所示,将其分为两块,margin-left和margin-top的值均分别为widt ...
- 「 从0到1学习微服务SpringCloud 」03 Eureka的自我保护机制
系列文章(更新ing): 「 从0到1学习微服务SpringCloud 」01 一起来学呀! 「 从0到1学习微服务SpringCloud 」02 Eureka服务注册与发现 Eureka的高可用需要 ...
- Thematic002.字符串专题
目录 Trie字典树 KMP AC自动机 Manacher 回文自动机 后缀数组 后缀自动机 Trie字典树 概念 我们先来看看什么是Trie字典树 可以发现,这棵树的每一条边都有一个字符 有一些点是 ...
- mongoskin 是让 Node.js 支持 MongoDB 的内嵌访问层。
mongoskin 是让 Node.js 支持 MongoDB 的内嵌访问层.
- 使用Airtest进行UI自动化测试
一.环境搭建 1.Airtest客户端下载 访问官网http://airtest.netease.com/,根据自己的系统下载相应的客户端安装: 2.python工具下载与环境搭建 在本地python ...
- Git详解之特殊工具
前言 现在,你已经学习了管理或者维护 Git 仓库,实现代码控制所需的大多数日常命令和工作流程.你已经完成了跟踪和提交文件的基本任务,并且发挥了暂存区和轻量级的特性分支及合并的威力. 接下来你将领略到 ...
- .net 项目更改默认命名空间
这个项目是我去年毕业设计做的项目,项目创建的时候由于手抖把Landlordtenant写成了 LandloRdtenant(R大写了),当时不知道如何改回来又担心改完之后报错也就没管了. 今天尝试使用 ...
- android实例 listview与sqlite数据绑定
ListView与Sqlite数据库绑定步骤: 1.将Sqlite数据库的内容查询出来并放入数组列表中,形成ListView的数据源: 2.适配器绑定数据源,显示在ListView item中. 本文 ...
- 01背包与完全背包(dp复习)
01背包和完全背包都是dp入门的经典,我的dp学的十分的水,借此更新博客的机会回顾一下 01背包:给定总容量为maxv的背包,有n件物品,第i件物品的的体积为w[i],价值为v[i],问如何选取才能是 ...
- 小程序云开发--内容安全审查API云调用
云调用 云调用是小程序·云开发提供的在云函数中调用微信开放接口的能力,需要在云函数中通过 wx-server-sdk 使用. 接口方法 openapi.security.msgSecCheck 需在 ...