This reference documentation explains how to debug your Front-Commerce app using breakpoints.
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
"name": "FC: debug server-side",
"command": "npm run start -- --inspect"
"name": "FC: debug client-side",
"name": "FC: debug full stack",
"command": "npm run start -- --inspect",
"pattern": "started server on .+, url: (https?://.+)",
If you're changing the port number
your application starts on, replace the
the port you're using instead. You can use the same url defined in your
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.
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,
Now, any time your client-side code reaches a
statement, code execution will pause and that file will appear in the debug
You can also press Ctrl+P on Windows/Linux or⌘+P on macOS to search for a file and set breakpoints manually.
To debug server-side Front-Commerce code with Chrome DevTools, you need to pass
--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:
> firstname.lastname@example.org 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