第一步:获取 Vue DevTools 插件
你只要打开 Chrome 网上应用店,搜索 “Vue.js Devtools”,找到官方插件并点击添加至 Chrome(通常显示为“添加至 Chrome”按钮)。
第二步:安装插件
如果你点击了添加至 Chrome,会弹出一个确认窗口,同意安装并允许它访问你的浏览器数据,点击“添加扩展程序”或类似的确认按钮。
第三步:启用插件
安装完毕后,Vue.js DevTools 就会在你的 Chrome 浏览器扩展程序列表中出现,通常情况下它会自动启用。如果没启用,你可以在 Chrome 地址栏输入 chrome://extensions/ 进入扩展程序管理页面,找到 Vue.js DevTools,确保其开关处于开启状态。
第四步:使用插件
当你访问一个基于 Vue.js 构建的网页时,Chrome 右上角的扩展图标(Vue.js 图标)会亮起。点击这个图标,DevTools 就会出现在一个新的窗口或嵌入在浏览器窗口的侧边栏中,这样你就可以开始对 Vue 应用进行实时调试和监控啦!