Debugging

To debug the applications in VS Code:

1. set some Breakpoints with the mouse in the editor
2. open the "Run" view on the left
3. select the correct launch profile from the drop down menu (e.g. "Launch PROCEED") and start the debugging

Background Proceed-Engine

For development, you use the NodeJS implementation of the PROCEED Engine. In order to debug code, NodeJS offers the ability to specify an --inspect flag.

The Engine usually starts the Native Part in a process and the Universal part as a child process. However, giving a port with the inspect flag (like VS Code does) would mean that the NodeJS child process, as it gets forked, would inherit the same executive arguments (including the debug port). This leads to the problem of the child process encountering an address in use error while trying to use the same port as the parent process.

For that reason, the code checks prior to forking if an inspect flag is present and changes the port, if so. This means that the child process (the universal part of the proceed engine) is always listening on the same debug port: 59130

By using the autoAttachChildProcesses property of the VS Code launch configuration, you can automatically attach the debugger to the child process. Now you can debug both processes (the native NodeJS part and the universal JS part of the proceed engine) in VS Code. The launch.json is included in the proceed-engine git repo.

Note that it is normal, that you see the debugger listening and debugger attached messages twice, as they appear for both, the parent process and the child process.

Background Proceed-Management-System

There are three possible ways to debug the different parts of the Proceed-Management-System:

1. using your browsers (/electrons) devtools to set breakpoints and step through the code directly in the browser window (/renderer process)
2. using VS Code to set breakpoints and step through the code
3. using the Vue Devtools Extension for your browsers devtools to inspect and debug vue specific functionality (e.g. how the data in your components behaves)

1. Browser Devtools

To debug using your browsers devtools you have to start either the browser or electron version of the ms in development mode and open the correct tab in your devtools (e.g. sources in Chrome or Chromium). The next step is to locate the source file with the code you want to debug in the file structure that should be somewhere in the tab. The sources for the .vue files should be under webpack:///src/frontend the ones for the .js files under webpack:///./src/frontend. After selecting the correct file you should be able to debug it like you would do in an IDE.

Firefox doesn't seem to give you both webpack:///src/frontend and webpack:///./src/frontend

Above you can see an example from the Chromium browser where we have opened the sources tab in the devtools opened a vue file and set a breakpoint which was then stopped on when this part of the code was executed. You can also see the call stack and the panel for the current variable state.

2. VS Code

To be able to debug the frontend parts of the MS from inside VS Code you will have to install the Debugger for Chrome extension for VS Code.

2.1 Electron

In case you want to debug the Electron application you can just open the Run view in VS Code mentioned above and select Electron:All. This should start the Electron application and allow you to set breakpoints inside VS Code which should be stopped on when they are hit after which you can step through the code.

Beware: If you try to step into a function in a .js file from a .vue file the debugging view might show you the top of the file instead of the correct function. You can either keep stepping on until the debugger jumps back and then step into the function again which should work correctly or get around this by placing a breakpoint inside the function and then continue execution.

2.2 Web Client

If you want the debug the web client of the server version of the MS you have to start the server and optionally the webpack-dev-server and then start either chrome or chromium following these instructions. Afterwards you can go to the Run view in VS Code and select Attach to web client. This should now allow you to set breakpoints and to step through the code when a breakpoint is hit.

2.3 Server

If you want to debug the server then open the Run view in VS Code and select Launch MS Server. This will start the server and allows you to set breakpoints inside the server code. It will also start a webpack-dev-server hosting the frontend which you could debug simultaneously following the instructions under 2.2.

3. Vue Devtools Extension

You might need to install the Vue Devtools Extension in your browser. Just look in the add-on marketplace of your browser to find it

If you want to observe changes in the state of a vue component or store you can use the aforementioned Vue Devtools Extension in the Chrome Devtools of a running Management System.

It should look similar to the following:

Components: Shows all currently rendered components. You can traverse the component tree like you would in the normal Elements tab on the left and see the current state (what is stored in data, its props etc.) of a selected component on the right.

Vuex: Shows mutations on the vuex store. You can see which mutations occurred in the time of recording on the left and inspect their payload and the state of the store at that moment on the right.

Events: Shows information about recorded events. You can see recorded events their type and where they occurred on the left and inspect their payload on the right.