借助Visual Studio Code提高基于ActionScript的LayaAir HTML5游戏的调试效率
借助Visual Studio Code提高基于ActionScript的LayaAir HTML5游戏的调试效率
使用Visual Studio Code(VS Code)调试的优势
借助VS Code我们可以极大地提高基于ActionScript的LayaAir Html5游戏项目的调试效率,VS Code的优势有以下几点:
- 在发生JavaScript运行时错误时,VS Code会自动在对应的代码位置断点,并且可以立即查看当前的变量状态、调用堆栈、日志输出等信息。在Chrome中,我们需要手动开启这个功能,而且在控制台打开的状态才会生效。本文末尾描述了如何在Chrome中开启此功能。
- 当我们使用了模块化开发技术的时候,我们会有多个JavaScript文件。在chrome中,如果想要定位指定模块中的类,则需要先打开这个文件。而在VS Code中,我们可以立即对所有JavaScript文件进行搜索。
- 在定位指定的类、类成员、本地变量名的时候,Chrome的搜索的方式是搜索字符串。而VS Code则会对JavaScript进行语法解析,这样能够提高搜索的精确度。
Visual Studio Code简介和下载
Visual Studio Code(VS Code)是一个由微软开发的,同时支持Windows、Linux和OS X操作系统的开源文本编辑器。它支持调试,内置了Git 版本控制功能,同时也具有开发环境功能,例如代码补全(类似于 IntelliSense)、代码片段、代码重构等。Visual Studio Code支持多种主流编程语言,对JavaScript
和TypeScript
语言的原生支持非常完备。我们熟知的LayaAir IDE
以及Egret Wing
都是基于Visual Studio Code二次开发的。软件的下载和安装见官方网站。
安装VS Code扩展Debugger for Chrome
这是一个必要的插件,它使得我们可以在VS Code中调试Chrome浏览器中运行的JavaScript游戏代码。这个扩展开源免费,由微软驱动。在VS Code中的扩展商店搜索Debugger for Chrome
即可找到。详情参考官方文档。
示例项目源码和配置
本文使用的示例项目是基于ActionScript的,它由LayaAir IDE自动生成。示例项目只有两个类。
LayaSample.as
package {
import laya.events.Event;
public class LayaSample {
public function LayaSample() {
//初始化引擎
Laya.init(1136, 640);
trace('hello laya.');
Laya.stage.on(Event.CLICK, this, mouseHandler);
}
private function mouseHandler(e:Event=null):void {
var myfoo:Foo = new Foo();
// myfoo.barbarbar();
myfoo.baz();
}
}
}
Foo.as
package {
public class Foo {
public function Foo() {
}
public function barbarbar() {
trace('bar bar bar.');
}
public function baz() {
var a;
a.b();
}
}
}
把项目文件夹拖入VS Code便形成了一个VS Code工作空间。在根目录创建名为.vscode
的文件夹,并在此文件中创建文件launch.json
,并把以下内容复制到此文件中。想要了解配置详情的话,可以查看VS Code以及其插件的官方文档。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"file": "${workspaceRoot}/bin/h5/index.html",
"webRoot": "${workspaceRoot}",
"userDataDir": "${workspaceRoot}/.userdata",
"runtimeArgs": [
"--allow-file-access-from-files",
"--allow-file-access-frome-files",
" --disable-web-security"
]
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
在.vscode
文件夹中创建文件settings.json
,并复制以下内容到文件内。这样我们可以在搜索的时候排除一些文件夹。
{
"search.exclude": {
"**/src": true,
"**/libs": true,
"**/laya": true
}
}
最后,在根目录中创建空文件jsconfig.json
,这可以让我们进行跨文件搜索。
你也可以下载示例项目的源码并复制相应的文件到你的项目中。可以从这里下载到项目源码。
定位代码
在开发过程中,断点调试是比较频繁的。VS Code提供了多种方式来帮助我们快速定位需要断点的代码行。
- 如果我们使用了LayaAir的模块化(分包)功能,那么就会生成多个JavaScript文件。使用
Ctrl+T
在多个JavaScript文件之间定位指定的类名、本地变量名。 - 在当前打开的文件中使用
Ctrl+Shift+O
来定位类名、类成员函数、本地变量名。 - 使用
Ctrl+Shift+F
在所有的JavaScript文件中的定位任意字符串。 - 使用
Ctrl+P
来快速打开任意指定的文件。
在多个JavaScript文件中定位代码
在示例项目中,我们有两个JavaScript文件,一个是分模块文件qux.js
,一个是主模块文件LayaSample.max.js
。想要跨文件搜索,我们需要保证至少有一个JavaScript文件在VS Code中处于打开状态。如果我们只让qux.js
处于打开状态,使用Ctrl+T
打开输入框,那么我们可以:
- 输入类名的全名或者前几个字符来定位类。比如输入
layasample
或者它的前几个字符来立即定位LayaSample
这个类。 - 输入本地变量的全名或者前几个字符来定位本地变量。比如输入
myfoo
或者它的前几个字符来立即定位myfoo
这个本地变量。
在当前打开的JavaScript文件中定位代码
假设当前打开的文件为LayaSample.max.js
,用Ctrl+Shift+O
打开输入框,那么我们可以:
- 输入类名的全名或者前几个字符来定位类。比如输入
layasample
或者它的前几个字符来立即定位LayaSample
这个类。 - 输入本地变量的全名或者前几个字符来定位本地变量。比如输入
myfoo
或者它的前几个字符来立即定位myfoo
这个本地变量。 - 输入类成员函数的的全名或者前几个字符来定位它。比如输入
barbarbar
或者它的前几个字符来立即定位barbarbar
这个成员函数。
在所有的JavaScript文件中的定位任意字符串
使用Ctrl+Shift+F
快速搜索Foo.barbarbar方法中的字符串'bar bar bar.'
快速打开任意指定的文件
使用Ctrl+P
来快速打开任意qux.js
这个文件。
调试
使用F5
开启调试,调试方式和Chrome基本相同。
一般的调试
在myfoo.barbarbar();
这一行打上断点,点击游戏区域便可触发此断点。在调试控制台可以看到barbarbar
这个方法的输出。
断点自动停止在报运行时错误的代码行
点击游戏区域便可触发Foo.baz这个方法的报错,断点会自动触发并停止在a.b();
这一行,并且提醒TypeError: Cannot read property 'b' of undefined
。
一点重要的说明
在html页面加载的时候执行的JavaScript代码断点可能不生效,除非你再次刷新页面。官方对此有详细的解释。
Chrome中开启异常自动断点
见图
参考资料
- Visual Studio Code 维基百科
- Visual Studio Code
- Visual Studio Code 扩展商店
- Automatically pause on any exception
借助Visual Studio Code提高基于ActionScript的LayaAir HTML5游戏的调试效率的更多相关文章
- 使用Visual Studio Code调试基于ActionScript的LayaAir HTML5游戏
使用Visual Studio Code(VS Code)调试的优势 使用VS Code我们可以极大地提高LayaAir Html5游戏项目的调试效率,VS Code的优势有以下几点: 在发生Java ...
- 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD
在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...
- Rust初步(二):使用Visual Studio Code编写Rust程序(猜猜看游戏)
我是照着下面这篇帮助文档,完成了第一个完整的Rust程序: 猜猜看 游戏 http://kaisery.gitbooks.io/rust-book-chinese/content/content/3. ...
- Java on Visual Studio Code的更新 – 2022年1月
大家好,欢迎来到 Visual Studio Code Java 更新 1 月版!这是我们新年的第一篇博客,我们将回顾 2021 年的亮点,并分享我们 2022 年的产品路线图!除此之外我们还有一些令 ...
- 剖析并利用Visual Studio Code在Mac上编译、调试c#程序
0x00 前言 一周多以前的微软的Build大会上,微软发布了一个让很多人眼前一亮的工具,也是本文的主角——Visual Studio Code.很多使用Windows的朋友都很高兴,认为又多了一个很 ...
- Visual Studio Code 1.0发布:100+语言,300+pull请求,1000+扩展
在第一个预览版发布一年后,微软发表了Visual Studio Code 1.0. 在//BUILD 2015大会上,微软宣布,他们的一个团队需要几个月来创建Visual Studio Code的第一 ...
- 剖析并利用Visual Studio Code在Mac上编译、调试c#程序【转】
0x00 前言 一周多以前的微软的Build大会上,微软发布了一个让很多人眼前一亮的工具,也是本文的主角——Visual Studio Code.很多使用Windows的朋友都很高兴,认为又多了一个很 ...
- First ASP.NET Core Application on a Mac Using Visual Studio Code
一直希望可以在mac上直接编写webapp (用C#)现在终于伴随着 core 世界美好了,不需要用pd windows了 nice. Visual studio code 更新1.1版本了 怀着激动 ...
- 如何用Visual Studio Code远程调试运行在服务器上的nodejs应用
假设我有一个nodejs应用,运行在AWS - 亚马逊云平台上(Amazone Web Service).我想用本地的Visual Studio Code来远程调试服务器端的nodejs应用. Vis ...
随机推荐
- Myeclipse下配置SVN报错问题 svn: E175002: java.lang.RuntimeException: Could not generate DH keypair,缺少subclipse插件的javaHL
在myeclipse10.0下安装svn插件,出现了Could not generate DH keypair,这么一个错误. 看到了一篇博客说是svn接口选择问题,可是我myeclipse没有那个接 ...
- java中Mysql开发
[IntelliJ IDEA 12使用]导入外部包 http://www.cnblogs.com/haochuang/p/3491959.html JDBC导入包即可 http://blog.163. ...
- 14.Android UiAutomator 图像处理
一.BitMap介绍 1.图像使用场景 1)效果类截图 2)不可见的组件图像对比 3)失败与异常截图 4)利用图像判断组件 2.部分API简单说明 API 说明 compress 压缩图片 copy ...
- git查看/修改 用户名和邮箱
用户名和邮箱地址的作用 用户名和邮箱地址是本地git客户端的一个变量,不随git库而改变. 每次commit都会用用户名和邮箱纪录. github的contributions统计就是按邮箱来统计的. ...
- redis服务启动脚本
/etc/rc.d/init.d/redis #!/bin/sh# chkconfig: 2345 80 90 # description: Start and Stop redis REDISPOR ...
- POJ 2318/2398 叉积性质
2318 2398 题意:给出n条线将一块区域分成n+1块空间,再给出m个点,询问这些点在哪个空间里. 思路:由于只要求相对位置关系,而对具体位置不关心,那么易使用叉积性质得到相对位置关系(左侧/右侧 ...
- Delphi 常用数据类型 字符串类型 数据类型等等
字符串类型 Delphi有三种类型的字符: ●AnsiChar这是标准的1字节的ANSI字符,程序员都对它比较熟悉. ●WideChar这是2字节的Unicode字符. ●Char在目前Delphi早 ...
- 《JavaScript 实战》:实现图片幻滑动展示效果
滑动展示效果主要用在图片或信息的滑动展示,也可以设置一下做成简单的口风琴(Accordion)效果.这个其实就是以前写的图片滑动展示效果的改进版,那是我第一篇比较受关注的文章,是时候整理一下了. 有如 ...
- HashSet的特性介绍
HashSet除了在元素的存储上是无序的以外,还是不能够存储重复的元素. HashSet如何判断元素是否重复呢?是根据元素继承的两个方法来判断,hashCode和equals,当存储元素时,首先判断要 ...
- R1(上)—R关联规则分析之Arules包详解
Arules包详解 包基本信息 发布日期:2014-12-07 题目:挖掘关联规则和频繁项集 描述:提供了一个表达.处理.分析事务数据和模式(频繁项集合关联规则)的基本框架. URL:http://R ...