Three-step! Electron in use in Vue Devtools

In doing recently with electron-side applications, using Vue, naturally require debugging tools, described in detail below about the electron's Vue.js devtools plug-in installation (Windows environment)

 

1. Make sure that Chrome browser plug-in has been installed in Vue.js devtools
   open extensions
   
   to see whether Vue.js devtools extensions installed plug-ins
   

    

    

    

    The above is what I have used both Chrome plug-in installation. The first version of Chrome is now some imported from elsewhere not to directly download plug-ins, you will be prompted [Package is invalid: "CRX_HEADER_INVALID"], and then use some online method after extracting the plug-in, load unpacked extensions, which way you can see the source plug-in is the address of the decompressed. The second way is looking at is installed from the Chrome Web Store is in fact https://pictureknow.com/ downloaded from the website Chrome plug-in, download the plug-in can be imported directly to this site extension application. It is recommended that you use this way, a useful addition ID information see here behind

2. Get Vue.js devtools mounting position in the computer

   Installed above the recommended way to install Chrome plug-in location is in a position inside, below is my path
   

3. Use BrowserWindow.addDevToolsExtension(extension)API 
   

    

    This is the official website of the electron BrowserWindow.addDevToolsExtension(extension)API on the use, in short, is to use the API, the only parameter in the main process main.js electron path for the plug-in, the figure above the introduction path Node, os modules are designed to splice get Vue.js devtools the path, and here I direct absolute path (simple)
   

    

    At this time being given, BrowserWindow.addDevToolsExtension is not a function, should not be ah, API official website provides not a function should not be, ah, then look back documents:
   

    

    

   Then change it location API call:
   

    app.on ( 'ready', createWindow) instructions monitor app.readey event triggers a call to create a window event, then we'll write in createWindow BrowserWindow.addDevToolsExtension method, and then try again:
   

    

    

    success! ! !

4. Summary
   If Chrome browser does not Vue Devtools plug-in installed, go https://pictureknow.com/ download and install
   the Chrome installed plug-ins, plug-ins to get the address, the BrowserWindow.addDevToolsExtension ( ' Here is a plug-address ') method written in the app. after ready to perform
   
   
   best wishes