Relatude Help

Debugging

  • The browser's developer tools (F12). The source map puts src/index.tsx under Sources (Firefox: Debugger) → localhost:5180. Set breakpoints there, or write debugger; in the code.
  • &dev opens the interface's development build (The CMS interface), with React's warnings and its errors in full. The production build says only Minified React error #….
  • Settings → Plugins says whether the plugin is Active, Failed, Incompatible or Disabled, and why.
  • A blade that throws shows the error in place with Try again; the stack is in the Console.
  • React Developer Tools, the browser extension, shows the plugin's components with their props and state.

To debug in Visual Studio Code, add .vscode/launch.json to the plugin's folder, start npm run dev, and press F5:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "CMS with this plugin",
      "type": "msedge",
      "request": "launch",
      "url": "https://localhost:5001/relatude.cms/?plugin=http://localhost:5180/index.js&dev",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Use "type": "chrome" for Chrome. The browser opens with a profile of its own, so sign in there once. Breakpoints you set in src/ in VS Code work, as webRoot maps the source map to the folder.