Closed nunoguedelha closed 1 year ago
The main requirements to bring up the debugging setup are the following:
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.
openmct
repo.
git clone https://github.com/nasa/openmct.git
openmct
's package.json
for a development build generation.
{
"name": "openmct",
...,
"devDependencies": {...}
"scripts": {
...
"prepare": "npm run build:dev"
},
...
}
openmct
root path.
npm install
yarp-openmct
's package.json
to make it point to your local openmct
clone repository.
{
"name": "yarp-openmct",
...
"dependencies": {
...
"openmct": "file:<path-to-openmct-local-repo>",
...
},
...
}
yarp-openmct
root path.
npm install
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.
Install or make sure that Vue.js
plugin is installed. Open the WebStorm->Preferences
dialog, go to menu Plugins
, tab Installed
.
Make sure that Webpack configuration files detection is enabled. Open the WebStorm->Preferences
dialog, go to menu Languages & Frameworks->Webpack
.
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.
Refer to WebStorm documentation in https://www.jetbrains.com/help/webstorm/2021.2/using-webpack.html for further details.
openmct
repository local clone folder http://<your-IP-address>:8080
).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:
http://<your-IP-address>:8080
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.
Install the "devtools" plugin on Chrome: https://devtools.vuejs.org
Github: (MIT license) https://github.com/vuejs/devtools
Chrome web store: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
A new icon for "Vue Devtools" appears on the top toolbar.
Run the server application from terminal (or even WebStorm if you are also debugging the server Node.js code). On Chrome, navigate to the address the server is listening to (e.g. http://localhost:8080). This runs the client app. Now launch the Chrome inspection tools: go to `View->Developer->Developer Tools. As OpenMCT module has been built in development mode (refer to https://github.com/ami-iit/yarp-openmct/issues/108#issuecomment-1112191433), we can already use breakpoints in the Chrome inspector interface:
In the top bar of your inspector window, click on the new tab "Vue" and the Vue Devtools will initialize.
We can now navigate across the components, and even test changes to the Vue application without changing the source code.
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