热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JS脚本可视化调试支持——基于Googlev8引擎的脚本调试

--------------------------------------------前言----------------------------------------相信这是一个对公司技术而言比

--------------------------------------------前言----------------------------------------

相信这是一个对公司技术而言比较激动人心的话题。首先声明:我不是标题党!
难得有一个双休的周末,总算有时间能静下来研究点东西了。
想到现在项目开发中遇到的一些问题,最令人头疼的无疑是JS脚本的调试问题了。相信这个问题也是目前公司大部分技术痛恨的问题吧。大把大把的时间浪费在一些诸如大小写写错,少个标点符号之类的简单问题,而且只能靠print在n多位置输出结果来缩小错误查找范围(有同感的童鞋们一定要顶哦!)。
上周刚写过一篇关于跨平台的文章《搭建跨平台的统一C++代码工程方案——跨平台篇》。看过的童鞋们应该记得文章中提到过关于Google v8提供的Eclipse插件,可以用来调试JS脚本。没错,它是真的,而且是强悍的! 这两天专心钻研了下v8,总算了解了使用方法和一些内部原理机制。并且能够正常调试,也尝试移植到我们目前项目的代码中成功运行了。所以发此文章把一些学习心得和大家分享下。欢迎大家共同探讨。


--------------------------------------------为什么选择Google v8?----------------------------------------  
关于在调试脚本上大量的时间浪费,我认为主要原因归结如下:
1.脚本语言本身的灵活性导致了不严谨性,且没有编译器的排错支持;
2.习惯性的手工写脚本,没能充分地利用IDE的auto-complete功能;其实VS,Eclipse之类的IDE都提供了intelligent代码解析功能。只要配置恰当,是可以让IDE帮你自动补全你想输入的已经定义过的名字的(个人觉得VS+VA的aoto-complete是最好用的)。
3.最致命的问题还是由于没有调试器的支持。

有些童鞋也许要反驳了:新的IE浏览器,Chrome浏览器,Firefox的Firebug都支持JS脚本的调试功能,而且很强大了。的确是这样的,没错。不过我在这里的讨论的是不依赖浏览器的JS脚本。做Web开发的应该比较了解,web应用程序中,JS都是由各个浏览器去解释执行的。每个浏览器都内置一套解析JS脚本的引擎。例如:Firefox的SpiderMonkey(我们目前服务器端和SPII引擎的JS脚本部分就是用该引擎解释执行的),Google Chrome的v8(我们本次讨论的主角)。所以,很自然的,各个浏览器开发商都可以基于自己的这套引擎在自己的浏览器内潜入JS调试环境。毕竟JS主要还是用于Web开发的脚本语言。但是随着技术的发展,现在JS已经逐渐被应用到Web之外的众多领域。我们公司就属于其一,在非web的游戏开发领域,确实比较前卫了。我们的大部分项目底层都是用C++实现的,用SpiderMonkeyJS脚本嵌入工程用作上层逻辑开发。现在的问题是:没有浏览器的支持,如何去调试JS脚本呢?虽然基于开源的引擎,理论上是可以开发一套自己的调试器,作为插件嵌入到IDE中的。但是这样做技术难度比较大,而且做出来也不一定能在短时间内达到稳定实用。但是如果引擎的开发者已经提供了这样的好用的工具,有什么理由不直接使用呢?
之前花了点时间去寻找直接支持SpiderMonkey解析JS调试方案,没有找到比较满意的东东。不过的确有些个人开发了一些简单的插件。只是太过简单,文档什么的都没有,也没有人提供维护,所以没有打算使用。之前早就听说Google v8提供了调试工具。这两天查阅了相关资料,发现确实很强大。文档虽然不算很详细,但是已经足够你使用和做一些简单的优化扩展了。链接如下:http://code.google.com/p/chromedevtools/
从文档中了解到v8是目前最快的浏览器JS引擎,貌似还有Benchmark针对Firefox和Safari的一些性能对比测试。本人目前还没有验证过,既然Google都这么说了,我就信了吧-.-#。通过看他们的一些内部机制介绍,  可以看出,高效是有条件的。因为使用了hidden class的机制,第一次创建某个对象时会相对比较慢。因为要创建hidden class。但是重复使用时会变得异常高效。这就是复用的魔力,将需要动态查找的信息静态化。详见官方的文档。
https://developers.google.com/v8/design
Google提供了两种调试工具,一种是基于Console的D8(目前还没有尝试使用)。另一个是基于Eclipse的插件,提供GUI的调试。我选择的是后者。
接下来进入大家最关心的如何使用的话题了。其实官方文档里面已经说明的比较详细了,不过使用过程中还是会遇到各种各样的问题。为了让大家少走弯路,我整理了一下大致的流程供大家快速参考。好了,废话说完了~

