eclipse中js中写javascript怎么使用
3个回答
展开全部
在Eclipse里调式JavaScript需要有JSDT（JavaScript Development Tools）插件，大部分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）：
* 在Eclipse里安装ChromeDevTools插件，其Update Site为http://chromedevtools.googlecode.com/svn/update/dev/。安装时我只全选了Google Chrome Developer Tools选项，没选Google Chrome Developer Tools (Advanced)。目前的版本是0.3.8.201210040400。
* 上面这个ChromeDevTools插件只支持Google Chrome浏览器，因此我也下载了其最新版。
安装完就可以测试了。需要三个步骤：
1）在Eclipse里建一个war工程，并写一个测试的js文件。然后把这个war跑起来。
2）启动Google Chrome浏览器，并带上--remote-debugging-port=9222参数。然后打开上面的网页地址。
3）在Eclipse里配置调式参数，然后设置断点，看看能不能停在断点处（就跟调式Java代码一样）。
为此我建了个测试工程，即File -> New -> Other... -> Web -> Dynamic Web Project，随便起了个hhh的工程名，然后新增index.html和js/test.js两个文件，如下：
index.html文件内容为：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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文件内容为：
1 function fff() {
2 var x = 'xxx';
3 alert(x);
4 }
然后把这个hhh工程放到servers/Tomcat里跑起来（其实放到哪跑起来都行）。
再然后在DOS命令行输入下面的命令启动Google Chrome浏览器：
chrome.exe --remote-debugging-port=9222
这样就打开了Google Chrome浏览器，并在9222端口上监听，等待Eclipse JSDT/JSDI/ChromeDevTools来连接。
注意，如果你已经打开了Google Chrome浏览器，则上面的命令仅多打开一个浏览器窗口，但并未在 9222 端口上监听（除非以前打开的浏览器已在该端口上监听了）。解决方法有二，一是先关闭所有已打开的Google Chrome浏览器，然后执行上面的命令就能在 9222 端口上监听；二是如这篇文章所介绍的增加 --user-data-dir=remote-profile 参数，具体如下：
chrome.exe --remote-debugging-port=9222 --user-data-dir=c:\temp\chrome2
其中，你可根据你的需要把 c:\temp\chrome2 设置为其它目录。
此外，你可在Google Chrome浏览器上输入 http://localhost:9222 来验证是否已在 9222 端口上监听了。
然后输入http://localhost:8080/hhh打开上面的测试页，如下：
接着就是回到Eclipse里进行设置了。从菜单上选Run -> Debug Configurations...，然后新建WebKit Protocol，如下：
点击Debug后系统弹出个对话框，问要调式浏览器里哪个Tab页（如果没打开多个浏览器，或浏览器里只有一个Tab页，系统也可能不弹出选择对话框），此处选http://localhost:8080/hhh，如下：
确定后多出了一个虚拟工程，如下：
这个虚拟工程自动拷贝了我们的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 -> Debug Configurations...，然后加入源程序工程，如下：
点Add...按钮，选Java Project，再选源程序工程（这里我的源程序工程名是hhh），最后点击Apply保存。
经这样设置后，ChromeDevTools就直接打开源程序来调式了，如下：
由于我这个例子工程（即hhh工程）比较简单，因此尚未碰到其它问题。不过按官方文档说明，在技术上存在源程序工程文件与浏览器里的文件的映射问题，这个映射默认地只通过文件短名（即不含路径）来匹配。如果一个工程里有多个相同的文件短名则会匹配不到。为此需要进行文件级的设置，方法是：右键js文件 -> Properties -> V8 JavaScript Script，然后通过Less/More按钮来选择文件路径，如下：
最后，上面我们只说明了如何用ChromeDevTools来调式JavaScript，这个工具只支持Google Chrome浏览器。不过Eclipse JSDT/JSDI足够强大，能够支持目前主流的所有浏览器
JSDT里有个JSDI（JavaScript Debug Interface）模块，这个模块定义了调式协议，并提供了一系列实现，支持目前主流的各个浏览器。有兴趣的朋友可查看官方网站。不过这里我只选择了Google Chrome浏览器，这其中的一个原因是Google自己提供了与JSDI集成的ChromeDevTools插件。
安装起来也比较简单（我用的是Eclipse Java EE IDE for Web Developers，Version: Indigo Service Release 2）：
* 在Eclipse里安装ChromeDevTools插件，其Update Site为http://chromedevtools.googlecode.com/svn/update/dev/。安装时我只全选了Google Chrome Developer Tools选项，没选Google Chrome Developer Tools (Advanced)。目前的版本是0.3.8.201210040400。
* 上面这个ChromeDevTools插件只支持Google Chrome浏览器，因此我也下载了其最新版。
安装完就可以测试了。需要三个步骤：
1）在Eclipse里建一个war工程，并写一个测试的js文件。然后把这个war跑起来。
2）启动Google Chrome浏览器，并带上--remote-debugging-port=9222参数。然后打开上面的网页地址。
3）在Eclipse里配置调式参数，然后设置断点，看看能不能停在断点处（就跟调式Java代码一样）。
为此我建了个测试工程，即File -> New -> Other... -> Web -> Dynamic Web Project，随便起了个hhh的工程名，然后新增index.html和js/test.js两个文件，如下：
index.html文件内容为：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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文件内容为：
1 function fff() {
2 var x = 'xxx';
3 alert(x);
4 }
然后把这个hhh工程放到servers/Tomcat里跑起来（其实放到哪跑起来都行）。
再然后在DOS命令行输入下面的命令启动Google Chrome浏览器：
chrome.exe --remote-debugging-port=9222
这样就打开了Google Chrome浏览器，并在9222端口上监听，等待Eclipse JSDT/JSDI/ChromeDevTools来连接。
注意，如果你已经打开了Google Chrome浏览器，则上面的命令仅多打开一个浏览器窗口，但并未在 9222 端口上监听（除非以前打开的浏览器已在该端口上监听了）。解决方法有二，一是先关闭所有已打开的Google Chrome浏览器，然后执行上面的命令就能在 9222 端口上监听；二是如这篇文章所介绍的增加 --user-data-dir=remote-profile 参数，具体如下：
chrome.exe --remote-debugging-port=9222 --user-data-dir=c:\temp\chrome2
其中，你可根据你的需要把 c:\temp\chrome2 设置为其它目录。
此外，你可在Google Chrome浏览器上输入 http://localhost:9222 来验证是否已在 9222 端口上监听了。
然后输入http://localhost:8080/hhh打开上面的测试页，如下：
接着就是回到Eclipse里进行设置了。从菜单上选Run -> Debug Configurations...，然后新建WebKit Protocol，如下：
点击Debug后系统弹出个对话框，问要调式浏览器里哪个Tab页（如果没打开多个浏览器，或浏览器里只有一个Tab页，系统也可能不弹出选择对话框），此处选http://localhost:8080/hhh，如下：
确定后多出了一个虚拟工程，如下：
这个虚拟工程自动拷贝了我们的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 -> Debug Configurations...，然后加入源程序工程，如下：
点Add...按钮，选Java Project，再选源程序工程（这里我的源程序工程名是hhh），最后点击Apply保存。
经这样设置后，ChromeDevTools就直接打开源程序来调式了，如下：
由于我这个例子工程（即hhh工程）比较简单，因此尚未碰到其它问题。不过按官方文档说明，在技术上存在源程序工程文件与浏览器里的文件的映射问题，这个映射默认地只通过文件短名（即不含路径）来匹配。如果一个工程里有多个相同的文件短名则会匹配不到。为此需要进行文件级的设置，方法是：右键js文件 -> Properties -> V8 JavaScript Script，然后通过Less/More按钮来选择文件路径，如下：
最后，上面我们只说明了如何用ChromeDevTools来调式JavaScript，这个工具只支持Google Chrome浏览器。不过Eclipse JSDT/JSDI足够强大，能够支持目前主流的所有浏览器
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2018-08-03 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
如果你是要用一个页面来写javascript，之后在用它的页面调用的话。可以用鼠标右键点击你所要建JavaScript的目录。之后：new-->File.在弹出来的对话框下面的输入栏中写上 文件名.js
里面就可以写JavaScript了。
里面就可以写JavaScript了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
