JetBrains IntelliJ IDEA Blog

Since IntelliJ IDEA 11 the Mark Object action, which was previously available in JVM-based debuggers only, is also supported in JavaScript debuggers for Firefox and Chrome browsers. To mark an object press F11 on the corresponding node in any debugger tree and specify the label:

After that the labeled object will be marked accordingly in all debugger views:

By the way this feature also works in Flex debugger starting from IntelliJ IDEA 10.5.

When you debug JavaScript code in IntelliJ IDEA 11 you can see the most important properties of an object without expanding its node:

By default the ‘id’ and ‘name’ properties are shown for each object but you can add your own properties in Settings | Debugger | JavaScript:

This feature works for both Firefox and Chrome JS debuggers.

Let us know what you think!

IntelliJ IDEA 10 allows you to debug JavaScript code running it in Mozilla Firefox. In IntelliJ IDEA 10.5 can choose to debug JavaScript in Google Chrome as well.

Debugger for Chrome supports all features of JavaScript debugger for Firefox, you can set breakpoints, inspect local variables, evaluate expressions and so on:

If you use Chrome for web browsing and want to debug in it simultaneously you can configure IntelliJ IDEA to use a separate Chrome user profile in ‘IDE Settings | Browser | Chrome‘:

To configure the default debugging browser just edit the ‘JavaScript Debug’ configuration under ‘Defaults’ section.

Download IntelliJ IDEA 10.5 EAP, try the new JS debugger and let us know what you think.

Off-topic: debugging JS in FireFox 4 is supported since IntelliJ IDEA 10.0.3.

Meeting the needs of developers working with JavaScript, Intellij IDEA 10 adds a new feature to allow specifying global JavaScript libraries that can be used across multiple projects. For a particular project you can set a scope for each library by defining files and directories the library is applicable to. If you already have JavaScript files in your project and keep your current settings, code completion and navigation would work as before.

(more…)

Introduce variable is a very useful refactoring and is probably used quite often and for many languages IntelliJ IDEA supports. JavaScript is one of them (along with ActionScript).

IntelliJ IDEA 10 makes this refactoring even easier and more pleasant to use. Below is a simple example with highlights for the enhancements. (more…)

In the latest IDEA 9.0.2 EAP build the new ‘Scripts’ tab is available in JavaScript Debug tool window:

It displays all scripts loaded by Firefox in a tree-like structure and allows to open a script in the editor to set breakpoints in it.

If you want to debug JavaScript code in a JavaEE application you can set the corresponding option in an application server run configuration:

Make sure to check the new demos featuring:

• Local JavaScript Debugging with IntelliJ IDEA demo (6:43)
• Server-side JavaScript Debugging with IntelliJ IDEA demo (5:42)

There are more IntelliJ IDEA demos available at http://www.jetbrains.com/idea/training/demos.html

Develop with pleasure!
The JetBrains Team

Writing JavaScript/ActionScript/Flex code becomes easier with IntelliJ IDEA 9.0.2. New set of live templates (see Settings dialog (Ctrl+Alt+S), Live Templates, JavaScript/ActionScript group), allows to avoid tedious typing when you need to define a function, variable or constant, to loop over an Array, Vector or anything else. Luckily, some abbreviations are the same as with Java: iter, itar, ritar. Here’s the list of currently available live templates:

To use a live template, just type its abbreviation anywhere in your code and press Tab. Here are some examples: (more…)

It often happens that we need to edit HTML code inside JavaScript literals. With Maia this is at last possible, and even with pleasure!

Completion, quick documentation, and navigation for HTML, CSS and even JavaScript inside JavaScript literals is at your service

Sometimes when you are editing JavaScript/ActionScript code, you need to remove, say, an enclosing if statement without touching a current code block.

In Maia you can just invoke Unwrap/Remove action (Control+Shift+Delete in Windows keymap), which allows to precisely select which construct to unwrap:

Voila! The edited code block is unwrapped and in place!

BTW, this handy action works in XML/HTML/JSP files, where it removes enclosing tags.

Enjoy developing with pleasure!

Next version of IntelliJ IDEA, code named Maia, brings you several new JavaScript and ActionScript refactorings. In this post we showcase one of them — Inline Variable, which works with local variables and ActionScript class fields.

Pressing Control+Alt+N (default Windows keymap) replaces variable occurrences with an initializing expression.

During the inline process, IntelliJ IDEA checks if a variable can be safely replaced and warns if, for example, there are its usages inside a functional expression.

By the way, the Inline Variable refactoring also works in the left part of local variable assignment.

Enjoy developing with pleasure!