-------------------------------------开发环境限制-----------------------------------
我测试的环境是Linux CentOS 6.3 + Eclipse CDT 1.5.1
Eclipse可以在官方下载各个平台的版本
Eclipse CDT官方下载地址
这是一个比较沉重的part。既然这个插件是Eclipse的插件,自然也限制了IDE必须是Eclipse了。但是为了GUI调试的便利,忍了吧。实在不想用Eclipse的童鞋可以考虑用Console的调试器D8。不过好在Eclipse本身是跨平台的,所以平台倒是不用过于担心了。

-----------------------------------安装v8------------------------------
官方文档
有多种方式选择下载安装,我是直接用Git下载的。
Down下来后需要编译
编译文档
以我的环境为例,直接make dependencies后,make native就OK了。其它环境下参考以上文档

-----------------------------------插件安装-----------------------------
首先需要安装插件,打开Eclipse,菜单选择Help->Install New Software...弹出界面里点右边的Add...然后Location中输入http://chromedevtools.googlecode.com/svn/update/dev/
后OK。选择插件进行安装

由于需要java VM等相关依赖项支持,如果有缺失项,请手动安装依赖项或是再添加几个自动更新的下载点
http://download.eclipse.org/releases/juno
http://download.eclipse.org/tools/cdt/releases/indigo
http://download.eclipse.org/linuxtools/update
官方参考:
http://code.google.com/p/chromedevtools/wiki/HowToInstall


                                                                                                               








本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

 
  回复

使用道具举报

  • 提升卡
  • 置顶卡
  • 沉默卡
  • 喧嚣卡
  • 变色卡
  • 千斤顶
  • 照妖镜
   
HengstarHengstar当前离线
注册时间
2012-11-2
最后登录
2012-12-13
阅读权限
20
积分
116
精华
2
帖子
13
查看详细资料 窥视卡 雷达卡

4

主题

0

好友

116

积分

下士

Rank: 2

下士, 积分 116, 距离下一级还需 84 积分

爱心勋章优秀会员

  • 发消息
发表于 2012-11-18 20:43:50 |显示全部楼层
本帖最后由 Hengstar 于 2012-11-18 21:38 编辑

----------------------------------开始体验--------------------------------
先解释一下,Google提供的这个调试插件是remote调试插件。也就是说,调试器和被调试应用程序是通过网络通讯的方式传递调试信息的。所以调试器和被调试程序实际上是两个进程。也正因为如此,调试时需要有些同步加锁的过程。不过Google都已经封装的比较简化了,使用起来还是比较简单的。而且还支持直接和Chrome浏览器通讯调试web程序,详细请参考
http://code.google.com/p/chromedevtools/wiki/DebuggerTutorial
先用官方提供的示例体验一下调试过程吧。
先进入v8的编译目录下的输出路径(v8/out/native/)。里面应该能看到一个lineprocessor的文件,这是v8已经编译好的一个sample程序。先在该目录下新建一个test.js文件(文件名可以随意取)。文件内容如下:

function ProcessLine(line) {
    var a = 10;
    var b = 11;
    c = a + b;

    // 这行目前是必须的,上面几行是我为了测试显示变量值随意加进去的,可以自行改
    return line.toUpperCase();
}

保存后在控制台执行lineprocessor程序
./lineprocessor test.js -p 9222 --main-cycle-in-cpp --callback
如果是直接执行程序(不通过控制台),则需要加入参数 test.js -p 9222 --main-cycle-in-cpp --callback
9222是端口号,也是可以自己改变的。
该程序会循环执行你刚刚编写的脚本,从控制台获取一行输入,转成大写后输出。
现在先不用管程序,准备开始启动调试器。先打开Eclipse,选择菜单Run->Debug Configurations
按下图中的窗口所示,选中Standalone V8 VM,再在左上角单击New configuration图标。新建一个调试配置项。配置按图中所示

配置完后单击右下角的Apply按钮,然后单击右下角的Debug按钮开始挂接。挂接完成后注意看Eclipse左边Project Explore窗口

刚才配置的New_configuration想被动态添加到这里了,连相关的脚本都被copy过来了(所有被执行到的脚本都会被拷贝到这里,这不禁让我想起当年调试lua的时候似乎也是类似的机制)。这时候在Eclipse中双击test.js打开脚本编辑。先尝试暂停程序的执行吧。单击Eclipse上面的暂停按钮,程序停下来了。记得要把右上角的视图切换为Debug视图。 然后打开 打开Expressions窗口。在窗口中随意输入一些JS脚本试试。比如试试下面的:

神奇吧。不过这还不算什么,下面试试我们都比较喜欢的断点功能。这里需要注意的是一定要将断点类型切换为v8 breakpoint才行。在菜单Run里面选择Breakpoint Types->Chrome/V8 breakpoints

