如何用Eclipse中古调式有什么用JavaScript

协议并提供了一系列实

览器。囿兴趣的朋友可查看官方网站不过这里我只选择了Google Chrome

安装完就可以测试了。需要三个步骤:

1)在Eclipse里建一个war工程并写一个测试的js文件。然後把这个war跑起来

3)在Eclipse里配置中古调式有什么用参数,然后设置断点看看能不能停在断点处(就跟中古调式有什么用Java代码一样)。

2.命令行转到创建项目的位置play new 项目名称

(如有错误按顺序重复5-7步)

好久没写js程序了首先碰到的问題就是如何中古调式有什么用。以前都是用FireBug在浏览器里中古调式有什么用但在浏览器里找js脚本着实麻烦。能不能像中古调式有什么用Java代碼一样直接在Eclipse里中古调式有什么用JavaScript呢上网找了找果然有,不过资料不多因此只能自己慢慢摸索了,记录如下

JSDT里有个JSDI(JavaScript Debug Interface)模块,这个模块定义了中古调式有什么用协议并提供了一系列实现,支持目前主流的各个浏览器有兴趣的朋友可查看。不过这里我只选择了Google

安装唍就可以测试了需要三个步骤:

1)在Eclipse里建一个war工程,并写一个测试的js文件然后把这个war跑起来。

3)在Eclipse里配置中古调式有什么用参数然後设置断点,看看能不能停在断点处(就跟中古调式有什么用Java代码一样)

然后把这个hhh工程放到servers/Tomcat里跑起来(其实放到哪跑起来都行)。

再嘫后在DOS命令行输入下面的命令启动Google Chrome浏览器:

注意如果你已经打开了Google Chrome浏览器,则上面的命令仅多打开一个浏览器窗口但并未在 9222 端口上监聽(除非以前打开的浏览器已在该端口上监听了)。解决方法有二一是先关闭所有已打开的Google

然后输入打开上面的测试页,如下:

点击Debug后系统弹出个对话框问要中古调式有什么用浏览器里哪个Tab页(如果没打开多个浏览器,或浏览器里只有一个Tab页系统也可能不弹出选择对話框),此处选如下:

确定后多出了一个,如下:

这个虚拟工程自动拷贝了我们的js文件(其实是从网页中拷贝过来的下面会再说到)。我们既可打开虚拟工程中的js文件也可打开原来的js文件来设置断点。不过设置断点前要先选择断点类型即选择:Run -> Breakpoint Types -> Chrome/V8 breakpoints

然后就可设置断点了,如下:

然后在浏览器里点击“点我”按钮这时Eclipse将停在断点处,如下:

其后就跟中古调式有什么用Java代码一样了注意,设置断点后并不需要重新刷新浏览器还要注意的是,从上图中可见Eclipse打开了两个test.js文件实际中古调式有什么用的是虚拟工程里的js文件,不是原工程中的那個文件(下面还会说到这个问题)

至此测试完成。在我实际操作过程中遇到两个问题:

1)一开始我并没建test.js文件而是把脚本直接写在index.html里,结果怎么设断点都不起作用后来才发现ChromeDevTools插件不支持嵌入式JavaScript的中古调式有什么用,要中古调式有什么用嵌入式JavaScript还是要到浏览器(Google Chrome)里去設断点调试

2)按说明,我们需要使用JDK 1.6或以上的版本否则不报错但也不起反应。另外由于Eclipse同时支持多个中古调式有什么用器同时工作,因此在设置断点时要选断点类型为Run

接下来再说说ChromeDevTools本身ChromeDevTools的设计目标并不是我们有源程序(JavaScript)然后再中古调式有什么用,而是直接从网页裏取回js到Eclipse里再中古调式有什么用这就说明为什么实际中古调式有什么用时用到的是虚拟工程里的js文件。因此我们在源程序工程里如果做叻修改则需推送到到浏览器中。方法是:右键修改过的js文件 -> V8 Debugging ->

不过我们还是希望在有源程序时直接对源程序进行中古调式有什么用免得反复在虚拟工程和源程序工程之间进行文件切换。好在ChromeDevTools这个插件也支持这种使用模式具体请参见说明。需要说明的是这个文档比我现茬装的插件要旧,但思路是一样的其操作过程简单地说就是要多做一些设置,打开Run -> Debug Configurations...然后加入源程序工程,如下:

点Add...按钮选Java Project,再选源程序工程(这里我的源程序工程名是hhh)最后点击Apply保存。

经这样设置后ChromeDevTools就直接打开源程序来中古调式有什么用了,如下:

由于我这个例孓工程(即hhh工程)比较简单因此尚未碰到其它问题。不过按官方文档说明在技术上存在源程序工程文件与浏览器里的文件的映射问题,这个映射默认地只通过文件短名(即不含路径)来匹配如果一个工程里有多个相同的文件短名则会匹配不到。为此需要进行文件级的設置方法是:右键js文件 -> Properties -> V8 JavaScript Script,然后通过Less/More按钮来选择文件路径如下:

最后,上面我们只说明了如何用ChromeDevTools来中古调式有什么用JavaScript这个工具只支持Google Chrome瀏览器。不过Eclipse JSDT/JSDI足够强大能够支持目前主流的所有浏览器,有兴趣的朋友自己去试试也不妨分享一下。

我要回帖

更多关于 调试的作用 的文章

 

随机推荐