Integrated Debugging with VS Code

Visual Studio Code (VS Code) is a free, open source development environment for Windows, Mac and Linux.

Debugging React Storefront with VS Code

Refer to the Visual Studio Code Debugging documentation for full details on how to setup your debugger. For a quick start follow these steps:

  • Open your PWA project directory with VS Code
cd <your PWA Project Directory>
code .
  • Open the Debug Panel with <ctrl> + <shift> + D
  • Open the debugger settings by clicking on the gear icon at the top right of the debugger panel. This opens the file launch.json
    • The first time you will be asked to select an environment. Select node.js
  • In the launch.json block, under configurations replace the contents of [ ] with the following
{
  "type": "node",
  "request": "launch",
  "name": "PWA Project",
  "program": "/usr/local/bin/moovsdk",
  "args": [
    "start",
    "--path",
    "${workspaceFolder}",
  ]
}
  • Save launch.json

What does this do?

  • type - This is a Node.js project
  • request - Launch Node.js to when debugging starts
  • name - Name to appear in the debugger drop down menu
  • program - OS X and Linux Full path to the Node.js script to run. In this case it is the Moov SDK. If you installed the SDK locally as part of your project instead of globally, you can change this line to "program": "${workspaceFolder}/node_modules/moovsdk/bin/moovsdk".
  • program - Windows Full path to the Node.js script to run. In this case it is the Moov SDK. If you installed the SDK locally as part of your project instead of globally, you can change this line to "program": "${workspaceFolder}\node_modules\moovsdk\bin\moovsdk". For Windows users the global installation path for the Moov SDK is %LOCALAPPDATA%\Yarn\bin\moovsdk
  • args - The command line arguments for the Moov SDK. In this case we start the SDK with ${workspaceFolder} as the initial directory.

Optionally add a configuration to attach to existing an Node.js process

Under configurations you can add a second configuration that let's you attach your VC Code debugger to an existing Node.js process

{
  "type": "node",
  "request": "attach",
  "name": "Attach to SDK",
  "processId": "${command:PickProcess}"
}

Example of complete launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to SDK",
      "processId": "${command:PickProcess}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "PWA Project",
      "program": "/usr/local/bin/moovsdk",
      "args": [
        "start",
        "--path",
        "${workspaceFolder}",
      ]
    }
  ]
}

Starting your project with the debugger

Once you have added and saved the debugger launch configurations, you are ready to start debugging. From the debugger window dropdown menu select PWA Project and click on the green arrow to start debugging your project.