Phpstorm Nodejs



You can quickly bootstrap your Node.js application with Docker to run, debug, and profile it from PhpStorm. The IDE will take care of the initial configuration by automatically creating a new Dockerfile, building and running an image, syncing your source code, and installing npm dependencies in the container.

You can find some examples at Quick Tour of WebStorm and Docker.

Before you start

  1. Install and enable the Node.js Remote Interpreter plugin on the Settings/Preferences | Plugins page as described in Installing plugins from JetBrains repository.

  2. Make sure the Node.js and Docker bundled plugins are enabled on the Settings/Preferences | Plugins page, see Managing plugins for details.

  3. Download, install, and configure Docker as described in Docker

About Press Copyright Contact us Creators Advertise Developers Terms Privacy Policy & Safety How YouTube works Test new features Press Copyright Contact us Creators.

Create a Node.js run/debug configuration

I have a windows box and a VM running CentOS. Does anyone happen to know how I can debug a node CLI script (which doesn't open a port) using PHPStorm? The 'edit configuration' seems to only support. Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Latest LTS Version: 14.16.1 (includes npm 6.14.12) Download the Node.js source code or a pre-built installer for your platform, and start developing today. WebStorm is a popular JavaScript IDE, which is ideal for server-side development with Node.js. The IDE provides intelligent code completion, navigation, automated and safe refactorings, and other features. Node.js and NPM. This page appears only when the Node.js bundled plugin is enabled in the Installed tab of the Settings/Preferences Plugins page as described in Managing plugins. The following Node.js versions are supported in PhpStorm 2020.3: Node.js 10. Learn more from Supported Node.js versions.

  1. From the main menu, choose Run | Edit Configuration, then in the Edit Configurations dialog, click on the toolbar and select Node.js from the list. The Run/Debug Configuration: Node.js dialog opens.

  2. In the JavaScript File field, specify the path to the main file of the application that starts it (for example, bin/www for Express applications).

  3. If necessary, specify some optional settings as described in Running and debugging Node.js applications.

Specify a Node.js interpreter

Select one of the configured Node.js interpreters of the type Remote Interpreter - Docker from the Node interpreter list or configure a new one.

  1. In the Run/Debug Configuration: Node.js dialog, click next to the Node interpreter field.

  2. In the Node.js Interpreters dialog that opens with a list of all the currently configured interpreters, click on the toolbar. In the dialog that opens, choose Add Remote from the context menu.

  3. In the Configure Node.js Remote Interpreter dialog that opens, select the Docker option.

    1. In the Server field, specify the Docker configuration to use, see Configure the Docker daemon connection settings for details. Select a configuration from the list or click New... and create a new configuration on the Docker page that opens.

    2. In the Image name field, specify the base Docker image to use. Choose one of the previously downloaded or your custom images from the list or type the image name manually, for example, node:argon or mhart/alpine-node. When you later launch the run configuration, Docker will search for the specified image on your machine. If the search fails, the image will be downloaded from the Docker Official Images repository on the Docker Registry page.

    3. The Node.js interpreter path field shows the location of the default Node.js interpreter from the specified image.

    4. When you click OK, PhpStorm closes the Configure Node.js Remote Interpreter dialog and brings you to the Node.js Interpreters dialog where the new interpreter configuration is added to the list. Click OK to return to the run configuration.

Specify the Docker container settings

  • Click next to the Edit Docker Container Settings field and specify the settings in the Edit Docker Container Settings dialog that opens.

  • Alternatively, select the Auto configure checkbox to do it automatically. Learn more about the Auto configure mode at Quick Tour of WebStorm and Docker: What Happens On Each Run.

Nodejs Php Server

Even with automatic configuration, you still need to bind the port on which your application is running with the port of the container. Those exposed ports are available on the Docker host’s IP address (by default 192.168.99.100). Such binding is required when you debug the client side of a Express application. In this case, you need to open the browser from your computer and access the application at the container host through the port specified in the application.

Configure port bindings

  1. Click in the Docker Container Settings field and expand the Port bindings area in the Edit Docker Container Settings dialog that opens.

  2. Click and in the Port bindings dialog that opens, map the ports as follows:

    • In the Container port field, type the port specified in your application.

    • In the Host port field, type the port through which you want to open the application in the browser from your computer.

    • In the Host IP field, type the IP address of the Docker's host, the default IP is 192.168.99.100. The host is specified in the API URL field on the Docker page of the Settings / Preferences dialog.

    • Click OK to return to the Edit Docker Container Settings dialog where the new port mapping is added to the list.

  3. Click OK to return to the Run/Debug Configuration: Node.js dialog.

Run your application

  1. Create a Node.js configuration as described above.

  2. From the Select run/debug configuration list on the toolbar, select the newly created Node.js configuration.

  3. Click to the Select run/debug configuration list.

Start debugging

Convert Php To Nodejs

  1. Set the breakpoints in the Node.js code as necessary.

  2. Create a Node.js configuration as described above, select it from the Select run/debug configuration list on the toolbar, and click next to the list.

  3. Proceed as when starting the debugger together with a Node.js application.

Using a remote Node.js interpreter in a Docker container with a Docker Compose definition

With Docker Compose, you can run a Node.js server and your application code as separate services. Each service can be scaled by adding more containers if necessary. This enables you to perform efficient development and testing in a dynamic environment that is similar to production one.

Configuring mappings

When you debug an application with a remote Node.js interpreter, the debugger tells PhpStorm the name of the currently processed file and the number of the line to be processed. PhpStorm opens the local copy of this file and indicates the line with the provided number. This behaviour is enabled by specifying correspondence between files and folders on the server and their local copies. This correspondence is called mapping, it is set in the debug configuration.

Phpstorm nodejs debug
  1. From the main menu, choose Run | Edit Configurations. In the Edit Configuration dialog that opens, click on the toolbar and choose Node.js from the context menu.

  2. In the Run/Debug Configuration: Node.js dialog that opens, choose the required remote interpreter from the Node interpreter list.

  3. Click next to the Path Mappings field. The Edit Project Path Mappings Dialog that opens shows the path mappings retrieved from the deployment configuration. These mappings are read-only.

    • To add a custom mapping, click and specify the path in the project and the corresponding path on the remote runtime environment in the Local Path and Remote Path fields respectively. Type the paths manually or click and select the relevant files or folders in the dialog that opens.

    • To remove a custom mapping, select it in the list and click .

PhpStorm helps you run and debug your Node.js applications. You can debug applications that are started from PhpStorm as well as attach to already running applications.

Before you start

Make sure the Node.js bundled plugin is enabled on the Settings/Preferences | Plugins page, see Managing plugins for details.

Running a Node.js application

PhpStorm runs Node.js applications according to a run configuration of the type Node.js. PhpStorm also uses this configuration to start the debugger together with Node.js applications.

Create a Node.js run/debug configuration

  1. From the main menu, choose Run | Edit Configuration, then in the Edit Configurations dialog, click on the toolbar and select Node.js from the list. The Run/Debug Configuration: Node.js dialog opens.

  2. Specify the Node.js interpreter to use. This can be a local Node.js interpreter or a Node.js on Windows Subsystem for Linux.

  3. In the JavaScript File field, specify the path to the main file of the application that starts it (for example, bin/www for Express applications).

  4. Optionally:
    • Specify the Node Parameters that customize the start of Node.js. For example, you may want to enable an experimental Node.js feature or pass another option, see the Node.js official website for details.

      The default debugger port is 5858.

    • In the Application parameters field, specify the Node.js-specific arguments to be passed to the application on start through the process.argv array.

Php Vs Nodejs Benchmark

Run an application

  • Select the newly created Node.js configuration from the Select run/debug configuration list on the toolbar and click next to it. The application starts, and the Run tool window opens showing the application output.

If you are using a logging tool like morgan in your application and this tool writes logs to a file, you can see these logs in the Console tab of the Run tool window.

Manage logs when running a Node.js application

  1. Create a Node.js run/debug configuration as described above and go to the Logs tab.

  2. Click next to the Log files to be shown in console field which lists the available log files (if any).

  3. In the Edit Log Files Aliases dialog that opens, type the alias name to show in the list of log entries and specify the location of the log file. Select whether you want to show all files that this pattern covers or only the last one.

  4. Click OK to return to Node.js Run/Debug Configuration dialog, where the new log file is added to the list. Select the Is Active checkbox next to it. To skip the previous content, select the Skip Content checkbox.

  5. Optionally:
    • To enable saving the Process Console output to a log file, select the Save console output to file checkbox and specify the file location.

    • Choose when you want the Process Console shown.

Debugging a Node.js application

PhpStorm makes it easier to debug Node.js applications. You can put breakpoints right in your JavaScript or TypeScript code so you no longer need any debugger and console.log() statements. You can do many things that will help you explore the code and understand where the bug is. In the Debug tool window, you can view the call stack and the variables in their current state, evaluate expressions in the editor, and step through the code.

You can initiate a debugging session in two ways:

  • Start the debugger together with your application using a Node.js run/debug configuration.

  • Attach the debugger to an already running application. In this case, your application is already running in the debug mode and PhpStorm attaches to a running process.

    PhpStorm recognizes --inspect, --inspect-brk, and now deprecated --debug flags so you can make any application accessible for debugging.

    To debug a running application, use an Attach to Node.js/Chrome configuration.

With PhpStorm, you can also debug Node.js applications that are running in Vagrant boxes, in Docker containers, or on remote hosts accessible via various transfer protocols or via SSH.

Starting the debugger together with a Node.js application on your computer

  1. Set the breakpoints in the code where necessary.

  2. Create a Node.js run/debug configuration as described above. If necessary, PhpStorm can generate a JavaScript Debug configuration and start it automatically together with the Node.js configuration as described in Debugging the server- and the client-side code.

  3. Select the newly created Node.js configuration from the Select run/debug configuration list on the toolbar and click next to it. The Debug tool window opens.

  4. Perform the steps that will trigger the execution of the code with the breakpoints.

  5. Switch to PhpStorm, where the controls of the Debug tool window are now enabled. Proceed with the debugging session — step through the breakpoints, switch between frames, change values on-the-fly, examine a suspended program, evaluate expressions, and set watches.

Nodejs

Debugging a running Node.js application

With PhpStorm, you can debug an already running application with the Chrome Debugging Protocol or with the V8 Debugging Protocol (also known as Legacy Protocol ).

In either case, a debugging session is initiated through an Attach to Node.js/Chrome configuration.

Start the debugger from the built-in Terminal or from the Run or Debug tool window

If an application was started with the --inspect or --inspect-brk flag, you can start a debugging session from the built-in Terminal, from the Run tool window, or from the Debug tool window.

  1. Run your application with an --inspect or --inspect-brk flag. You can do that in several ways, for example:

    • Open the embedded Terminal (Alt+F12) and, type:

      node --inspect-brk <path to the starting page of your application relative to the project root>

    • Launch a script from package.json or from the npm tool window, see Run and debug scripts for details.

      Depending on the action you select from the list, the output will be shown in the Run or in the Console tab of the Debug tool window.

  2. The Terminal, the Run tool window, or the Console tab of the Debug tool window shows an information message Debugger listening <host>:<port>, the default port is 9229. To start debugging, hold Ctrl+Shift and click the link.

    PhpStorm starts a debugging session with an automatically generated Attach to Node.js/Chrome configuration.

    Alternatively, copy the port number from the Debugger listening <host>:<port> message and paste it later in the Attach to Node.js/Chrome configuration.

Phpstorm Nodejs Debugging

Debug with Chrome Debugging Protocol

Use this protocol to debug applications started with the --inspect or --inspect-brk flag. This flag is used with Node.js versions later than 6.3.

  1. Set the breakpoints as necessary.

  2. Select Run | Edit Configurations from the main menu, then click in the Edit Configuration dialog that opens, and select Attach to Node.js/Chrome from the list. The Run/Debug Configuration: Attach to Node.js/Chrome dialog opens.

  3. Specify the host where the target application is running and the port passed to --inspect or --inspect-brk when starting the Node.js process to connect to. Copy the port number from the information message Debugger listening <host>:<port> in the Terminal tool window or in the Run tool window that controls the running application. The default port is 9229.

    Optionally: specify the remote paths for the project folders in the Remote URLs of local files area. This is helpful if the root folder of the running application is different from the name of you PhpStorm project root folder.

  4. In the Attach to area, select Chrome or Node.js > 6.3 started with --inspect.

  5. Select the newly created Attach to Node.js/Chrome configuration from the Select run/debug configuration list on the toolbar and click next to it. The Debug tool window opens.

  6. Perform the actions that will trigger the code at the breakpoint. Control over the debugging session returns to PhpStorm.

  7. Switch to PhpStorm. In the Debug tool window, step through the breakpoints, switch between frames, change values on-the-fly, examine a suspended program, evaluate expressions, and set watches.

Debug with V8 Debugging Protocol

Use this protocol to debug applications started with the --debug flag. This flag is used with Node.js versions earlier than 8.

Nodejs Vs Php Speed

  1. Create an Attach to Node.js/Chrome run/debug configuration as described above and specify the host and the port passed to --debug. The default port is 9229.

  2. Make sure the application to debug was launched with the following parameters: --debug=<debugger port>. The default port is 5858.

  3. Proceed as during a debugging session with Chrome Debugging Protocol.

Debugging a Node.js application that uses nodemon

See Running and debugging scripts for details.

The PhpStorm built-in debugger can automatically reconnect to running Node.js processes. This lets you debug Node.js applications that use the nodemon utility, which automatically reloads your Node.js process when the code is updated.

To debug such application, you need to start it in the debug mode (with the --inspect or --inspect-brk flag) and then connect to it using the Attach to a Node.js/Chrome debug configuration with the Reconnect Automatically option on.

Phpstorm Nodejs Plugin

Install nodemon

  • In the embedded Terminal (Alt+F12), type npm install --save-dev nodemon or yarn add nodemon --dev to install nodemon as a development dependency.

Start an application with nodemon in the debug mode

  • Create and run the following npm debug script:

    debug': 'nodemon --inspect <path_to_the_file_that_starts_your_application>

    See Running and debugging scripts for details.

  • Alternatively, pass the inspect flag through a Node.js run/debug configuration as described above.

Debug an application

  1. Set the breakpoints in your code as necessary.

  2. Create a new Attach to a Node.js/Chrome configuration as described in Debugging a running Node.js application and select the Reconnect automatically checkbox.

    Usually, you don’t need to change the port in the configuration 9229 because it’s the default port the debugger is listening on. But you can double-check what port is used in the message logged when you run the app in the debug mode.

  3. Select the newly created Attach to Node.js/Chrome configuration from the Select run/debug configuration list on the toolbar and click next to it. The debugger stops at the breakpoints that you put in your code in PhpStorm.

    Now, every time you make any changes to the code and save them Ctrl+S, nodemon will automatically reload the application and the debugger will automatically re-attach to the restarted process.