How to debug the UI in Mac

Set-up of Generic UI in Mac

Before doing the following steps you must set up the environment in the mac OS that you are going to work, for example, the following programs need to be installed:

  • Visual Studio for Mac

  • Angular 8++

  • Node JS

  • Yarn

Then, continue with these steps:

  1. Build the bundle in Windows to generate the binaries.

  2. Copy the runner folder and paste it into the mac (replace it).

  3. Build the bundle in Mac with Visual Studio.

  4. Open the folder that contains the "csproj" and execute the following command:

    "dotnet publish SnowConvertT12Runner.csproj -r osx-x64 -c Release"

    Note that the name of the "csproj" can change, in this scenario, we are using SnowConvert as an example.

  5. Copy the binaries generated in the release\osx-64 folder and paste it in:

    a) Debug folder of the bundle

    b) UI/artifacts/runner This folder has to be created.

  6. Build the project with the commands specified in the UI readme file.

With the previous steps, you can debug the UI, just don't forget to uncomment out the line of dev tools in the main.ts to show the console:

If you want to debug Electron you need an extra step:

  • First, you need to open the folder of the UI with Visual Studio Code

In Visual Studio Code let's click on the run tab:

  • Then, click on create a launch.json file and select Node.js:

Paste the next text into that file:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
        "windows": {
          "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
        },
        "args" : ["."],
        "outputCapture": "std"
      }
    ]
  }
  • Finally, set up a breakpoint in the main.ts to check it is working and run the debugger.

Last updated