Debugging

WARNING

This page is written for development on the support/apply-nextjs-2 branch.

This documentation explains how you can debug frontend and backend code using Browser DevTools or VS Code debugger.

• Debugging with Browser DevTools
• Debugging with VS Code

Debugging with Browser DevTools

You can debug client-side code by using DevTools in your browser.

Chrome

1. Start development server yarn dev.
2. Chrome DevTools (opens new window)
   • You can debug client-side code by using the Sources panel (opens new window).
   • If you open a TypeScript file by Ctrl + P, you should choose files under webpack://_N_E/.

Firefox

1. Start development server yarn dev.
2. Firefox DevTools (opens new window)
   • You can debug client-side code by using JavaScript Debugger (opens new window).
   • If you open a TypeScript file by Ctrl + P, an original source file is a file of the name with a random suffix such as ?xxxx.
     • Or you can select a file under the Webpack folder from the source file tree in the left column.

Debugging with VS Code

VS Code supports debugging of both client-side and server-side code.

Client-side code

You can debug in the same way as in Debugging with Browser DevTools. Breakpoints can be set for source code being edited on VS Code.

• Chrome

  1. Start development server yarn dev.
  2. Choose [Debug: Chrome] from the Run and Debug panel.
  

• Firefox

  1. Start development server yarn dev.
  2. Choose [Debug: Firefox] from the Run and Debug panel.
  

Server-side code

The VS Code debugger can be attached to the development server in two ways.

• Use [Debug: Attach Debugger to Server]

  • Features: Fast and flexible, attach/detach at any time during development

  • Follow the steps below:

    1. Start development server yarn dev first.

       • Verify that the 9229 port forwarding is listed in the Ports panel.
       

    2. Choose [Debug: Attach Debugger to Server] from the Run and Debug panel.

    

• Use [Debug: Server]

  • Feature: You can set breakpoints for the server startup process

  • Follow the steps below:

    1. Select [Debug: Server] from the Run and Debug panel.
    

If the debugger is attached successfully, the status bar of VS Code turns an orange color. In this state, you can debug by setting breakpoints in any server-side code.

Handling Unbound Breakpoints

If you set a breakpoint but still get an Unbound breakpoint, check the following.

• Verify that it is imported/required from Express code.
• Among the files under packages/app/src/pages, the file with the extension *.page.ts is Pages Component of Next.js (opens new window). Since these files have not yet been compiled immediately after the development server is started, breakpoints cannot be set. Please compile a page component by accessing the relevant page from your browser.
• If you are experiencing instability with your breakpoints being enabled or disabled (unbound breakpoints), consider setting the --nolazy option to your Node.js process.
  Reference: Breakpoint validation (opens new window)