[WIP] Debugging docs

docs/.vitepress/config.js

@@ -160,9 +160,10 @@ const guideMenu = [{
     { text: "Creating Responsive Game Design", link: "/guide/responsive-design" },
     { text: "Create Progressive Web Apps (PWA)", link: "/guide/pwa" },
     { text: "Add TailwindCSS", link: "/guide/tailwindcss" },
-    { text: "Upgrade/Update RPGJS", link: "/guide/upgrade" }
+    { text: "Upgrade/Update RPGJS", link: "/guide/upgrade" },
+    { text: "Debugging server", link: "/debugging/server"},
+    { text: "Debugging client", link: "/debugging/client"},
   ]
-
 },
 {
   text: 'Advanced',

docs/debugging/client.md

@@ -0,0 +1,22 @@
+# Debuging client
+
+## Chrome dev tools
+
+1. Start game
+2. Open dev tools by pressing f12 key
+3. Hit ctrl + p to browse your code base
+4. Put breakpoints
+
+### If we have error but don't know excatly where
+
+Two options are very usefull during debugging process.
+
+- Caught Exceptions
+- Uncaught Exceptions
+
+If you turn them on, debugger automagicly will stop on line where problem is.
+
+![devToolsExceptions](/assets/exceptions-options-devtools.png)
+
+Then we can travel be in time with call stack and find a problem
+![devToolsCallstack](/assets/callstack-devtools.png)

docs/debugging/server.md

@@ -0,0 +1,79 @@
+# Debuging server
+
+## Extend package.json
+
+To debug server we need to add inspect flag to our dev command in package.json. It will let us to use our IDE or chrome dev tools to pause on breakpoint on or error. 
+
+```
+   "scripts": {
+        "build": "rpgjs build",
+        "dev": "NODE_OPTIONS='--inspect' rpgjs dev",
+        "start": "node dist/server/main.mjs"
+    },
+```
+
+
+## Debugging with visual studio code
+
+To debug server with VSC we need to run command `npm run dev` and then attach to node process. 
+
+### Add vsc configuration
+
+By clicking on gear we are able to add new debuging config to launch.json
+
+![vscConfig](/assets/vsc-config.png)
+
+Visual Studio code
+```
+  {
+        "name": "Attach",
+        "port": 9229,
+        "request": "attach",
+        "skipFiles": [
+            "<node_internals>/**"
+        ],
+        "type": "node"
+    }
+```
+
+### Start debugger
+Then we can attach to process by clicking green play button
+
+![startDebugVsc](/assets/started-debug.png)
+
+## Debuging with chrome
+
+Instead of using IDE we can use chrome dev tools event to debug server. To do this we have to go to url:
+- `chrome://inspect`
+
+If we have running server and we added inspect flag we should have inspect button what will lead us to chrome dev tools connected to our server
+![chromeInspect](/assets/chrome-inspect.png)
+
+Hit `ctrl + p`` to browse your server side code :)
+
+### If we have error but don't know excatly where
+
+Two options are very usefull during debugging process. If we have some error, but we don't have stack trace (from websockets for instance). We can turn on two options both in VSC and Chrome dev tools
+
+- Caught Exceptions
+- Uncaught Exceptions
+
+If you turn them on, debugger automagicly will stop on line where problem is.
+
+![exceptionsOptionsVSC](/assets/exceptions-options-vsc.png)
+![exceptionsOptionsDevTools](/assets/exceptions-options-devtools.png)
+
+Then we can go back with call stack and find a problem
+![callstackVSC](/assets/callstack-vsc.png)
+![callstackDevtools](/assets/callstack-devtools.png)
+
+
+## Server problem outputs
+Errors usually appear in that places:
+
+### Server standard CLI output
+![cliErrors](/assets/cli-errors.png)
+
+
+### Websockets response
+![websocketsDevTools](/assets/websockets-in-chrome-dev-tools.png)

docs/debugging/troubleshooting.md

@@ -0,0 +1,20 @@
+# Troubleshooting
+
+## Cannot read properties of undefined (reading 'id')
+
+If on server start you get Cannot read properties of undefined (reading 'id') its highly possible that you put something what was tried to be loaded by autoload and you break recommended structure 
+
+For instance if you put smth into main/database/common/smth-common.ts what does not have decorator related to DB. 
+Put your services and helpers outside of structure ie. main/helpers
+
+## console log source of rpgjs
+
+In command line we can see some error on server start. 
+![Alt text](image.png)
+
+In this example we have Cannot read properties of undefined (reading 'id'), and stack trace says its in [@rpgjs]/server/src/Scenes/Map.ts:226:38
+
+We cannot leave console.log in Map.ts, bacouse we would have to rebuild library. But we can do this in complied js in same place 
+[@rpgjs]/server/lib/Scenes/Map.ts
+
+![Alt text](image-1.png)