Required plugins: Javascript and TypeScript, JavaScript Debugger
The plugins are bundled with RubyMine and enabled by default.
With RubyMine, you can debug your client-side JavaScript in Firefox, version 36 and later, using the Firefox remote debugging functionality. However it is strongly recommended that you use Chrome or any other browser of the Chrome family for the following reasons:
RubyMine does not support source maps during a debugging session in FireFox, which blocks debugging of compressed or machine-generated JavaScript.
When debugging in Firefox, you cannot preview the changes to your HTML, CSS, or JavaScript code on the fly - this functionality, known as Live Edit, is supported only in Google Chrome.
You can debug an application running on the RubyMine built-in web server or on an external server.
Before you start
Make sure the JavaScript and TypeScript and JavaScript Debugger required plugins are enabled on the Settings/Preferences | Plugins page, tab Installed, see Managing plugins for details.
To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality. See Live Edit in HTML, CSS, and JavaScript for details.
Enabling remote debugging in Firefox
Open your Firefox browser, click on the toolbar, and go to Web Developer | Toggle Tools. The Development Tools pane opens.
On the toolbar of the pane, click , select Settings from the list, and then select the Enable browser chrome and add-on debugging and Enable remote debugging checkboxes under Advanced Settings.
Restarting Firefox with the debugger server
Windows
macOS / Linux
In RubyMine, open the Terminal tool window Alt+F12 and type <path to Firefox> -start-debugger-server <port number> at the command prompt. Later you will specify this port number in the run configuration. You can set any port number, however it is recommended that you use 6000 and later.
note
Note that there is only one dash in -start-debugger-server.
For versions 61 and earlier you do not need to restart Firefox.
Open Firefox, go to Tools | Developer | Developer Toolbar, and type listen <port number> in the console that opens at the bottom of the browser.
Debugging your application
Set the breakpoints in the JavaScript code, as required.
Create a debug configuration of the type Firefox Remote: from the main menu, select Run | Edit Configuration, click on the toolbar and select Firefox Remote from the list.
In the dialog that opens, type localhost in the Host field. In the Port field, type the port that you specified when you enabled remote debugging in Firefox. The default value is 6000.
Open your application in Firefox. The browser shows the application after the code execution, that is, the breakpoints you set have no effect yet.
Choose the newly created configuration in the Select run/debug configuration list on the toolbar and click .
In the dialog that opens, click OK to allow incoming connection from the browser.
Refresh the application page in the browser: the page shows the results of code execution up to the first breakpoint.
Suppose you have a simple application that consists of two files: index.html and index.js file, where index.html references index.js. This example shows how you can debug the application when it is running on the RubyMine built-in server.
In the Terminal tool window (Alt+F12, type start firefox --start-debugger-server 6000 at the command prompt.
on the toolbar, and go to . The Development Tools pane opens.
, select Settings from the list, and then select the Enable browser chrome and add-on debugging and Enable remote debugging checkboxes under Advanced Settings.
on the toolbar and select Firefox Remote from the list.
.