然后在Eclipse代码窗口中左边空白处你要加断点的行双击
左边那个蓝色的点就是断点。
接下来让程序执行到断点处吧。(记得先恢复暂停的程序执行,用F8或者单击上面的按钮)。打开被调试程序运行的控制台,随便输入一些文字回车,断点断到了!然后把鼠标停留在你想要查看的变量上面就会显示相应的变量的值,简单类型到复杂类型的值都能看到!更神奇的是还能看js的调用堆栈。这里因为只有一个js函数调用所以没有堆栈信息。更多调试细节参考:
http://code.google.com/p/v8/wiki/AddDebuggerSupport
http://code.google.com/p/chromedevtools/wiki/EclipseDebuggerFeatures

-----------------------展望Google v8在项目中的应用-----------------------
既然v8这么powerful为什么不用它直接取代SpiderMonkey呢?我之前也有这个疑问,后来据说因为使用了v8的客户端在发布Apple程序的时候验证会失败。具体原因有好几种说法,我也没见到过,所以暂且不讨论。不过我个人认为总会有办法解决这个问题的。但是对于服务器端开发来说不受这个限制,所以我打算先移植到服务器端使用。今天已经尝试成功了,改动也不会很大。但是带来的便利是可想而知的,姑且不论效率的改善。关于v8和SPII引擎的整合还得先过了Apple验证这关才有可能做。不过如果能早日一统江山相信对大家都是一个福音啊!

发现写的有点多了。关于具体如何把v8嵌入到项目中使用,和一些v8的使用、优化等问题我想留到下次有时间再来写了。大家有兴趣也可以多参考下官方的文档。也可以和我一起线下交流。最好的学习办法是文档结合sample代码来看(sample源码路径在v8/samples)。相信上手很快的。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

 
  回复

使用道具举报

  • 照妖镜
   
chengstorychengstory当前离线
注册时间
2012-10-19
最后登录
2012-12-7
阅读权限
100
积分
123
精华
0
帖子
32
查看详细资料 窥视卡 雷达卡

4

主题

8

好友

123

积分

版主

Rank: 7Rank: 7Rank: 7

版主勋章

  • 发消息
发表于 2012-11-19 09:18:03 |显示全部楼层
真福音!!!!!必须顶啊!!!!!!!!!!!
 
  回复

使用道具举报

  • 照妖镜
   
jxhgzsjxhgzs当前离线
注册时间
2012-10-19
最后登录
2012-12-8
阅读权限
100
积分
141
精华
1
帖子
28
查看详细资料 窥视卡 雷达卡

5

主题

7

好友

141

积分

版主

Rank: 7Rank: 7Rank: 7

版主勋章

  • 发消息
发表于 2012-11-19 09:42:17 |显示全部楼层
顶起 顶起 太帅了!!!
 
  回复

使用道具举报

  • 照妖镜
   
eddyeddy当前离线
注册时间
2012-10-24
最后登录
2012-12-3
阅读权限
70
积分
2733
精华
0
帖子
20
查看详细资料 窥视卡 雷达卡

2

主题

4

好友

2733

积分

少尉

Rank: 6Rank: 6

少尉, 积分 2733, 距离下一级还需 267 积分

动漫勋章4

  • 发消息
发表于 2012-11-19 09:45:03 |显示全部楼层
不错不错。但是V8不能用在IOS中,是个很大的问题。
SP-II可以考虑用两套脚本绑定机制。
 
  回复

使用道具举报

  • 照妖镜
   
HengstarHengstar当前离线
注册时间
2012-11-2
最后登录
2012-12-13
阅读权限
20
积分
116
精华
2
帖子
13
查看详细资料 窥视卡 雷达卡

4

主题

0

好友

116

积分

下士

Rank: 2

下士, 积分 116, 距离下一级还需 84 积分

爱心勋章优秀会员

  • 发消息
发表于 2012-11-19 10:03:06 |显示全部楼层
本帖最后由 Hengstar 于 2012-11-19 10:06 编辑

嗯,我这边目前是用编译宏控制两套引擎的切换。服务器端改动较小,客户端那边绑定函数可能得想一套统一的方案。我觉得重点在于想办法找出v8不能通过Apple验证的具体原因,想办法解决。如果实在解决不了只能用两套,v8开发用。发布的时候切换到SpiderMonkey,但是需要处理两者的差异
 
  回复

使用道具举报

  • 照妖镜
   
HengstarHengstar当前离线
注册时间
2012-11-2
最后登录
2012-12-13
阅读权限
20
积分
116
精华
2
帖子
13
查看详细资料 窥视卡 雷达卡

4

主题

0

好友

116

积分

下士

Rank: 2

下士, 积分 116, 距离下一级还需 84 积分

