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

[nunoguedelha]

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

[nunoguedelha]

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.

[nunoguedelha]

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:

yarp-openmct/package.json

Line 14 in cb36bfb

"openmct": "https://github.com/nasa/openmct.git#1.7.8",

.

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's package.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's package.json to make it point to your local openmct 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.

[nunoguedelha]

Install the development/debug plugin on WebStorm

• 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.

Debugging the application

1. Open the openmct repository local clone folder
2. Create a configuration "Attach to Node.js/Chrome": Host->localhost, Port->64513
   
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 selecting the running page to debug.
   
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:

2. Create a configuration "Javascript Debug": URL->http://<your-IP-address>:8080
   
3. Run the visualization server.
4. Run the debug session on WebStorm.
5. 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]

Install & use the development/debug plugin on Chrome

• 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 Debugging Vue.js in WebStorm and in the browser (Chrome) #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.