Debugging

Debugging JQuery

This snippet enables launching chrome attached to visual studio code. The webroot should map the website URL to the source code folder within visual studio code.

It is then possible to set breakpoints/logs directly from visual studio code.

launch.json

{
  // 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": "pwa-chrome",
      "request": "launch",
      "name": "launch chrome with web app",
      "url": "https://dev.velomedia.com",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Debugging Serverless Offline

The sls offline serverless service must be started with debugging enabled.

Within the package.json a sample script could look like this:

package.json

{
  "debug": "node --inspect $HOME/service/node_modules/serverless/bin/serverless offline -s dev"
}

Start the serverless offline service in debug mode.

yarn debug

Click on the Debug Icon in Visual Studio Code (Play Icon on the left hand side-bar.) Then selected the function to test and click "play" to connect the Debugger to the serverless process.

Set break points inside of the typescript files.

NOTE: For some unknown reason break points are markt as unreachable once the debugger is connected and vs code hides the red debug marker. However, as soon as a script is executing the breakpoints will start working and appear in red.

Start calling the API to Debug.

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "attach",
      "name": "serverless offline",
      "port": 9229,
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/service/dist/**/*.js"]
    }
  ]
}

Debugging React (react-scripts)

For more information see this site. Jest based unit testing

launch.json

{
  // 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": "pwa-chrome",
      "request": "launch",
      "name": "Attach Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Jest debug one-run",
      "type": "node",
      "request": "launch",
      "env": {
        "CI": "true"
      },
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts",
      "args": ["test", "--runInBand", "--no-cache"],
      "cwd": "${workspaceFolder}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "name": "Jest debug open file",
      "type": "node",
      "request": "launch",
      "env": {
        "CI": "true"
      },
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts",
      "args": [
        "test",
        "${fileBasenameNoExtension}",
        "--runInBand",
        "--no-cache"
      ],
      "cwd": "${workspaceFolder}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "name": "Jest debug watch",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/react-scripts",
      "args": ["test", "--runInBand", "--no-cache", "--watchAll"],
      "cwd": "${workspaceFolder}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}