Debugging

Debug your Front-Commerce app.

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:

Edit on GitHub  or  Send us a feedback