|
||||||||||
Table of Contents
|
||||||||||
1. Introduction
This document presents an overview of JavaScript development
features available in MyEclipse 6.0.
|
||||||||||
2. JavaScript EditorThe MyEclipse JavaScript Editor provides advanced language specific editing features such as:
|
||||||||||
2.1 Code-AssistThe JavaScript editor provides code-assist proposals for your current context whenever you press the Ctrl+Space key combination. Each proposal includes a small graphic indicator of whether the JavaScript proposal is supported by IE and Netscape/Mozilla/Firefox. If a browser compatibility indicator is grayed out then the proposal is not supported by that browser.
Local JavaScript variables and functions are also made available in the code-assist proposals.
|
||||||||||
2.2 Syntax CheckingThe JavaScript editor provides "as-you-type" syntax checking and shows syntax errors in multiple locations to make it easy to see where errors are in your JavaScript code.
|
||||||||||
2.3 ValidationValidation 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. 2.3.1.
|
||||||||||
2.4 Outline ViewThe outline view depicts a structured view of the functions and variables of a JavaScript Editor. The variables in the list may be filtered using the "Show Variables" action from the view's menubar.
|
||||||||||
2.5 Source Actions: Formatting/Quick CommentThe JavaScript editor can quickly format either highlighted sections or the entire JavaScript file. This action is available in the Source menu, editor Context-menu, or using the Ctrl+F shortcut.
To toggle on or off one or more single line comments select the region to comment and enter Ctrl+Shift+C .
|
||||||||||
2.6 Editor Preferences
The JavaScript editor has several source related preference pages
that allow you configure different aspects of editing JavaScript.
The JavaScript Source page configures options for formatting
source and content-assist. Validation options are also
available.
JavaScript styles preference page allows customization of syntax
highlighting.
The JavaScript validator can be enabled/disabled by configuring
the options in the main validation preference page.
|
||||||||||
3. JavaScript DebuggerThe MyEclipse JavaScript Debugging System is integrated into the Eclipse debugging architecture and is an integral part of the MyEclipse Ajax Development tools. In this section we will present a JavaScript debugging scenario that involves:
|
||||||||||
3.1 Setting Breakpoints
JavaScript breakpoints can be set in the JavaScript editor, the
HTML Web Designer or the JSP Web Designer. Within any of these
editors, JavaScript breakpoints are set in the left-hand margin
(often referred to as the editor gutter) by double-clicking next
to the source line or by right clicking and selecting
Toggle Breakpoints.
Breakpoints can also be added in JavaScript that is embedded in an HTML page.
Both types of JavaScript breakpoints are shown in the standard Eclipse Debug breakpoints view.
|
||||||||||
3.2 Launching/Debugging JavaScript ApplicationsJavaScript Application launch configurations have been improved to support 2 different types of JavaScript applications: (Project file-based configuration and URL-based configuration). Each launch configuration can also set 4 specific JavaScript debug preferences for suspending on various events.
In previous MyEclipse releases, only URL based JavaScript configurations were possible. Now project file-based configurations can be configured.
|
||||||||||
3.3 Stepping through JavaScript CodeWhen halted at a breakpoint the following actions are available from the toolbar of the Debug View.
|
||||||||||
3.4 Inspecting VariablesWhen 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.
|
||||||||||
3.5 Watch Expressions / EvaluationJavaScript debugging now supports watch expressions. In the Expression view, you add watch expressions to monitor JavaScript variables. When you stop at a breakpoint the expressions will evaluate and display their values in the Expression view.
|
||||||||||
3.6 JavaScript Scripts ViewWhen debugging a JavaScript application, the Script view will show all of the currently executing JavaScript scripts that are running in the Ajax Web Browser. Any of these scripts can be opened by just double-clicking on any script. The children elements of each top script shows the JavaScript functions that are available, so you can jump straight to that function when you open the script. Opening the script will allow you to inspect the code and set breakpoints accordingly.
|
||||||||||
3.7 Debug PreferencesA new preference page has been added to support default options for JavaScript debugger settings. The new page is available at the MyEclipse > AJAX > JavaScript Debug preference path.
|
||||||||||
4. Instant-On Debugging
The Instant-On JavaScript Debugging action in the AJAX Web
Browser toolbar and MyEclipse Web Browser editor. Clicking
this action will begin debugging the current URL as a JavaScript
application.
|
||||||||||
5. Wizards
To create a new JavaScript file, use the new file wizard and
select
MyEclipse > Web > JavaScript file as shown
below.
|
||||||||||
6. FeedbackWe would like to hear from you! If you liked this overview, have some suggestions or even some corrections for us please let us know. We track all user feedback about our learning material in our Documentation Forum. Please be sure to let us know which piece of MyEclipse material you are commenting on so we can quickly pinpoint any issues that arise. |