Skip to main content
Redhat Developers  Logo
  • Products

    Platforms

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat AI
      Red Hat AI
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • View All Red Hat Products

    Featured

    • Red Hat build of OpenJDK
    • Red Hat Developer Hub
    • Red Hat JBoss Enterprise Application Platform
    • Red Hat OpenShift Dev Spaces
    • Red Hat OpenShift Local
    • Red Hat 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
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Secure Development & Architectures

      • Security
      • Secure coding
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud 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

    • Product Documentation
    • API Catalog
    • Legacy Documentation
  • 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

    • Migrating Ansible Automation Platform 2.4 to 2.5

    • Multicluster resiliency with global load balancing and mesh federation

    • Simplify local prototyping with Camel JBang infrastructure

    • Smart deployments at scale: Leveraging ApplicationSets and Helm with cluster labels in Red Hat Advanced Cluster Management for Kubernetes

    • How to verify container signatures in disconnected 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
    © 2025 Red Hat

    Red Hat legal and privacy links

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

    Report a website issue