vue devtools调试工具安装（详细）

article/2025/10/8 10:33:38

Vue调试工具安装（vue devtools）


第一步：下载vue-devtools

创建一个空的文件夹，命名最好可以见名知意，复制目录后打开命令行

复制目录
在cmd中进入此文件夹目录下，输入npm install vue-devtools命令开始下载（前提：安装node.js）

在这里插入图片描述

第二步：将扩展文件加载到浏览器

下载完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，进入此文件夹，将其中vender 文件夹下的 manifest.json文件 进行编辑，修改persistent 为 true，保存文件

在这里插入图片描述

打开浏览器找到扩展程序（以谷歌为例），并勾选开发者模式，点击出现的“加载扩展程序”按钮
在这里插入图片描述
最后选择vender 文件，重启浏览器就可以使用了

在这里插入图片描述


http://chatgpt.dhexx.cn/article/lALmWq8x.shtml

相关文章

浏览器 DevTools使用

浏览器 DevTools使用

原文地址 Start 本文将会介绍浏览器devtool的一些常用工具方法，这些工具能够以可视化的方式展现当前网页情况，我们也能快速定位代码问题，如果我们能很好的利用起来，那就能写出高质量代码。 Performance(重点) 强大的性能监控工具…
阅读更多...
热部署Devtools

热部署Devtools

热部署Devtools 1.添加devtools到项目中 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependenc…
阅读更多...
React-DevTools开发者工具安装

React-DevTools开发者工具安装

React开发者工具最简单的安装方式自然是科学上网&#xff0c;通过Google Chrome浏览器访问应用商店安装了。以下介绍另一种安装方式&#xff1a;基于 react-devtools的GitHub项目源码编译进行插件安装。 目录 React-DevTools&#xff1a;GitHub项目地址 React-DevTools&#x…
阅读更多...
react-devtools安装教程

react-devtools安装教程

有时候看网上各路大神&#xff0c;写如何安装react-devtools&#xff0c;大神就是大神&#xff0c;好多步骤一笔带过&#xff0c;导致一些学习者看的一脸懵逼&#xff0c;今天我给大家讲超级简单的react-devtools安装步骤&#xff0c;相信看过的小伙伴儿不存在懵逼状态&#xf…
阅读更多...
VUE3 VUE-DEVTOOLS 安装

VUE3 VUE-DEVTOOLS 安装

VUE3 Vue-Devtools 正确安装&#xff0c;亲测有效 写在前面正确的安装方式下载源码编译安装 写在前面 最近在学习Vue3。学习Vue自然离不开debug。Vue官方发布了调试工具Vue-Devtools。 官方网址&#xff1a;Vue-Devtools。 对于Vue3&#xff0c;Vue-Devtools没有正式的发布&a…
阅读更多...
如何在生产环境使用devtools？

如何在生产环境使用devtools？

经常会有在生产环境使用devtools插件的需求&#xff0c;但是看别人操作之后自己就老是忘记&#xff0c;在这儿记录一下在生产环境使用devtools的整个过程。 1、原理 其实是否使用devtools是根据Vue.config.devtools这个配置来决定的&#xff0c;这个配置在开发环境下会被设为t…
阅读更多...
mac安装vue-devtools

mac安装vue-devtools

一.先查看电脑是否安装了node 没有安装node则需要安装node mac 安装node.js 第一步&#xff1a;官网下载 访问nodejs官网&#xff0c;链接: https://nodejs.org/en/&#xff0c;选择红色选框内的点击安装。 LTS是稳定版。 Current是最新版本&#xff0c;最新的功能特性都在这…
阅读更多...
devtool使用介绍(1)

devtool使用介绍(1)

devtool使用介绍1 SDK中devtool的工作流程2.4.1 使用 devtool add添加应用程序 SDK中devtool的工作流程 可扩展SDK的核心要件是一个命令行工具&#xff0c;称为devtool。该工具提供了许多功能&#xff0c;可以帮助你在可扩展的SDK中构建&#xff0c;测试和打包软件&#xff0c…
阅读更多...
vue-devtools-简介、下载、安装、配置、使用

vue-devtools-简介、下载、安装、配置、使用

一、简介 vue-devtools是一款基于chrome游览器的插件&#xff0c;可以用于调试vue应用&#xff0c;也可以用来辅助我们找到各页面对应的Vue.js文件路径&#xff0c;这将极大地提高我们的开发和调试效率。 二、下载 下载路径&#xff1a;https://github.com/vuejs/vue-devtoo…
阅读更多...
DevTools使用

DevTools使用

