欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【原】无脑操作:Chrome浏览器安装Vue.js devtool

程序员文章站 2022-05-02 12:25:56
学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象、组件、事件等。 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装为例。 步骤: 1、打开Chrome浏览器,右上角找到“自定义及控制Google Chrome”图标 ......

学习vue.js时,chrome浏览器安装vue.js devtool能很方便的查看vue对象、组件、事件等。

本文以chrome浏览器插件vue.js devtools_3.1.2_0.crx的安装为例。

步骤:

1、打开chrome浏览器,右上角找到“自定义及控制google chrome”图标。

2、点击图标,找到“更多工具”菜单项下的“扩展程序”(第1步和第2步也可以合并为直接在地址栏输入:chrome://extensions/)

3、将vue.js devtools_3.1.2_0.crx文件拖放至扩展程序中即可安装。

4、安装完成后,在浏览器的右上角会看到v字型图标。

5、点击v字型图标,可能会提示:vue.js not detected的信息,接下来解决这个问题。

6、首先找到刚才在扩展程序中安装的vue.js devtools 3.1.2,点击“详细信息”,能看到vue.js devtools的id,我的是:blilalokifjgienomccehdbhiamjcppo。同时,将“允许访问文件网址”的选项启用。

7、然后到c:\users\temptation\appdata\local\google\chrome\user data\default\extensions目录下(其中temptation是我的系统账户名称),能找到相应的chrome浏览器插件的目录文件,其中就有和id同名的blilalokifjgienomccehdbhiamjcppo目录。

8、打开目录,找到manifest.json文件,打开找到"background"节点,将其"persistent"属性的值从false修改为true。

9、重启chrome浏览器,打开使用vue.js开发版的网页文件,发现此时vue.js devtools图标亮了,可以使用该插件了。