学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象、组件、事件等。chrome
本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装为例。json
步骤:浏览器
一、打开Chrome浏览器,右上角找到“自定义及控制Google Chrome”图标。工具
二、点击图标,找到“更多工具”菜单项下的“扩展程序”(第1步和第2步也能够合并为直接在地址栏输入:chrome://extensions/)学习
三、将Vue.js devtools_3.1.2_0.crx文件拖放至扩展程序中便可安装。spa
四、安装完成后,在浏览器的右上角会看到V字型图标。插件
五、点击V字型图标,可能会提示:Vue.js not detected的信息,接下来解决这个问题。对象
六、首先找到刚才在扩展程序中安装的Vue.js devtools 3.1.2,点击“详细信息”,能看到Vue.js devtools的ID,个人是:blilalokifjgienomccehdbhiamjcppo。同时,将“容许访问文件网址”的选项启用。事件
七、而后到C:\Users\temptation\AppData\Local\Google\Chrome\User Data\Default\Extensions目录下(其中temptation是个人系统帐户名称),能找到相应的Chrome浏览器插件的目录文件,其中就有和ID同名的blilalokifjgienomccehdbhiamjcppo目录。开发
八、打开目录,找到manifest.json文件,打开找到"background"节点,将其"persistent"属性的值从false修改成true。
九、重启Chrome浏览器,打开使用Vue.js开发版的网页文件,发现此时Vue.js devtools图标亮了,能够使用该插件了。