Vue Dev-tools for development in IE-11 / Windows

In order to debug IE11 (still about 40% of our users), I recently had to install vue-dev-tools, the electron-app version. Using it is a bit more involved than the chrome-extension or the firefox-addon. Also, in some of it’s setups, the electron-app can cause unwanted extra console-warnings (endless amounts), if you just want to use the chrome-extension.

So here is the setup I ended up using:

$ npm install vue-devtools --save-dev 

in main.js (or comparable):

import devtools from '@vue/devtools';
 if (process.env.NODE_ENV === 'development') {
   global.devtools = devtools;
 }

In your console, at your project root, run vue devtools with npx:

$ npx vue-devtools

En then in de browser console of the browser you’re checking (say IE11):

$ devtools.connect()