Skip to main content
Version: 2.x

This reference documentation explains how to debug your Front-Commerce app using breakpoints.

Debugging

Debugging your code is an important part of the development process. This documentation explains how you can debug your Front-Commerce frontend and backend code using either the VS Code debugger or Chrome DevTools.

Any debugger that can attach to Node.js can also be used to debug a Front-Commerce application. You can find more details in the Node.js Debugging Guide.

Debugging with VS Code​

Create a file named .vscode/launch.json at the root of your project with the following content:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "FC: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run start -- --inspect"
    },
    {
      "name": "FC: debug client-side",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:4000"
    },
    {
      "name": "FC: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run start -- --inspect",
      "console": "integratedTerminal",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

If you're changing the port number your application starts on, replace the 4000 in http://localhost:4000 with the port you're using instead. You can use the same url defined in your FRONT_COMMERCE_URL.

Now in VS Code go to the Debug panel (Ctrl+Shift+D on Windows/Linux,

⇧+⌘+D on macOS), select a launch configuration, then press F5 or select Debug: Start Debugging from the Command Palette to start your debugging session.

See Debugging in Visual Studio Code (official documentation) for more details.

Example using VSCode​

Debugging with Chrome DevTools​

Several browsers support Client Side Debugging, which allows you to debug your Front-Commerce application in the browser. If your browser does not support Node.js debugging, you can refer to the Inspect Clients docs to find a server-side code debugging client which suits your environment.

Client-side code​

Start your development server as usual by running npm run start. Once the server starts, open http://localhost:4000 (or your alternate URL) in Chrome. Next, open Chrome's Developer Tools (Ctrl+Shift+J on Windows/Linux,

⌥+⌘+I on macOS), then go to the Sources tab.

Now, any time your client-side code reaches a debugger statement, code execution will pause and that file will appear in the debug area.

You can also press Ctrl+P on Windows/Linux or ⌘+P on macOS to search for a file and set breakpoints manually.

Server-side code​

To debug server-side Front-Commerce code with Chrome DevTools, you need to pass the --inspect flag to the underlying Node.js process:

npm run start -- --inspect

Launching the Front-Commerce dev server with the --inspect flag will look something like this:

> front-commerce-skeleton@1.0.0-rc start
> cross-env NODE_ENV=development front-commerce start "--inspect"

Debugger listening on ws://127.0.0.1:9229/d00f8057-d9ce-4aeb-bcf2-805f7b681110
For help, see: https://nodejs.org/en/docs/inspector
   WEBPACK  Compiling client...
   WEBPACK  Compiling server...

Once the server starts, open a new tab in Chrome and visit chrome://inspect, where you should see your Front-Commerce application inside the Remote Target section. Click inspect under your application to open a separate DevTools window, then go to the Sources tab.

Example using Chrome DevTools​

More information​

To learn more about how to use a JavaScript debugger, take a look at the following documentation: