Talking about JavaScript debugging, it always, the first idea came to mind is to use firebug, undoubtedly, it’s the primary option for most of people. In this article, we have a new look to remotely debug JavaScript with IDEA, what we do is because we believe its getting benefits from IDEA’s flexibility, extensibility and favorable user faces.

First download a plugin ‘JBExtension’ from IntelliJ IDEA, this tool was developed by a IntelliJ IDEA engineers, the installation directory is located %IDEA_HOME%\plugins\JavaScriptDebugger\firefox, after finished, drag the file JBExtension.xpi into firefox window to complete the installation.

Then to create a JavaScript Debug configuration, select Firefox from the Browser list and click OK, The several IDEA versions have supported debugging of JavaScript code in Mozilla Firefox. you have to specific the mapping relation from remote to local JS.

Right now, we have finished remote debugging configration, Just click the Debug button to start it, IntelliJ IDEA automatically open a new firefox window and redirect your url address which you have setted before, please set the breakpoint on any lines wthin javascript files, when the program run to there IDEA will help you collect the debugging informations, current IDEA can only supports unmixed javascript.

If you want to stop this debugging just click ‘Disconnect’ under tools-> JS Debugger. then the html does not bocked by IDEA.

Note that you need to clear Make option under Before launch group before starting debugger to work around a bug that will be fixed in next Maia EAP, In total FireBug is aready excellent plugin, but using IDEA to remotely debug javascript is also onevaluable choice . it supports many feature  such as navigation, coding inform,  repairing when found issues.