|
5.3 Validating JavaScript SourceThe MyEclipse source-code validation system supports validation of JavaScript files. When enabled, validation will occur when you manually validate the project, save & build the project, and while you type. Enable JavaScript Validation
You can also set the validator preferences on a per-project basis by selecting a project, right clicking, and selecting the properties action. In the properties dialog select the MyEclipse-Validation property page. You must activate the Override validation preferences option and then you can configure the JavaScript Validator specifically for your project.
Validating JavaScript Files Once JavaScript source code validation is enabled the validator will be executed while typing, each time a JavaScript file is saved, or when the validator is executed manually. To manually execute the validator, select one or more JavaScript files and then from the context-menu (right-click menu) select the MyEclipse > Run Validation action. Viewing Validation Problems Validation problems are indicated as warning markers in the JavaScript Editor, Problems view and in the Package Explorer view. To view problem details, in the JavaScript fly-over a warning marker in the left margin as shown in Fig. 13.
|
6. Debugging Local JavaScript ApplicationsThe MyEclipse JavaScript Debugging System is integrated into the Eclipse debugging architecture and is an integral part of the MyEclipse Web 2.0 Tools Platform (W2TP). In this section we will present a JavaScript debugging scenario that involves:
|
|
||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||
|
|
Resume execution; runs to next breakpoint or end of program |
|
Terminate debug process |
|
Step Into next executable source line |
|
Step Over next function |
|
Step to Return of current function |
We continue with our debugging scenario:
- Choose the Step into. .. action (see Figure 18) to move the execution context to the next executable source line. In this example line #9 transfers control to the enableAnimation() function in the mario.js file.
Figure 18: Initiate "Step into" debug action
-
The debugger opens the mario.js file in the JavaScript editor and steps into it.
Figure 19: Debug context opens
the mario.js source file
- Before we advance, set a breakpoint in the makeRun() function of mario.js
- Hit Resume to run to the next breakpoint
- The Debugger stops in the makeRun() function
Figure 20: Debugger stopped at
makeRun() function
- Select Resume to continue execution. Notice the animation
Figure 21: Animated Mario
- Select the Terminate action to terminate JavaScript debugging session
- The MyEclipse AJAX Web Browser closes and the JavaScript process is terminated in the Debug view
Figure 22: Terminating the
JavaScript debug session
6.4
Inspecting Variables
When stopped at a breakpoint or stepping through JavaScript execution, JavaScript variable values may be inspected using the Variables view. This view allows you to expand functions that are in scope and browse their properties and corresponding values. As you step through JavaScript functions the Variables view dynamically updates and refreshes its variable values as they change in order to provide you an accurate view of the execution state of your application.
Figure 23: Variable view of breakpoint state
7. Debugging JavaScript Applications From a Server
In the prior section we covered JavaScript debugging basics using the application files directly. In this section we'll be using the same example to demonstrate how to configure a advanced launch configuration to execute deployed web application resources that contain JavaScript breakpoints.
Since the Mario example from the prior sections is a MyEclipse Web Project, the first step to remotely debugging the example is to deploy it on your chosen application server. The detailed instructions to accomplish this are in section 7.1 of the Working with Web Project Tutorial here. In this specific example we'll be using Tomcat 5 as the server.
Once deployed, your server must be launched and allowed to load the application. Details on configuring an application server for use with MyEclipse are contained in section 4 of the Application Server Tutorial while instructions for launching the server are detailed in section 7.1 of the same tutorial.
Once you've followed the tutorials to deploy the test application and have started the server, debugging can begin. As in section 6, we'll need to configure a JavaScript Application launch configuration. However, since we're going to be performing server-based debugging we'll need to provide a custom configuration that will specify the correct URL for the page as referenced from the server. There are multiple options for initiating a JavaScript debugging session. Here we demonstrate launching a debug session directly from the HTML Web Designer.
- Open the the runmario.html file in the HTML Web Designer
- From context menu select Debug As > Debug...
Figure 24: Launching an HTML
file as a remote JavaScript Application
-
Once the configuration dialog displays, select 'JavaScript Application' from the list of configurations and select the New Launch Configuration button. A new configuration will be created which will look like the following one.
Figure 25: Initial Mario Launch
Configuration
-
Next, we need to modify the default configuration by changing the 'Launch URL' to point to the remotely served page, rather than the local file. For this example the application has been deployed on Tomcat so the correct remote URL for it is http://localhost:8080/JS_Mario/runmario.html, as shown below.
Figure 25: Corrected remote
Mario Launch Configuration
-
Once the name and URL have been updated, select the 'Debug' button to launch the MyEclipse AJAX Web Browser to begin debugging, just as we did in section 6 while debugging the file locally.
From this point, debugging JavaScript in pages served from an application / web server behaves identically to the 'file based' debugging that was detailed in section 6. Additionally, although this particular server debugging example used an HTML file, a JSP file that contained or referenced JavaScript would be handled the same way, as long as the URL in the launch configuration is updated appropriately.
8. Debugging JavaScript Applications With No Local Source Files (a.k.a. Instant-On Debugging)
Some JavaScript frameworks, for example DWR, generate JavaScript based on another description language . Debugging these applications, as well as other applications for which there is no local source requires special tactics. The Instant-On debugging feature allows you to debug these applications as well as investigate existing JavaScript applications to determine how they work without having to make a local copy.
We will use Google Maps to illustrate this feature.
Start by opening a new MyEclipse AJAX Web Browser. In the Address bar enter http://maps.google.com. Now click the instant-on JavaScript debugging button located in the toolbar next to the New MyEclipse AJAX Web Browser action.
Note: You must use the MyEclipse AJAX Web Browser to navigate to the web page you'd like to debug. The other web browsers currently do not support instant-on debugging.
Figure 26: Instant-on
JavaScript Debugging Button
In the Debug Perspective you will see that a JavaScript debug session has been started for Google Maps. But a debug session alone doesn't help us understand the application. We still need to be able to set breakpoints and view the JavaScript scripts that comprise Google Maps. To facilitate this bring the JavaScript Scripts Inspector View into focus. It has been added to the default Debug Perspective, so if you don't see it you can select Window > Reset Perspective to open it.
In the JavaScript Scripts Inspector View you will see the script files that comprise the Google Maps application. If you select one of these scripts and expand the tree you will see the individual functions that make up this file. By double clicking or seletcing one of the top level files or methods you can open an editor on that method or file.
Once you have an editor open on the remote script you can add breakpoints to it like you would for a local JavaScript application.
Figure 27: Using the JavaScript
Scripts Inspector to open JavaScript scripts in the editor
9. Known Limitations
-
Below is a list of debugging actions that are
not yet available in MyEclipse.
- Run-To-Line capability
- Conditional breakpoints
- Setting source path lookup for Launch configurations
- Exceptions in the Variables View
- Variables sorting in Variables View
- Multiple JavaScript Debug sessions: MyEclipse currently allows one debug session to be running at a time
10. Summary
This concludes your introduction to JavaScript Development and Debugging using MyEclipse. Additional Tutorial documents are available that introduce working with the Database Explorer, Struts, JSF, Web Projects, editing, application server configuration, EJB development, and enterprise application projects. For more information visit the MyEclipse Tutorial library.
11. User Feedback
If you have comments or suggestions regarding this document please submit them to the MyEclipse Documentation Forum.
12. Resources
-
Download MyEclipse.
-
To learn more about JavaScript visit the following site:
- A Zip archive of the Mario project presented in this document can be downloaded here JS_Mario.zip.
-
Visit the MyEclipse Tutorial Library for more MyEclipse tutorials.