AppMap for Visual Studio Code

Installation

Follow the Quickstart instructions for your code editor.

AppMap diagrams quick guide

See How to use AppMap diagrams, a guide with animated demonstrations of using AppMaps.

AppMap side bar view

The AppMap view lists and searches across all AppMap files in your current project folders. You can open it from the top level menu (View -> Open view… -> AppMap), with an AppMap action or by clicking on its icon in the side bar.

AppMap tool window actions:

  • Alphabetical listing of all AppMap (.appmap.json) files in the project, sorted by their names
  • Click on any AppMap to open it
  • Filter and search for an AppMap by its name

AppMap extension actions

To open the list of AppMap extension actions, press CTRL+SHIFT+P or COMMAND+SHIFT+P on macOS and type AppMap

  • AppMap: Open most recently modified AppMap opens the most recently updated AppMap file in the project folders
  • AppMap: Focus on local files View opens the AppMap side bar view
  • AppMap: Filter/Find AppMap by name opens the AppMap side bar view and the filter/find text field
  • AppMap: Start remote recording starts remote recording. See remote recording
  • AppMap: Stop remote recording stops remote recording. See remote recording
  • AppMap: Get remote recording status checks if remote recording is running. See remote recording

AppMap diagrams

When you open a .appmap.json file in the editor, you are presented with an AppMap interactive diagram.

Help panel

Click on the (i)nformation icon in the bottom right corner to display quick help.

Use the navigation bar for quick navigation to items of interest, for example, HTTP routes, labels, packages, classes, functions, etc. When you select an object or an event in the diagram, its details and related objects and events are displayed in this panel.

Click the circular arrow icon in the top right corner to reset the current filter or selection and navigate to the default Dependency map.

Dependency map

The Dependency Map diagram shows all the code that’s relevant to what you’re working on and how it’s connected. Here you can search and navigate through web services, code, libraries, dependency services, and SQL, all in the context of a specific feature.

Dependency map actions:

  • click on any code object in the map to select and view its details
  • click on any edge in the map to view the events between the two connected components
  • expand/collapse packages
  • expand/collapse HTTP endpoints
  • navigate to a source file of a class or function with a right click or from its details
  • view selected event in Trace

Trace

The Trace diagram shows all the details of how a feature works. It displays a call tree, each box representing a call event - a Web service endpoint, a function call or an SQL command.

Trace actions:

  • navigate forward, backward, up, and down through a detailed execution trace
  • use keyboard arrows to quickly move around
  • expand/collapse event’s children by clicking on the children port of an event
  • view input/output parameters
  • navigate to a source file of a class or function with a right click or from its details
  • view class and function labels

SQL code in AppMaps

See How to read SQL Code in AppMaps.

Labels

The AppMap data format provides for class and function labels, which can be used to enhance the AppMap visualizations, and to programatically analyze the data. See the AppMap agent documentation for details about adding labels to your code.

Labels are visualized in the Trace diagram and in class and function details panel, and can be used for filtering and navigation in both diagrams.

Remote recording

Remote recording controls are accessible as extension actions and in the AppMap view. See remote recording in VSCode for details.

GitHub repository

https://github.com/applandinc/vscode-appland


Was this page helpful? thumb_up Yes thumb_down No
Thank you for your feedback!