Skip to content

chen-assert/vscode-debug-visualizer

 
 

Repository files navigation

VS Code Debug Visualizer

See here for the readme of the extension. You can get the extension in the marketplace.

This readme extends the readme of the extension with implementation details.

Build Instructions

  • Clone the repository
  • Run yarn in the repository root
  • Run yarn build

Dev Instructions

This project uses yarn workspaces and consists of the sub-projects data-extraction, extension and webview. To setup a dev environment, follow these steps:

  • Clone the repository
  • Run yarn in the repository root
  • Run yarn build initially (or yarn dev for every sub-project)
  • Run yarn dev for the sub-project (i.e. in its folder) you are working on.

For the webview project, yarn dev will serve the react application on port 8080. Certain query parameters need to be so that the UI can connect to the debug visualizer extension.

You can use VS Code to launch and debug the extension. Chose the preconfigured Run Extension (Dev UI) as debug configuration so that the extension loads the UI from the webpack server. Otherwise, the extension will start a webserver on its own, hosting the dist folder of the webview project.

Publish Instructions

  • Follow the Build Instructions
  • cd extension
  • yarn pub

Architecture

webview

Provides the UI and is hosted inside a webview in VS Code.

extension

Creates the webview in VS Code, hosts a webserver and a websocket server. The webserver serves the webview project that is loaded by the webview. After the webview is loaded, it connects to the websocket server. The websocket server is used to evaluate expressions and is secured by a random token.

data-extraction

Provides types and a JS runtime for data extraction.

About

An extension for VS Code that visualizes data during debugging.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 95.0%
  • CSS 4.7%
  • JavaScript 0.3%