Skip to main content
Version: 3.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​

A predefined launch.json file is available in the skeleton project. You can use it to debug your Front-Commerce application, however if it's not the case, you can create a file named .vscode/launch.json at the root of your project with the following content: following content:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with NPM",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev:debug",
      "cwd": "${workspaceFolder}"
    }
  ]
}

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. You must choose the Debug with NPM or Debug with PNPM configuration depending on how you're running your Front-Commerce application.

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 pnpm run dev. 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 run the following command:


  npm run dev:debug

Launching the Front-Commerce dev server in debug mode will look like this:

> front-commerce-skeleton@3.11.0 dev:debug /home/user/app/front-commerce
> node --inspect --import tsx/esm ./server.mjs

Debugger listening on ws://127.0.0.1:9229/35bd86ba-3788-4110-b68d-c620f98ecfcd
For help, see: https://nodejs.org/en/docs/inspector

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: