Debugging Vue.js in WebStorm and in the browser (Chrome)
Closed this issue · 4 comments
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/
vuejs/vue-loader#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
The main requirements to bring up the debugging setup are the following:
- Build the Open-MCT framework project in development mode.
- Install and setup the Vue.js development/debug plugin on WebStrom or the browser.
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:
Line 14 in cb36bfb
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.
- Clone the
openmct
repo.git clone https://github.com/nasa/openmct.git
- Change the
openmct
'spackage.json
for a development build generation.{ "name": "openmct", ..., "devDependencies": {...} "scripts": { ... "prepare": "npm run build:dev" }, ... }
- Run the installation from the
openmct
root path.npm install
- Change the
yarp-openmct
'spackage.json
to make it point to your localopenmct
clone repository.{ "name": "yarp-openmct", ... "dependencies": { ... "openmct": "file:<path-to-openmct-local-repo>", ... }, ... }
- Run the installation from the
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 the development/debug plugin on WebStorm
-
Install or make sure that
Vue.js
plugin is installed. Open theWebStorm->Preferences
dialog, go to menuPlugins
, tabInstalled
.
-
Make sure that Webpack configuration files detection is enabled. Open the
WebStorm->Preferences
dialog, go to menuLanguages & 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.
Debugging the application
- Open the
openmct
repository local clone folder - Create a configuration "Attach to Node.js/Chrome": Host->localhost, Port->64513
- Run the visualization server then the client app (e.g. on
http://<your-IP-address>:8080
). - Run the debug session on WebStorm clicking on the button selecting the running page to debug.
- 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:
- Create a configuration "Javascript Debug": URL->
http://<your-IP-address>:8080
- Run the visualization server.
- Run the debug session on WebStorm.
- 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.
Install & use the development/debug plugin on Chrome
-
Install the "devtools" plugin on Chrome:
https://devtools.vuejs.orgGithub: (MIT license)
https://github.com/vuejs/devtoolsChrome web store:
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpdA 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 #108 (comment)), 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.