How to Use eclipse to adjust JavaScript?

I haven't written Js for a long timeProgramFirst, the problem is how to adjust it. In the past, firebug was used in browsers, but it was really troublesome to find JS scripts in browsers. Can it be adjusted like Java?CodeHow can I directly adjust Javascript in eclipse? I found it online, but there is not much information, so I can only find it myself. The record is as follows.

Debugging Javascript in eclipse requires the jsdt (Javascript development tools) plug-in. Most eclipse has installed this plug-in. If you are not sure whether the installation is complete, go to help-> about eclipse-> Installation Details-> features to check (sort by feature name, and then find eclipse Javascript development tools ).

Jsdt has a jsdi (JavaScript debug Interface) module, which defines the debug protocol and provides a series of implementations to support mainstream browsers. If you are interested, you can view the official website. But here I only select Google Chrome, one of the reasons is that Google provides its own chromedevtools plug-in integrated with jsdi.

It is also relatively simple to install (I use eclipse Java EE IDE for Web developers, version: indigo Service Release 2 ):

* Install the chromedevtools plug-in eclipse. The update site is http://chromedevtools.googlecode.com/svn/update/dev /. During installation, I only selected the Google Chrome developer tools option and did not select Google Chrome Developer Tools (advanced ). The current version is 0.3.8.201210040400.

* The above chromedevtools plug-in only supports Google Chrome, so I also downloaded the latest version.

After installation, you can test it. Three steps are required:

1) create a war project in eclipse and write a JS file for testing. Then run the war.

2) start Google Chrome and bring the -- remote-debugging-Port = 9222 parameter. Then open the preceding webpage address.

3) configure the debugging parameters in eclipse and set the breakpoint to see if the breakpoint can be stopped (just like debugging Java code ).

For this reason, I have created a test project, namely file-> New-> other...-> Web-> Dynamic Web project, and a hhhproject name is created. Then I have added two files, index.html and JS/test. JS, as follows:

The content of the index.html file is:

 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  = "Click me" Onclick  = "Fff ()"  > </  Button  >  11   </  Body  >  12   </  Html  > 

After clicking "Click me", the HTML will call the JavaScript function of fff (), which is in JS/test. js.

The JS/test. js file contains the following content:

1 FunctionFff (){2VaRX = 'xxx';3 Alert (X );4}
 

Then, put the hhh project in servers/tomcat and run it (in fact, you can run it wherever it is ).

Then, run the following command on the doscommand line to start Google Chrome:

 
Chrome.exe -- remote-debugging-Port = 9222
 

In this way, Google Chrome is opened and listening on port 9222. Enter http: // localhost: 8080/hhh to open the above test page, as shown below:

Then, go back to eclipse and set it. Choose run-> debug deployments... from the menu, and then create the WebKit protocol, as shown below:

After you click debug, a dialog box is displayed, asking which tab page in the browser you want to adjust (if multiple browsers are not opened, or the browser has only one tab page, the system may not pop up the selection dialog box). Select http: // localhost: 8080/hhh as follows:

After confirmation, an additional virtual project is created, as shown below:

This virtual project automatically copies our JS files (in fact, they are copied from the web page, which will be mentioned below ). We can open the JS file in the virtual project or the original JS file to set the breakpoint. However, you must select the breakpoint type before setting the breakpoint, that is, run-> breakpoint types-> Chrome/V8 breakpoints

Then you can set the breakpoint as follows:

Then click "Click me" in the browser. Eclipse stops at the breakpoint, as shown below:

Then it is the same as debugging Java code. Note: you do not need to refresh the browser after setting the breakpoint. Note that eclipse opens two test. JS files are actually adjusted to the JS files in the virtual project, not the files in the original project (this problem will be discussed below ).

After the debugging is completed, stop and delete the virtual project in the debug perspective (window-> open perspective-> Debug.

Now the test is complete. In my actual operation, I encountered two problems:

I didn't create the test.js file at the beginning of the 1st notebook, but I directly wrote my script in index.html. The result was that the breakpoint settings didn't work. Later I found that the chromedevtools plug-in does not support embedded Javascript debugging. To adjust embedded Javascript, I still need to go).

2) according to the official documentation, we need to use JDK 1.6 or a later version. Otherwise, no error is reported, but no response is returned. In addition, because eclipse supports multiple encoders to work simultaneously, you must set the breakpoint type to run-> breakpoint types-> Chrome/V8 breakpoints.

Next we will talk about chromedevtools itself. The design goal of chromedevtools is not to adjust the source program (JavaScript), but to retrieve JS from the webpage to eclipse and then adjust it, this shows why JS files in virtual engineering are used in actual debugging. Therefore, if we make changes in the source program, we need to push them to the browser. The method is: Right-click the modified JS file-> V8 debugging-> push source changes to VM (the VM here can be considered as a browser ).

However, we still hope to adjust the source program directly when there is a source program, so as not to repeatedly switch files between the virtual project and the source program project. Fortunately, the chromedevtools plug-in also supports this usage mode. For details, see the official documentation. It should be noted that this document is older than the plug-ins I have installed, but the idea is the same. The procedure is simply to do more settings, Open Run-> debug configurations..., and then add the source program as follows:

Click Add..., select the Java project, select the Source Project (here my source project name is hhh), and click Apply to save.

After this setting, chromedevtools directly opens the source program to adjust it, as shown below:

Because my example project (the hhh project) is relatively simple, no other problems have been encountered. However, according to the official documentation, there is a technical problem of ing between the source program project file and the file in the browser. By default, this ing only matches by the short name of the file (that is, the path is not included. If a project contains multiple files with the same short name, the file cannot be matched. To do this, you need to set the file level by right-clicking the JS file-> properties-> V8 Javascript script, and then selecting the file path through the less/more button, as shown below:

at last, we only show how to use chromedevtools to adjust Javascript. This tool only supports Google Chrome. However, eclipse jsdt/jsdi is powerful enough to support all mainstream browsers. If you are interested, try it on your own.