Debugging
- The browser's developer tools (F12). The source map puts
src/index.tsxunder Sources (Firefox: Debugger) →localhost:5180. Set breakpoints there, or writedebugger;in the code. &devopens 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.