前端vue调试工具：chrome浏览器vue-devtools安装方式详述

8月前作者：乔那YANG 分类：Toy博客阅读(66) 违法举报

这篇具有很好参考价值的文章主要介绍了前端vue调试工具：chrome浏览器vue-devtools安装方式详述。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

概述

vue-devtools官方文档，也可按照官方文档操作
下面将介绍chrome集成vue-devtools的两种方式

一、谷歌官方应用商店搜索安装

通过扩展->扩展程序->访问chrome应用商店输入vue-devtools搜索插件即可

chrome vue devtools安装,前端,vue.js,chrome

二、通过打包官方源码生成压缩包，管理扩展程序中加载对应的打包文件即可

下载源码选择对应的版本tag官方源码
我们这里选择最新版本v6.5.1
下载压缩包，或clone都可以*（
- 克隆命令：
```
git clone https://github.com/vuejs/devtools.git
```

chrome vue devtools安装,前端,vue.js,chrome

安装依赖以及打包，命令
```
yarn && yarn build
```
管理扩展程序->加载已解压的扩展程序
- 文件夹选则当前文件下的packages\shell-chrome
扩展成功预览
tips文章来源地址https://www.toymoban.com/news/detail-840002.html
- 打包成功后，仅仅保留packages\shell-chrome文件夹即可，其余可删除
- 最终文件已打包上传到百度云（扩展时直接使用该解压包即可）提取码：0408

到了这里，关于前端vue调试工具：chrome浏览器vue-devtools安装方式详述的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

[JavaScript] 第三章 Chrome 浏览器中调试JavaScript

[JavaScript] 第一章暂无 [JavaScript] 第一章暂无 [JavaScript] 第三章 Chrome 浏览器中执行 JavaScript

2024年02月15日
浏览(50)
在Chrome(谷歌浏览器)中安装Vue.js devtools开发者工具及解决Vue.js not detected报错

提示：先安装谷歌助手的原因是：不安装谷歌助手无法打开谷歌应用商店，导致无法下载Vue.js devtools开发者工具。

2024年02月15日
浏览(71)
Mac版chrome谷歌浏览器解决跨域，进行开发调试

跨域问题一般在浏览器中这样提示 1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A 网页设置的 Cookie，B 网页不能打开，除非这两个网页“同源”。所谓“同源”指的是“三个相同”：协议相同域名相同端口相同同源

2024年02月02日
浏览(63)
前端笔记 ---- Chrome 浏览器不能跨域访问解决方案

1. 需求场景 Chrome 浏览器开发 H5 进行接口联调时，浏览器不允许跨域访问；想通过浏览器设置，不使用代理等，浏览器可以进行跨域访问。 2. 报错图片 3. 解决方案 3.1 获取Chrome 浏览器安装位置 3.2 设置允许跨域和不验证证书 3.3 cmd 执行设置命令 3.4 组成完整命令 3.5 cmd 运行命

2024年02月15日
浏览(53)
selenium工具启动Chrome浏览器时配置选项详解

mb62abf3afb54fb2022-06-18 00:02:10 文章标签chromechrome浏览器加载文章分类虚拟化云计算阅读数1473 前言 1、 Chromeoptions 是Chrome浏览器的参数对象，是配置Chrome启动时属性的类。通过某些参数可以为Chrome浏览器添加启动参数。 2、Chrome浏览器启动时的参数携带过程：启动参数在初始化C

2024年02月11日
浏览(62)
前端进阶之———浏览器调试巧技

有幸的参加了一次腾讯的面试，被面试官问到了JS能不能在浏览器上import依赖已经遇到一个错误函数应该怎么解决。之前的经验是做一些简单的html，css样式调试以及他的报错信息，忽略了浏览器js调试的强大功能。觉得还是非常有必要的，很好的帮助我们以解决后

2024年02月10日
浏览(45)
多种方法解决谷歌(chrome)、edge、火狐等浏览器F12打不开调试页面或调试模式(面板)的问题。

不论是前端开发者，还是后端开发者，我们在调试 web 项目时，偶尔弹出相关错误。此时，我们需要打开浏览器的调试模式，如下图所示：通过浏览器的调试模式，来排查错误的根源：后端接口是否有问题前端 js 或者相关前端框架是否有问题。当然，我们也可以通过调试

2024年02月09日
浏览(97)
【安全策略】前端 JS 安全对抗&浏览器调试方法

1.1 什么是接口加密如今这个时代，数据已经变得越来越重要，网页和APP是主流的数据载体。而如果获取数据的接口没有设置任何的保护措施，那么数据的安全性将面临极大的威胁。不仅可能造成数据的轻易窃取和篡改，还可能导致一些重要功能的接口被恶意调用，引发DDoS、

2024年01月21日
浏览(55)
chrome浏览器开发者工具network面板过滤、隐藏指定的请求

在我的这篇文章中介绍了，怎么在开发者工具network面板中屏蔽请求，但是屏蔽请求的意思是这个请求不会再发出去，如果是功能性请求，直接屏蔽掉会影响功能，所以我们一般很少用到。我们常用的方法其实是过滤、隐藏请求，所有的请求都照常发送，但是不展示。方法很

2024年02月13日
浏览(59)
Chrome 浏览器安装Vue2、Vue3插件方法 (详细有效)

因为谷歌商城需要翻墙，很多人进不去，无法下载vue插件。推荐一个好用的网站“极简插件”，里面有很多的谷歌应用插件可以下载。下载插件地址点击上方链接，在极简插件里搜索如图下载，根据自己需要进行下载。点开扩展程序页面，方面后面把插件拖进去以

2024年02月12日
浏览(54)