ai_coder/vscode-debug-visualizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Updates main readme.

Browse Source
This commit is contained in:
Henning Dieterichs
2020-03-29 20:36:29 +02:00
parent de00bb8687
commit d0abf90a56
2 changed files with 64 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,60 @@
# Contributing
This document extends the [readme](./extension/README.md) 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 set, so that the UI can connect to the debug visualizer extension.
You can use VS Code to launch and debug the extension.
Choose 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
![](./docs/exported/main/Main.png)
### webview
Implements the UI and is hosted inside a webview in VS Code.
Can be opened in a browser window.
Uses websockets and JSON RPC to communicate with the extension.
### 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.
If started with the `Run Extension (Dev UI)` debug configuration, it will load
the page from `http://localhost:8080` rather than from its own http server.
The webview is served from an http server rather than the file system to work around some security mechanisms,
which would prevent lazy chunk loading or websockets.
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.

64
README.md
View File

@@ -2,66 +2,10 @@
[![](https://img.shields.io/twitter/follow/hediet_dev.svg?style=social)](https://twitter.com/intent/follow?screen_name=hediet_dev)
See [here](./extension/README.md) for the readme of the extension.
See [README.md](./extension/README.md) for the readme of the extension.
You can get the extension in the [marketplace](https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer).
See [CONTRIBUTING.md](./CONTRIBUTING.md) for build instructions and implementation details.
![](./docs/doubly-linked-list-reverse-demo.gif)
This readme extends the [readme](./extension/README.md) 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 set, so that the UI can connect to the debug visualizer extension.
You can use VS Code to launch and debug the extension.
Choose 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
![](./docs/exported/main/Main.png)
### webview
Implements the UI and is hosted inside a webview in VS Code.
Can be opened in a browser window.
Uses websockets and JSON RPC to communicate with the extension.
### 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.
If started with the `Run Extension (Dev UI)` debug configuration, it will load
the page from `http://localhost:8080` rather than from its own http server.
The webview is served from an http server rather than the file system to work around some security mechanisms,
which would prevent lazy chunk loading or websockets.
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.