search

ami-iit / yarp-openmct

Repo for YARP and OpenMCT integration.
GNU Lesser General Public License v3.0
6 stars 1 forks source link

Debugging Vue.js in WebStorm and in the browser (Chrome) #108

Closed nunoguedelha closed 1 year ago

nunoguedelha commented 2 years ago

The plugins integrated in the OpenMCT framework, and typically the imagery plugin we have to debug in #103 , are composed of multiple Vue.js projects, i.e. single file .vue files combining Javascript, HTML and CSS templates. Debugging such projects using the usual workflow based on the usage of breakpoints and step by step execution requires some additional settings in WebStorm or browser and in the openmct project settings when building the project itself. We address here how to build up such a setup.

References for the setup based on Chrome and WebStorm

https://www.digitalocean.com/community/tutorials/how-to-debug-components-state-and-events-with-vue-js-devtools https://blog.jetbrains.com/webstorm/2018/01/working-with-vue-js-in-webstorm/ https://github.com/vuejs/vue-loader/issues/620

Other References on the topic

https://v2.vuejs.org/v2/cookbook/debugging-in-vscode.html?redirect=true https://cli.vuejs.org/guide/cli-service.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger https://v2.vuejs.org/v2/cookbook/debugging-in-vscode.html?redirect=true https://cli.vuejs.org/guide/cli-service.html https://vuejs.org/guide/scaling-up/sfc.html#single-file-components https://v2.vuejs.org/v2/cookbook/index.html https://www.jetbrains.com/help/webstorm/vue-js.html

nunoguedelha commented 2 years ago

The main requirements to bring up the debugging setup are the following:

nunoguedelha commented 2 years ago

Build locally Open-MCT in development mode and link Yarp-OpenMCT to it

We are using openmct as a dependency of yarp-openmct, downloaded from its remote repository as specified in the package.json dependency file: https://github.com/ami-iit/yarp-openmct/blob/cb36bfb865e9cc301c5dba3182d9811172dee460/package.json#L14.

The openmct package installation builds the source code bundling it through the webpack tool into a series of .js and .js.map files under the <yarp-openmct-root>/node_modules/openmct/dist folder.

$ npm install

> openmct@1.7.8 prepare <openmct-root>
> npm run build:dev

> openmct@1.7.8 build:dev <openmct-root>
> webpack
...
Version: webpack 4.46.0
...
Entrypoint openmct = openmct.js
...

The installation runs by default a production build

https://github.com/nasa/openmct/blob/master/package.json

{
  "name": "openmct",
  "version": "2.0.3-SNAPSHOT",
  "description": "The Open MCT core platform",
  "devDependencies": {...}
  "scripts": {
    ...
    "prepare": "npm run build:prod"
  },
  ...
}

The resulting source code mapping in the dist bundle doesn't allow WebStorm (or the browser debugger tools) to properly map the execution point back to the expanded source code. For that we need to run a development build, which requires changing the package.json manifest.

In <yarp-openmct-root>/node_modules, the folder openmct which used to hold the Open-MCT "dist" files is replaced by a sym-link to your local clone repository.

nunoguedelha commented 2 years ago

Install the development/debug plugin on WebStorm

With this mode activated, WebStorm auto-detects the relevant webpack configuration file for each JavaScript file. WebStorm will first look for a webpack configuration file in the folder where this JavaScript file is located, then in its parent folder, and so on. When you open a webpack project (e.g. OpenMCT, which bundle can be found in <openmct-root-path>/dist/openmct.js), WebStorm analyzes it, resolves the located data, and displays a warning that lets you decide whether the project is trustworthy or not.

image

Refer to WebStorm documentation in https://www.jetbrains.com/help/webstorm/2021.2/using-webpack.html for further details.

Debugging the application

  1. Open the openmct repository local clone folder
  2. Create a configuration "Attach to Node.js/Chrome": Host->localhost, Port->64513 image
  3. Run the visualization server then the client app (e.g. on http://<your-IP-address>:8080).
  4. Run the debug session on WebStorm clicking on the button image selecting the running page to debug. image
  5. You can now add the breakpoints and start debugging.

Note

Sometimes, adding the breakpoints prior running the debug session works better (the breakpoints are more likely to be taken into account).

Alternatively you can use a "Javascript Debug" configuration for debugging your Vue.js project. For that, replace steps 2 and on by the following:

  1. Create a configuration "Javascript Debug": URL->http://<your-IP-address>:8080 image
  2. Run the visualization server.
  3. Run the debug session on WebStorm.
  4. You can now add the breakpoints and start debugging.

Refer to https://www.jetbrains.com/help/webstorm/2021.2/vue-js.html#ws_vue_debug_app_running_on_custom_host_port for additional details.

nunoguedelha commented 2 years ago

Install & use the development/debug plugin on Chrome