最近在用electron做端应用，使用了Vue，自然就需要调试工具，下面详细描述一下electron的Vue.js devtools插件安装方式（Windows环境）

 

  1. 确保Chrome浏览器中已安装Vue.js devtools插件
    打开扩展程序

    查看扩展程序中是否已安装Vue.js devtools插件

     

     

     

     上面是我曾经使用过的两种Chrome插件安装方式。第一种是现在有些Chrome版本不让直接导入从别处下载的插件，会提示【程序包无效:”CRX_HEADER_INVALID”】，然后采用网上的一些方法将插件解压后，加载已解压的扩展程序，这种方式可以看到插件来源是解压后的地址。第二种方式是看着是从Chrome网上应用商店安装其实是在https://pictureknow.com/网站上下载的Chrome插件，这个网站下载的插件可以直接导入扩展应用。所以建议大家采用这种方式，另外这里看到的ID信息后面有用

  2. 获取Vue.js devtools在电脑中的安装位置

    按上述建议方式安装的插件位置是在Chrome安装位置里面的，下图是我的路径

  3. 使用BrowserWindow.addDevToolsExtension(extension)API 

     

     这是electron官网对BrowserWindow.addDevToolsExtension(extension)API的使用介绍，简单来说就是在electron的主进程main.js中使用API,唯一参数为插件路径，上图中引入Node的path、os模块都是为了拼接得到Vue.js devtools的所在路径，这里我直接采用绝对路径（简单明了）

     

     这时报错了，BrowserWindow.addDevToolsExtension is not a function,不应该啊，官网提供的API不应该不是一个函数啊，这时回头再看文档：

     

     

    这时改一下API调用位置 ：

     app.on(‘ready’,createWindow)说明监控app.readey事件触发调用了创建窗口事件，那么我们就把BrowserWindow.addDevToolsExtension方法写在createWindow中，再尝试一次：

     

     

     成功！！！

  4. 总结
    如果Chrome浏览器没有安装Vue Devtools插件，去https://pictureknow.com/下载安装
    Chrome安装过插件后，拿到插件地址，将BrowserWindow.addDevToolsExtension(‘这里是插件地址‘) 方法写在app.ready执行之后即可

    祝好

版权声明：本文为hgliu-web原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/hgliu-web/p/12658912.html