Skip to main content

How to Debug the application

Introduction​

In order to help debug the application, we have created several utilities:

  • .vscode/launch.json config with a server and client debugger
  • DebugInfoOverlay Component present in the application based on the web_DebugOverlayVisible Config Feature Flag.

Debug modes​

Using VSCode​

Elevate has a VSCode debug setup created in .vscode/launch.json, so you can use VSCode to debug either the Server and the Client side side of the application.

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.

Using Google Chrome​

Follow the instructions on Next.js Docs

Open http://localhost:3000 with your browser to see the result.

How to use the DebugInfoOverlay component​

You can update the DebugInfoOverlay component with any server or client info that can be useful for your application, currently we include:

  • Breakpoint info
  • Control session info