Skip to main content
Redhat Developers  Logo
  • Products

    Featured

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat OpenShift AI
      Red Hat OpenShift AI
    • Red Hat Enterprise Linux AI
      Linux icon inside of a brain
    • Image mode for Red Hat Enterprise Linux
      RHEL image mode
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • Red Hat Developer Hub
      Developer Hub
    • View All Red Hat Products
    • Linux

      • Red Hat Enterprise Linux
      • Image mode for Red Hat Enterprise Linux
      • Red Hat Universal Base Images (UBI)
    • Java runtimes & frameworks

      • JBoss Enterprise Application Platform
      • Red Hat build of OpenJDK
    • Kubernetes

      • Red Hat OpenShift
      • Microsoft Azure Red Hat OpenShift
      • Red Hat OpenShift Virtualization
      • Red Hat OpenShift Lightspeed
    • Integration & App Connectivity

      • Red Hat Build of Apache Camel
      • Red Hat Service Interconnect
      • Red Hat Connectivity Link
    • AI/ML

      • Red Hat OpenShift AI
      • Red Hat Enterprise Linux AI
    • Automation

      • Red Hat Ansible Automation Platform
      • Red Hat Ansible Lightspeed
    • Developer tools

      • Red Hat Trusted Software Supply Chain
      • Podman Desktop
      • Red Hat OpenShift Dev Spaces
    • Developer Sandbox

      Developer Sandbox
      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Secure Development & Architectures

      • Security
      • Secure coding
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
      • View All Technologies
    • Start exploring in the Developer Sandbox for free

      sandbox graphic
      Try Red Hat's products and technologies without setup or configuration.
    • Try at no cost
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • Java
      Java icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • API Catalog
    • Product Documentation
    • Legacy Documentation
    • Red Hat Learning

      Learning image
      Boost your technical skills to expert-level with the help of interactive lessons offered by various Red Hat Learning programs.
    • Explore Red Hat Learning
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

Debugging RHMAP Apps locally with Visual Studio Code (VS Code)

 

June 12, 2017
David Ffrench
Related topics:
Developer ToolsNode.js
Related products:
Red Hat build of Node.js

Share:

    Do you want to speed up your debugging process? This blog post is designed to help you do just that by empowering you with the knowledge of how to debug RHMAP Cloud Apps and MBaaS services locally using VS Code. For an introduction to running RHMAP client apps locally, see How to Setup your Apps to Target Locally on Device.

    Why VS Code?

    • Interactive Debugger allows you to step through source code, inspect variables, view call stacks, and execute commands in the console. (This is the reason I switched)
    • Lightning fast source code editor
    • Git integration
    • 1000s of extensions that are effortlessly installable
    • Helps you be instantly productive with syntax highlighting, bracket matching, auto-indentation, box-selection, snippets...
    • Available on MacOS, Linux, and Windows

    Prerequisites

    • VS Code (https://code.visualstudio.com/download)
    • Cloned the RHMAP source code repos locally

    Set up VS Code

    Step 1 - Create VS Code Launch Configuration for your RHMAP App

    1. Click the Debug option on the Activity Bar.
    2. Click the Configure “gear icon” on the Debug view top bar and VS Code will generate a launch.json file under your workspace's .vscode folder.
    3. Select Node.js as the environment.

    Step 2 - Set up the Launch Configuration for your RHMAP App

    Launch configurations are where the magic happens. These can and will differ for different apps but for our RHMAP apps, there shouldn’t be much to change.

    The main change is mapping your local env variables from your Gruntfile.js or other env variables that exist.

    Set up the Launch Configuration for your RHMAP App

    Inside your launch.json replace the following code:

    Before:

    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/application.js"
    }

    After:

    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/application.js",
      "cwd": "${workspaceRoot}",
      "env": {
        "FH_USE_LOCAL_DB": "true",
        "WFM_AUTH_GUID": "iidn3tvprs62asdebat5m3eg",
        "FH_SERVICE_MAP": "{\"iidn3tvprs62asdebat5m3eg\":\"http://localhost:8002\"}"
      }
    }

    NOTE - FH_SERVICE_MAP:
    FH_SERVICE_MAP defines the mappings from your cloud app to your services. You will notice how the structure of FH_SERVICE_MAP is different from the rest of the Gruntfile. A function cannot be specified in a launch configuration; therefore, you need to set the value as a stringified object. The object key is the service id and the object value is either a locally running instance of the service or a remote instance using the services current host. Details for these are found on the services details page in RHMAP.

    List of Launch configuration attributes: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-attributes

    More debugging information: https://code.visualstudio.com/docs/editor/debugging

    Debugging

    Starting Debugging

    F5 or Debug menu or Green Play button

    Verify local debugging is working as expected by checking the DEBUG CONSOLE (⇧⌘Y or View > Debug Console).

    If the variable name is typed in the debug console, from there we can inspect the value tree.

    Debug actions

    Once a debug session starts, the Debug actions pane will appear on the top of the editor.

    • Continue / Pause F5
    • Step Over F10
    • Step Into F11
    • Step Out ⇧F11
    • Restart ⇧⌘F5
    • Stop ⇧F5

    Breakpoints

    Clicking on the editor margin can toggle Breakpoints:

    • Breakpoints - red filled circles in the editor margin
    • Disabled breakpoints  - gray filled circles in the editor margin
    • Column breakpoints - shown inline in the editor

    When a debugging session starts, breakpoints that cannot be registered with the debugger will change to gray hollow circles. The same might happen if the source is edited while a debug session is running without live-edit support.

    Breakpoints can be setup as expression breakpoints; the debugger will stop in that line if the expression matches the given pattern.

    Add the breakpoint, click on the red circle, click+right, and select the Edit breakpoint value.

    Add the desired expression.

    More Information: https://code.visualstudio.com/docs/editor/debugging#_breakpoints

    More Information on Node.js Debugging: https://code.visualstudio.com/docs/nodejs/nodejs-debugging


    Red Hat Mobile Application Platform is available for download, and you can read more at Red Hat Mobile Application Platform.

    Last updated: October 31, 2023

    Recent Posts

    • More Essential AI tutorials for Node.js Developers

    • How to run a fraud detection AI model on RHEL CVMs

    • How we use software provenance at Red Hat

    • Alternatives to creating bootc images from scratch

    • How to update OpenStack Services on OpenShift

    Red Hat Developers logo LinkedIn YouTube Twitter Facebook

    Products

    • Red Hat Enterprise Linux
    • Red Hat OpenShift
    • Red Hat Ansible Automation Platform

    Build

    • Developer Sandbox
    • Developer Tools
    • Interactive Tutorials
    • API Catalog

    Quicklinks

    • Learning Resources
    • E-books
    • Cheat Sheets
    • Blog
    • Events
    • Newsletter

    Communicate

    • About us
    • Contact sales
    • Find a partner
    • Report a website issue
    • Site Status Dashboard
    • Report a security problem

    RED HAT DEVELOPER

    Build here. Go anywhere.

    We serve the builders. The problem solvers who create careers with code.

    Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

    Sign me up

    Red Hat legal and privacy links

    • About Red Hat
    • Jobs
    • Events
    • Locations
    • Contact Red Hat
    • Red Hat Blog
    • Inclusion at Red Hat
    • Cool Stuff Store
    • Red Hat Summit

    Red Hat legal and privacy links

    • Privacy statement
    • Terms of use
    • All policies and guidelines
    • Digital accessibility

    Report a website issue