爱心勋章优秀会员

  • 发消息
发表于 2012-11-19 10:28:40 |显示全部楼层
其实再退一步说,能用到这么强大的调试功能。找一个人花点时间做函数绑定,甚至出一个自动生成绑定代码的工具也比在没有调试功能时浪费在调试上的时间来得划算~
 
  回复

使用道具举报

  • 照妖镜
   
HengstarHengstar当前离线
注册时间
2012-11-2
最后登录
2012-12-13
阅读权限
20
积分
116
精华
2
帖子
13
查看详细资料 窥视卡 雷达卡

4

主题

0

好友

116

积分

下士

Rank: 2

下士, 积分 116, 距离下一级还需 84 积分

爱心勋章优秀会员

  • 发消息
发表于 2012-11-19 11:10:56 |显示全部楼层
本帖最后由 Hengstar 于 2012-11-19 11:13 编辑

关于v8不被apple支持的相关帖子找到了
http://stackoverflow.com/questio ... e-and-mac-app-store
不幸的是,无法关闭v8的jit
http://stackoverflow.com/questions/1296370/building-v8-without-jit
 
  回复

使用道具举报

  • 照妖镜
   
hhyytthhyytt当前离线
注册时间
2012-10-24
最后登录
2013-1-22
阅读权限
20
积分
54
精华
0
帖子
3
查看详细资料 窥视卡 雷达卡

0

主题

0

好友

54

积分

下士

Rank: 2

下士, 积分 54, 距离下一级还需 146 积分
  • 发消息
发表于 2012-11-19 11:54:26 |显示全部楼层
可以设置精华了
 
  回复

使用道具举报

  • 照妖镜
   
lvyilelvyile当前离线
注册时间
2012-10-23
最后登录
2012-12-18
阅读权限
100
积分
126
精华
0
帖子
30
查看详细资料 窥视卡 雷达卡

11

主题

2

好友

126

积分

版主

Rank: 7Rank: 7Rank: 7

  • 发消息
发表于 2012-11-19 14:07:41 |显示全部楼层
hhyytt 发表于 2012-11-19 11:54
可以设置精华了

+1

双绑定。
 
  回复

使用道具举报

  • 照妖镜
   
返回列表发新帖
  高级模式BColor Image Link Quote Code Smilies 您需要登录后才可以回帖 登录 | 立即注册

爱心勋章

乐于助人

优秀会员

优秀会员

版主勋章

版主

动漫勋章4

动漫勋章系列

    Archiver | 手机版 |

GMT+8, 2013-2-21 06:21 , Processed in 0.058520 second(s), 31 queries .

© 2001-2011 Powered by Discuz! X2.5. Theme By Yeei!

积分 0, 距离下一级还需 积分 回顶部
推荐阅读
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 本文介绍了RPC框架Thrift的安装环境变量配置与第一个实例,讲解了RPC的概念以及如何解决跨语言、c++客户端、web服务端、远程调用等需求。Thrift开发方便上手快,性能和稳定性也不错,适合初学者学习和使用。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • 本文介绍了H5游戏性能优化和调试技巧,包括从问题表象出发进行优化、排除外部问题导致的卡顿、帧率设定、减少drawcall的方法、UI优化和图集渲染等八个理念。对于游戏程序员来说,解决游戏性能问题是一个关键的任务,本文提供了一些有用的参考价值。摘要长度为183字。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 小程序自动授权和手动接入的方式及操作步骤
    本文介绍了小程序支持的两种接入方式:自动授权和手动接入,并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换,以及手动接入后如何下载代码包和提交审核。 ... [详细]
  • 2016 linux发行版排行_灵越7590 安装 linux (manjarognome)
    RT之前做了一次灵越7590黑苹果炒作业的文章,希望能够分享给更多不想折腾的人。kawauso:教你如何给灵越7590黑苹果抄作业​zhuanlan.z ... [详细]
  • 开发笔记:spring boot项目打成war包部署到服务器的步骤与注意事项
    本文介绍了将spring boot项目打成war包并部署到服务器的步骤与注意事项。通过本文的学习,读者可以了解到如何将spring boot项目打包成war包,并成功地部署到服务器上。 ... [详细]
  • 模块化区块链生态系统的优势概述及其应用案例
    本文介绍了相较于单体区块链,模块化区块链生态系统的优势,并以Celestia、Dymension和Fuel等模块化区块链项目为例,探讨了它们解决可扩展性和部署问题的方案。模块化区块链架构提高了区块链的可扩展性和吞吐量,并提供了跨链互操作性和主权可扩展性。开发人员可以根据需要选择执行环境,并获得奖学金支持。该文对模块化区块链的应用案例进行了介绍,展示了其在区块链领域的潜力和前景。 ... [详细]
author-avatar
pyg2358_586
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有