AppCode 2017.1 Help

Debugging JavaScript in Firefox

In this section:

Introduction

Depending on the location of the application files, AppCode distinguishes between the following two debugging modes:

  1. Debugging applications running on the built-in server. In this mode, the application files remain where they are in the AppCode project on you machine. AppCode runs them on the built-in Web server with the root URL http://localhost:<built-in server port>/<project root>. The built-in server port (1024 or higher) is specified on the Debugger page of the Preferences dialog box.
  2. Debugging applications running on a remote external server. In this mode, the application files are on an external web server outside your AppCode project root and you have their copies in your project. No matter, whether the web server itself is running on a physically remote host or on your machine, application files deployed on it are treated as remote, see Working with Web Servers: Copying Files for details.

    You can deploy the application files to a web server and launch the application yourself or debug an already running application. In either case, a debugging session can be initiated only through a permanent debug configuration that you have to define yourself manually.

Debugging applications running on the built-in server is supported for Firefox, version 36 an higher, through the Firefox Remote debug configuration. Debugging applications running on external web servers in Firefox is not supported at all.

Debugging an application running on the built-in server in Firefox

  1. Enable debugging in Firefox:
    1. Open your Firefox browser, then open Tools | Web Developer | Toggle Tools.
    2. In the Development Tools pane that opens, click Toolbox Options button /help/img/idea/2017.1/cogwheel.png on the toolbar and select the Enable remote debugging check box under Advanced Settings.
      js_debugging_enable_debugging_in_ff_advanced_settings.png
    3. In the console at the bottom of the browser (the console appeared opened when you opened the Developer toolbar), type listen <port number>.
      js_debugging_enable_debugging_in_ff_console_listen.png
      You can specify any port number, however it is recommended that you use 6000 and higher. Later you will specify this port number in the run configuration.
    If you completed the above mentioned steps successfully, a pop-up window with the following message is shown: Listening on port 6000.
  2. Create a run/debug configuration:
    1. Choose Run | Edit Configuration on the main menu
    2. In the Edit Configuration dialog box that opens, click the Add New Configuration toolbar button add.png, and choose Firefox Remote on the context menu. Do not feel mislead by the term Remote. In this context it reflects the technical details of the implementation.
    3. In the Run/Debug Configuration: Firefox Remote dialog box that opens, specify the host where the application is running (currently it is always localhost) and the port the debugger will listen to. It must be the port that you specified when enabling debugging in Firefox. The default value is 6000.
    4. Click OK to save the configuration settings.
  3. Set the breakpoints where necessary.
  4. Open the HTML file with the related JavaScript code the editor or select it in the Project tool window, choose Open in Browser on the context menu of the selection, then choose Firefox. The browser opens showing the application after the code execution, that is, the breakpoints you set have no effect yet.
  5. Choose the newly created configuration in the Select run/debug configuration drop-down list on the toolbar and click the Debug toolbar button /help/img/idea/2017.1/debug.png. In the dialog bo that opens, click OK to allow incoming connections. From the Choose Page to Debug pop-up list, choose the page with your application.
  6. Refresh the page with your application in Firefox: the page shows the results of code execution up to the first breakpoint.
  7. In the Debug tool window, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, view actual HTML DOM, edit the code, etc.

See Also

Last modified: 28 March 2017