Vue项目使用开发工具vuejs-devtools最新简单安装方法

目录

    • 1.打开自己谷歌浏览器(Google Chrome),浏览器输入网址进入应用商店
    • 2.搜索栏里面搜索`vue-devtools`,我添加的第三个,点击进入添加即可,如下图
    • 3.打开浏览器进入这个网址`打开开发者模式`chrome://extensions/,如下图
    • 4.此步骤可以省去,可以直接看5,因为主要想用控台F12查看vue报错情况,想要浏览器右上角V小图标显示,置顶小图标,看如下步骤
    • 5. 在main.js 全局挂载打开,填上,`Vue.config.devtools = true;` 然后用新启动Vue项目,用谷歌浏览器
    • 6. 按F12控制台查看vue使用vue-devtools功能,如下图

1.打开自己谷歌浏览器(Google Chrome),浏览器输入网址进入应用商店

网址:https://chrome.google.com/webstore/search/vue-devtools?hl=zh-CN

2.搜索栏里面搜索vue-devtools,我添加的第三个,点击进入添加即可,如下图

(1)

Vue项目使用开发工具vuejs-devtools最新简单安装方法_第1张图片

(2)

Vue项目使用开发工具vuejs-devtools最新简单安装方法_第2张图片

3.打开浏览器进入这个网址打开开发者模式chrome://extensions/,如下图

(1)

在这里插入图片描述

4.此步骤可以省去,可以直接看5,因为主要想用控台F12查看vue报错情况,想要浏览器右上角V小图标显示,置顶小图标,看如下步骤

(1)

在这里插入图片描述

(2)

Vue项目使用开发工具vuejs-devtools最新简单安装方法_第3张图片

5. 在main.js 全局挂载打开,填上,Vue.config.devtools = true; 然后用新启动Vue项目,用谷歌浏览器

6. 按F12控制台查看vue使用vue-devtools功能,如下图

(1)

Vue项目使用开发工具vuejs-devtools最新简单安装方法_第4张图片

感觉文章好的话记得点个心心和关注,有错的地方麻烦指正一下,多谢!!!

你可能感兴趣的:(vue,vue.js,chrome,javascript,vuejs-devtools)