IntelliJ® IDEA 7.0

Debuggers for JavaScript and Flex

IntelliJ IDEA's debugger now supports JavaScript and Flex debugging with a complete range of features — watches, conditional breakpoints, dependent breakpoints, expression evaluation and more.

JavaScript Debugger live demo

• Breakpoints in HTML, JavaScript/ActionScript and JSP/MXML files
• Customizable breakpoint properties: suspend mode, conditions, pass count and more
• Frames, variables and watches views
• Runtime evaluation of JavaScript expressions
  

Extended frameworks

• JSON supported, with coding assistance
• JSDoc and DoJo style type annotations support for improved code completion and parameter type information
• Quick documentation lookup for for JSDoc and DoJo style comments
• JavaScript namespaces support in code completion and inspections

JavaScript code completion

IntelliJ IDEA completes keywords, labels, variables, parameters and functions, including completion in HTML event handlers.

Completion works fine for both user defined and built-in JavaScript functions.

New in version 6.0, JavaScript completion is DOM-based and browser-aware, which is helpful for developing scripts that are intended to run under multiple browsers.

Since version 6.0 the code completion has also been enhanced with the support for the most popular

JavaScript frameworks like Dojo, Prototype and Bindows.

to the top

JavaScript error & syntax highlighting

IntelliJ IDEA is capable of highlighting JavaScript errors on-the-fly to hunt them far before your application produces an error.

Advanced syntax highlighting works fine both in standalone JavaScript (JS files) and embedded HTML JavaScript code.

to the top

JavaScript refactoring

The full range of IntelliJ IDEA refactorings supports the JavaScript code. Rename file, function, variable, parameter, or label (both directly and via references, even within HTML):

Rename file, function, variable, parameter, or label (both directly and via references, even within HTML):

Move/Copy file: you can easily move a .js file to another directory, by simply pressing F6 and specifying its new location. All references to the file throughout your project will be automatically resolved.

Safe Delete file: in case you are trying to delete a .js file that referenced in other project files, IntelliJ IDEA will notify you about that, giving you an opportunity to either resolve the inconsistency first, or just cancel the operation.

Extract inlined script from HTML into a JS file.

This refactoring is especially good when you need to reuse, say, an event handler for multiple HTML objects. It lets you extract the inlined script to a separate JS file, and replaces the inlined code with calls to the extracted script.

to the top

JavaScript code formatting

Formatting for JavaScript code is supported through customizable settings. This allows to follow almost any coding guide-lines that concern code styles. Formatting options for JavaScript are actually inherited from those for Java and are shareable.

to the top

JavaScript code folding

To make your code view more clear to read and understand, IntelliJ IDEA lets you fold certain parts of it. The Code Folding feature collapses blocks of code with a single shortcut (Ctrl + NumPad +). The folded code can be quickly seen in a popup by positioning the cursor over the grayed dots.

to the top

Surrounding JavaScript code blocks with common constructs

The Surround With command (Ctrl + Alt + T) can be called on a selected block of JavaScript code, for quickly inserting it into a surrounding construct, like expression parentheses, if/else block, etc.

to the top

Advanced JavaScript Search and Navigation

IntelliJ IDEA lets you search for JavaScript symbols, labels, files and shows all places in the entire project where the search item is used.

Results are shown in a tree-view, with one-click navigation to the actual usages in source code, or highlighted so that you can view then while browsing the project files.

to the top

Goto symbol

You can use the (Ctrl + Alt + Shift + N) shortcut to navigate through symbols declared in your JavaScript code.

Different search patterns are supported, including use of asterisk (*) and CamelHump abbreviations.

to the top

Goto declaration

Navigation to a declaration lets you browse through the functions, variables and labels declared in your JavaScript code. Use the Ctrl + Click combination, or position the caret at a symbol usage and press Ctrl + B. This will immediately navigate you to the line of code where the label is declared.

to the top

JavaScript structure view

IntelliJ IDEA lets you examine the logical structure of your JavaScript code. The Autoscroll to Source and Autoscroll from Source toolbar buttons keep you synchronized with the editor.

Flex-ready intention actions

• implement/override methods
• generate accessors and constructors
• auto-import
• Imports optimization

Flex support live demo

IntelliJ IDEA supports Flex through the dedicated Flex Facet and provides the advanced coding assistance for ActionScript 4, MXML (with embedded JavaScript), with code completion, syntax and error highlighting with quick-fixes and refactorings, smart navigation, annotations, plus the quick documentation lookup from Flex SDK to help you productively develop Flex applications.

Flex Code Editing

IntelliJ IDEA ActionScript and MXML editor is beefed up with new features like implement/override methods, generate accessors and constructors, auto-import and optimize imports, etc. IntelliJ IDEA 8 also supports Flash 10 ActionScript generics.

• Automatic namespace import when you use a class or interface
• Alt+Ins automatically generates the following code:
  • Implemented methods
  • Overriden methods
  • Getters and setters for properties

Flex-aware smart code completion

IntelliJ IDEA Flex coding assistance recognizes Flash 10 generics.

Flex code syntax highlighting and formatting

Flex-ready on-the-fly code inspections with instant quick-fixes

Go to symbol, declaration and usage features are also Flex-aware

Flex-ready code refactorings

IntelliJ IDEA features the basic set of refactorings to transform and upgrade your Flex code.

• Copy
• Move
• Safe delete
• Introduce variable
• Migrate

Advanced Flex-aware code structure view