diff --git a/docs/.vitepress/cache/deps/_metadata.json b/database/.vitepress/cache/deps/_metadata.json similarity index 100% rename from docs/.vitepress/cache/deps/_metadata.json rename to database/.vitepress/cache/deps/_metadata.json diff --git a/docs/.vitepress/cache/deps/package.json b/database/.vitepress/cache/deps/package.json similarity index 100% rename from docs/.vitepress/cache/deps/package.json rename to database/.vitepress/cache/deps/package.json diff --git a/docs/.vitepress/cache/deps/vue.js b/database/.vitepress/cache/deps/vue.js similarity index 100% rename from docs/.vitepress/cache/deps/vue.js rename to database/.vitepress/cache/deps/vue.js diff --git a/docs/.vitepress/cache/deps/vue.js.map b/database/.vitepress/cache/deps/vue.js.map similarity index 100% rename from docs/.vitepress/cache/deps/vue.js.map rename to database/.vitepress/cache/deps/vue.js.map diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index 5e0d0a50..2221494b 100644 --- a/docs/.vitepress/config.js +++ b/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', diff --git a/docs/debugging/client.md b/docs/debugging/client.md new file mode 100644 index 00000000..3ab86d2a --- /dev/null +++ b/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) \ No newline at end of file diff --git a/docs/debugging/image-1.png b/docs/debugging/image-1.png new file mode 100644 index 00000000..7d1ee072 Binary files /dev/null and b/docs/debugging/image-1.png differ diff --git a/docs/debugging/image.png b/docs/debugging/image.png new file mode 100644 index 00000000..5b0b818f Binary files /dev/null and b/docs/debugging/image.png differ diff --git a/docs/debugging/server.md b/docs/debugging/server.md new file mode 100644 index 00000000..e55a34d1 --- /dev/null +++ b/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": [ + "/**" + ], + "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) \ No newline at end of file diff --git a/docs/debugging/troubleshooting.md b/docs/debugging/troubleshooting.md new file mode 100644 index 00000000..f1752831 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/docs/public/assets/callstack-devtools.png b/docs/public/assets/callstack-devtools.png new file mode 100644 index 00000000..b9508cbc Binary files /dev/null and b/docs/public/assets/callstack-devtools.png differ diff --git a/docs/public/assets/callstack-vsc.png b/docs/public/assets/callstack-vsc.png new file mode 100644 index 00000000..4982aaed Binary files /dev/null and b/docs/public/assets/callstack-vsc.png differ diff --git a/docs/public/assets/chrome-inspect.png b/docs/public/assets/chrome-inspect.png new file mode 100644 index 00000000..831e87f0 Binary files /dev/null and b/docs/public/assets/chrome-inspect.png differ diff --git a/docs/public/assets/cli-errors.png b/docs/public/assets/cli-errors.png new file mode 100644 index 00000000..8f80b33c Binary files /dev/null and b/docs/public/assets/cli-errors.png differ diff --git a/docs/public/assets/exceptions-options-devtools.png b/docs/public/assets/exceptions-options-devtools.png new file mode 100644 index 00000000..74d39f1e Binary files /dev/null and b/docs/public/assets/exceptions-options-devtools.png differ diff --git a/docs/public/assets/exceptions-options-vsc.png b/docs/public/assets/exceptions-options-vsc.png new file mode 100644 index 00000000..3a3807aa Binary files /dev/null and b/docs/public/assets/exceptions-options-vsc.png differ diff --git a/docs/public/assets/started-debug.png b/docs/public/assets/started-debug.png new file mode 100644 index 00000000..a413add4 Binary files /dev/null and b/docs/public/assets/started-debug.png differ diff --git a/docs/public/assets/vsc-config.png b/docs/public/assets/vsc-config.png new file mode 100644 index 00000000..a909cc39 Binary files /dev/null and b/docs/public/assets/vsc-config.png differ diff --git a/docs/public/assets/websockets-in-chrome-dev-tools.png b/docs/public/assets/websockets-in-chrome-dev-tools.png new file mode 100644 index 00000000..7d9a9206 Binary files /dev/null and b/docs/public/assets/websockets-in-chrome-dev-tools.png differ