如何⽤Eclipse调式JavaScript？
好久没写js程序了，⾸先碰到的问题就是如何调式。以前都是⽤FireBug在浏览器⾥调式，但在浏览器⾥js脚本着实⿇烦。能不能像调式Java代码⼀样直接在Eclipse⾥调式JavaScript呢？上⽹了果然有，不过资料不多，因此只能⾃⼰慢慢摸索了，记录如下。
在Eclipse⾥调式JavaScript需要有JSDT（）插件，⼤部分Eclipse⾥都已经安装了这个插件。如果不确定安装了没有，可到Help -> About Eclipse -> Installation Details -> Features⾥检查（按Feature Name排序，然后Eclipse JavaScript Development Tools）。
JSDT⾥有个JSDI（JavaScript Debug Interface）模块，这个模块定义了调式协议，并提供了⼀系列实现，⽀持⽬前主流的各个浏览器。有兴趣的朋友可查看。不过这⾥我只选择了Google Chrome浏览器，这其中的⼀个原因是Google⾃⼰提供了与JSDI集成的ChromeDevTools 插件。
安装起来也⽐较简单（我⽤的是Eclipse Java EE IDE for Web Developers，Version: Indigo Service Release 2）：
* 上⾯这个ChromeDevTools插件只⽀持Google Chrome浏览器，因此我也下载了其最新版。
安装完就可以测试了。需要三个步骤：
1）在Eclipse⾥建⼀个war⼯程，并写⼀个测试的js⽂件。然后把这个war跑起来。
2）启动Google Chrome浏览器，并带上--remote-debugging-port=9222参数。然后打开上⾯的⽹页地址。
3）在Eclipse⾥配置调式参数，然后设置断点，看看能不能停在断点处（就跟调式Java代码⼀样）。
为此我建了个测试⼯程，即File -> New -> -> Web -> Dynamic Web Project，随便起了个hhh的⼯程名，然后新增index.html和
js/test.js两个⽂件，如下：
index.html⽂件内容为：
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
5<title>Hello</title>
6</head>
7<body>
8<script type="text/javascript" src="./js/test.js"></script>
9<h1>Hello!</h1>
10<button value="点我" onclick="fff()"></button>
11</body>
12</html>
这个html在点击“点我”后将调⽤fff()的JavaScript函数，这个fff()函数在js/test.js⾥。
js/test.js⽂件内容为：
1function fff() {
2var x = 'xxx';
3    alert(x);
4 }
然后把这个hhh⼯程放到servers/Tomcat⾥跑起来（其实放到哪跑起来都⾏）。
再然后在DOS命令⾏输⼊下⾯的命令启动Google Chrome浏览器：
< --remote-debugging-port=9222
这样就打开了Google Chrome浏览器，并在9222端⼝上监听，等待Eclipse JSDT/JSDI/ChromeDevTools来连接。
注意，如果你已经打开了Google Chrome浏览器，则上⾯的命令仅多打开⼀个浏览器窗⼝，但并未在 9222 端⼝上监听（除⾮以前打开的浏览器已在该端⼝上监听了）。解决⽅法有⼆，⼀是先关闭所有已打开的Google Chrome浏览器，然后执⾏上⾯的命令就能在 9222 端⼝上监听；⼆是如所介绍的增加 --user-data-dir=remote-profile 参数，具体如下：
< --remote-debugging-port=9222 --user-data-dir=c:\temp\chrome2
其中，你可根据你的需要把 c:\temp\chrome2 设置为其它⽬录。
接着就是回到Eclipse⾥进⾏设置了。从菜单上选Run -> ，然后新建WebKit Protocol，如下：
确定后多出了⼀个，如下：
这个虚拟⼯程⾃动拷贝了我们的js⽂件（其实是从⽹页中拷贝过来的，下⾯会再说到）。我们既可打开虚拟⼯程中的js⽂件，也可打开原来的js⽂件来设置断点。不过设置断点前要先选择断点类型，即选择：Run -> Breakpoint Types -> Chrome/V8 breakpoints
然后就可设置断点了，如下：
然后在浏览器⾥点击“点我”按钮，这时Eclipse将停在断点处，如下：
其后就跟调式Java代码⼀样了。注意，设置断点后并不需要重新刷新浏览器。还要注意的是，从上图中可见Eclipse打开了两个test.js⽂件，实际调式的是虚拟⼯程⾥的js⽂件，不是原⼯程中的那个⽂件（下⾯还会说到这个问题）。
调式完成后可在Debug透视图（即Window -> Open Perspective -> Debug）⾥停⽌并删除这个虚拟⼯程。
⾄此测试完成。在我实际操作过程中遇到两个问题：
1）⼀开始我并没建test.js⽂件，⽽是把脚本直接写在index.html⾥，结果怎么设断点都不起作⽤，后
来才发现ChromeDevTools插件不⽀持嵌⼊式JavaScript的调式，要调式嵌⼊式JavaScript还是要到浏览器（Google Chrome）⾥去设断点调试。
2）按说明，我们需要使⽤JDK 1.6或以上的版本，否则不报错但也不起反应。另外，由于Eclipse同时⽀持多个调式器同时⼯作，因此在设置断点时要选断点类型为Run -> Breakpoint Types -> Chrome/V8 breakpoints。
接下来再说说ChromeDevTools本⾝。ChromeDevTools的设计⽬标并不是我们有源程序（JavaScript）然后再调式，⽽是直接从⽹页⾥取回js到Eclipse⾥再调式，这就说明为什么实际调式时⽤到的是虚拟⼯程⾥的js⽂件。因此我们在源程序⼯程⾥如果做了修改，则需推送到到浏览器中。⽅法是：右键修改过的js⽂件 -> V8 Debugging -> Push Source Changes to VM（这⾥的VM可以认为就是浏览器）。
不过我们还是希望在有源程序时直接对源程序进⾏调式，免得反复在虚拟⼯程和源程序⼯程之间进⾏⽂件切换。好在ChromeDevTools这个插件也⽀持这种使⽤模式，具体请参见说明。需要说明的是，这个⽂档⽐我现在装的插件要旧，但思路是⼀样的。其操作过程简单地说就是要多做⼀些设置，打开Run -> ，然后加⼊源程序⼯程，如下：
点按钮，选Java Project，再选源程序⼯程（这⾥我的源程序⼯程名是hhh），最后点击Apply保存。
经这样设置后，ChromeDevTools就直接打开源程序来调式了，如下：
由于我这个例⼦⼯程（即hhh⼯程）⽐较简单，因此尚未碰到其它问题。不过按官⽅⽂档说明，在技术上存在源程序⼯程⽂件与浏览器⾥的⽂件的映射问题，这个映射默认地只通过⽂件短名（即不含路径）来匹配。如果⼀个⼯程⾥有多个相同的⽂件短名则会匹配不到。为此需要进⾏⽂件级的设置，⽅法是：右键js⽂件 -> Properties -> V8 JavaScript Script，然后通过Less/More按钮来选择⽂件路径，如下：
最后，上⾯我们只说明了如何⽤ChromeDevTools来调式JavaScript，这个⼯具只⽀持Google Chrome浏览器。不过Eclipse JSDT/JSDI⾜够强⼤，能够⽀持⽬前主流的所有浏览器，有兴趣的朋友⾃⼰去试试，也不妨分享⼀下。如何下载javascript

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。