Vue的学习笔记二:万里长征第一步~Vue调试工具安装

Vue.js devtools是基于浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。

firefox 和 chrome 浏览器都有这个插件。

1. firefox下Vue detools的安装

firefox的 Vue detools 安装比较简单。

1、浏览器选项,找到“附加组件”。

2、在搜索框里输入“vue”:

3、在搜索结果里找到“vue detools”:

点进去,选择“添加到firefox” 按钮 就OK了。

4、重启浏览器,就会看到 vue的图标了。

F12 打开执行了 Vue 代码的页面,就会看到 vue 的调试面板了

2. Chrome 下Vue detools插件的安装

Chrome 下安装 vue的调试工具比较麻烦,需要 按照Node,NPM,这里不讨论。

1、首先在GitHub上下载vue的调试程序插件 vue-devtools

地址:在github上下载压缩包并解压到本地,解压路径千万不要有中文(血的教训,否则不成功!)

github下载地址:https://github.com/vuejs/vue-devtools

2、下载完成后打开命令行cmd进入vue-devtools-master文件夹。依次执行命令:

  • npm install,安装依赖包;

  • npm run build

3、npm run build 执行完,打开文件夹中 shells>chrome>manifest.json 并把json文件里的"persistent":false改成true

4、扩展chrome插件

  • 打开chrome浏览器,打开更多工具>扩展程序;
  • 再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入

安装完毕。

发布了73 篇原创文章 · 获赞 97 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/weixin_42703239/article/details/102527590