1. Knowledge Center
  2. TBSP for Developers

Visual Studio Code

Install and use the Visual Studio Code integrated development environment for development and debugging.

Get Visual Studio Code

Install Visual Studio code from https://code.visualstudio.com/download.

This integrated development environment enables you to work with the TBSP source code and also supports debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets and code refactoring. You can also customize Visual Studio Code and add capabilities through extensions. 

Plugin Debugging

In addition, to development, Visual studio code enables debugging. 

Launch Visual Studio Code in debug mode

  • Open Visual Studio Code.
  • Open the Project folder.
  • Start Debug mode by clicking on the debug icon on the left
    vc3
  • In debug mode, click on the settings button and select the Node.js environment:
    vc4

    Edit launch.json.

    Press "run" to launch debugging:

    vc5

    Set breakpoint

    Open your script file for debugging. To set a breakpoint, double click a line number:

    vc6

    Set variable at runtime

    To change the variable value at runtime:

    • locate the variable in the left side debug bar,
    • double click on variable
    • or right click and choose "Set Value".

    You can then edit the variable value. Press Enter to save your changes.

    vc7

    Remote debugging

    You are able to debug your code right in runtime on development server, inside of the Docker container.

    In this example, we will configure the container and the debugger so that VSC can attach itself to the remote docker container and use debugger.

    First, enable remote debugging on the node instance that is running inside of a container.

    Open the file ng-rt-core/scripts/Dockerfile and enable the option '--debug' in the 'ENTRYPOINT' array:

    ENTRYPOINT ["nodemon", "--ignore", "server/datasources.json", "--ignore", "locales/", "--ignore", "server/config.json", "--ignore", "server/component-config.json", "--ignore", "log/", "--ignore", "plugins/","--ignore", "config/", "--ignore", "config.json", "--ignore", "nodered/", "--debug=5858","/tmp/ng-rt/cli.js"]

    Note: the path to the source code inside of the container is a required parameter. In this example, it's /tmp/ng-rt/cli.js.

    In this tutorial, we will use port 5858 for remote debugging.

    Next, ensure that port forwarding is enabled for your host. This setting depends on runtime environment and for ng-rt it should look something like this:

    docker run -itd -p 8443:8443 -p 8444:8444 -p 5858:5858 -v $HOME/data/ng-rt/config:/tmp/ng-rt/config  -v $HOME/data/ng-rt/locales:/tmp/ng-rt/locales  --restart always -e BUILD_ID=D$CI_PIPELINE_ID --name T01-ng-rt-core $CONTAINER_DEVELOP_IMAGE

    Here, the port number 5858 was exported to host port 5858.

    Ensure that 

    • the local code base is up to date
    • that you're on the same branch as remote server.

    In this manner, we can use the local code base while navigating over specific code lines while debugging.

    Then, we need to configure launch.js and add some options there.

    Steps

    • Open Visual Code
    • Open project folder with File -> Open
    • Open Debug window by click on in left side menu: 
      vc3

    Click on settings button and choose Node.js environment:

    vc4
    • Open launch.json and add a few parameters specifically for remote debugging:
      • address - IP address of the remote container
      • remoteRoot - Path to workspace INSIDE of container
    {
    {
    "name": "Attach to remote",
    "type": "node",
    "request": "attach",
    "port": 5858,
    "address": "10.0.50.39",
    "restart": true,
    "sourceMaps": true,
    "outFiles": [],
    "localRoot": "${workspaceRoot}",
    "remoteRoot": "/tmp/ng-rt"
    }
    }

    Press run button to connect to remote docker container:

    vc5

    Now you should have debugger connected to remote server; you'll be able to use the debugger as described in the previous section.

    Client Side Debugging

    You are able to debug your client side code in runtime with the Chrome browser.

    In this example, we will configure code and Chrome to be able to attach to local Chrome instance and use debugger.

    First, install the Visual Studio Code Debugger for Chrome.

    Open Visual Code, View->Command Palette, type 'ext install', then choose 'Extensions: install extensions':

    1

    Next find and install 'Debugger for Chrome' extension:

    2-1

    Now, enable remote debugging on Chrome.

    On macOS, execute the following in a terminal session:

    <PATH_TO>Applications/GoogleChrome.app/Contents/MacOS/GoogleChrome --remote-debugging-port=9222'

    On Linux, launch

    google-chrome --remote-debugging-port=9222

    If you have another instance of Chrome running and don't want to restart it, you can run the new instance under a separate user profile with the --user-data-dir option:

     --user-data-dir=/tmp/chrome-debug

    This is the same as using the userDataDir option in a launch-type config.

    Launch Chrome (like it is shown above) and navigate to your page.

    Next, let's debug our client-side code.

    Steps

    Open working folder as you usually do. We will use ng-rt-documentsSharing as example:

    3-1

    Then click to 'Debugger' icon at the left:

    vc3

    Click to dropdown list on top:

    5

    And choose 'Chrome' environment:

    6-1

    VS Code will create folder .vscode and launch.json file inside:

    8

    Replace it contents with provided here:

    {
    "version": "0.2.0",
    "configurations": [
    {
    "type": "chrome",
    "request": "attach",
    "name": "Attach to Chrome",
    "port": 9222,
    "url": "https://dev.tymlez.com/admin/#!/admin/pluginsdisplay/594eb103db39b10013edeedd",
    "webRoot": "${workspaceRoot}/client/src/js/app",
    "sourceMaps": true
    }
    ]
    }

    Navigate to the documentsSharing application in browser and copy the url (ensure that you have an instance of TBSP running):

    7_5

    And replace value for url in 'launch.json' with the one you just copied from Chrome.

    Then click to 'Debug' icon (1) and 'Attach' button (2).

    You should see debugger pane on top of VS Code:

    9

    Now you are able to set breakpoints and use you VS Code as debugger for client-side code:

    10