Debugging
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,
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:
- Node.js debugging in VS Code: Breakpoints (Server & Client)
- Chrome DevTools: Debug JavaScript (Server & Client)
- The Firefox JavaScript Debugger (Client Only)
- Node.js Inspector Clients
- Debug with log output