Chrome DevTools是内嵌在Chrome浏览器里的一组用于网页制作和调试的工具。使用DevTools&#xff0c;可以在平时中的开发调试中极大的提高效率。 使用快捷键ctrlshifti或者f12可以直接打开开发者工具。 在DevTools开发者工具一共有九个部分。 Element 在这张图中&#xff0c;右…
阅读更多...
下载、编译、安装、使用 vue-devtools

下载、编译、安装、使用 vue-devtools

不少人都想下载 vue-devtools插件&#xff0c;但又不会做&#xff0c;今天我做个比较详细的笔记 查看当前的devtools的版本可以去这个网站看右侧的个v几点几的&#xff0c;就是版本号 github/vuejs/devtools 目录 第一个方法&#xff1a;使用极简插件 第一步&#xff1a;查…
阅读更多...
Vue调试工具vue-devtools的安装与使用

Vue调试工具vue-devtools的安装与使用

目录 前言 一、vue-devtools是什么&#xff1f; 二、vue-devtools安装 1.下载vue-devtools工具 2.安装vue-devtools工具 三、vue-devtools的使用 总结 前言 主要介绍vue-devtools的安装与使用。 一、vue-devtools是什么&#xff1f; vue-devtools是一款基于chrome游览器…
阅读更多...
devTools最新安装方法

devTools最新安装方法

VUE DevTools 最新安装方法 啊头疼&#xff01;最近学习vue&#xff0c;要用到devtools&#xff0c;网上搜索资料&#xff0c;发现都不行&#xff0c;然后就试了好久好久&#xff0c;终于&#xff0c;成功了&#xff0c;接下来划重点&#xff01;仔细看&#xff01;&#xff0…
阅读更多...
Devtools的简单使用

Devtools的简单使用

一.Devtools作用 方便我们实时地观察自己写的数据和组件的状况等。 二.安装 极简插件_Chrome扩展插件商店_优质crx应用 <template><div class""></div> </template><script> export default {data() {return {name:芜湖, //单项数据…
阅读更多...
devtools安装

devtools安装

文章目录 一、devtools安装二、参考、推荐、补充 一、devtools安装 vue官网上找到vue-devtools的GitHub项目 https://github.com/vuejs/devtools 我选择放在E盘中新建的devtools文件中&#xff0c;解压 进入解压好的devtools-main文件夹中 这里默认已经下载了node 然后在…
阅读更多...
使用浏览器这么多年，你真的了解DevTools吗？

使用浏览器这么多年，你真的了解DevTools吗？

Devtools是Web测试时每天都要用的工具&#xff0c;它提供了很多调试功能&#xff0c;可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集&#xff0c;很多功能并没用到过。 作为高频使用的工具&#xff0c;还是有必要好好掌握的。测试时在日常工作中提BUG…
阅读更多...
前端开发工具DevTools的详细知识点总结（一）

前端开发工具DevTools的详细知识点总结（一）

文章目录 打开DevTools元素面板Style面板Computed面板devtools取色器 控制台面板基本功能介绍控制台应用 网络面板功能区介绍分析请求 结语 打开DevTools devtools,即Chrome 开发者工具&#xff0c;Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具&#xff…
阅读更多...
最新版的配置热加载工具DevTools

最新版的配置热加载工具DevTools

最新版的配置热加载工具 DevTools 在SpringBoot开发调试中&#xff0c;如果我每行代码的修改都需要重启再调试&#xff0c;可能比较费时间&#xff1b;SpringBoot团队针对此问题提供了spring-boot-devtools&#xff08;简称devtools&#xff09;插件&#xff0c;用此插件提升开…
阅读更多...
（十七）Spring Boot devtools

（十七）Spring Boot devtools

1、devtools简介 Spring Boot 提供了一组开发工具 spring-boot-devtools 可以提高开发者的工作效率&#xff0c;开发者可以将该模块包含在任何项目中&#xff0c;spring-boot-devtools 最方便的地方莫过于热部署了。 2、devtools 实战 2.1 基本用法 要想在项目中加入 devtoo…
阅读更多...
libev事件驱动网络库从安装到使用

libev事件驱动网络库从安装到使用

上次说到的select/poll模型&#xff08;传送门&#xff09;的特征在于每一个执行周期都会探测一次或一组事件&#xff0c;一个特定的事件会触发某个特定的响应。我们可以将这种模型归类为“事件驱动模型”。 相比其他模型&#xff0c;使用 select() 的事件驱动模型只用单线程&…
阅读更多...
推荐文章

Copyright @ 2022~2023