When writing code, we need to debug our code from time to time (a.k.a. always) to see what’s going on under the hood.

This blog will help you set up and debug Sitecore JSS app in Disconnected Mode.

I am using Visual Studio Code as editor so below steps are for this awesome tool.

Visual Studio 1.48.1+

Since version 1.48.1 of Visual Studio Code this is natively supported without installing extensions or modifying launch.json file. You can just use Debug – Open Link Command . So start Disconnected Mode in JSS by running command  jss start and start Debug.

Thanks Anastasia Flynn for pointing this out!

Visual Studio prior 1.48.1

  1. Install “Debugger for Chrome” to your Visual Studio Code -> https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

2. Go to .vscode folder and replace content of launch.json file with this:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome",
      "url": "localhost:3000",
      "webRoot": "${workspaceRoot}/src",
    }
  ]
}

3. All set up let’s start debugging:

  • Add breakpoints to your code
  • Start Disconnected Mode in JSS by running command  jss start
  • Press F5 in VSCode
  • Reload page

Happy coding + debugging!