mac安装vue-devtools

article/2025/10/8 12:05:20

一.先查看电脑是否安装了node

 没有安装node则需要安装node
mac 安装node.js

第一步:官网下载

访问nodejs官网,链接: https://nodejs.org/en/,选择红色选框内的点击安装。
LTS是稳定版。
Current是最新版本,最新的功能特性都在这里面。

 


第二步:安装

点击 在 Finder 中显示,双击刚下载的文件,按步骤默认安装就行。


第三步:验证

 

安装完成后,打开终端,
输入 npm -v 和 node -v两个命令,
如下图出现版本信息,说明安装成功


第四步:环境配置

 以上验证结束后,就可以进行环境配置了
打开Mac 终端,配置全局环境变量
键盘输入【vim .bash_profile】进入编辑状态
打开之后添加一行代码:PATH=$PATH:/usr/local/bin/
点击【esc】退出编辑状态,此时无法对内容进行修改
键盘输入【:wq!】强制保存并退出vim,回到终端的界面
重新打开终端,输入node,就会进入node环境
control+c 按两次退出node环境到此,mac安装node.js就成功了。


原文链接:https://blog.csdn.net/FIY_Lv/article/details/121380788

vue-devtools安装

方法一:(通过谷歌应用商店进行安装,需要番强,国内网打不开)

打开谷歌的更多工具--扩展程序,打开左上角的“主菜单”,点击下面的“打开Chrome网上应用店 ”,https://chrome.google.com/webstore这个应用商店是需要番强的,一般同学是打不开的!

能打开的同学搜索Vue.js devtools,把第一个扩展程序添加至Chrome即可。安装完成以后重新启动浏览器

 

 

安装以后可以运行一个vue项目,右键点击-检查把vue拖出来,拖到左边


若遇到Vue.js not detected这种情况,或者安装以后找不到Vue图标,或者安装以后不能使用点击扩展程序中的管理扩展程序,点击扩展程序的详细信息,会进入到下一个页面,将允许访问文件网址打开即可,然后切换至另一个页面便可看到V标志变亮。表示vue-devtools工具成功安装。具体操作如下图片所示:

 

 点击前往-前往文件夹,把下面路径输入进去,找到插件安装路径

 

/Users/sun/Library/Application Support/Google/Chrome/Default/Extensions

 

 

 

 二,通过文件安装

1、打开https://github.com/vuejs/vue-devtools

1.到github下载vue-devtools 的压缩包

git clone -b add-remote-devtools https://github.com/vuejs/vue-devtools.git
2.在vue-devtools目录下安装依赖包

cd vue-devtools
sudo npm install
然后输入电脑密码(加上sudo为了避免权限问题部分依赖无法安装)

3.修改manifest.json文件

进入vue-devtools-dev文件夹下的shells -> chrome -> manifest.json 
把"persistent":false改成true

 

 

4.编译npm run build

 

5.添加至谷歌浏览器

打开chrome浏览器的扩展程序页面,可通过以下方式进入页面:
        1、谷歌浏览器-->设置-->拓展程序-->打开“开发者模式”

         2、浏览器输入地址: chrome://extensions/-->打开“开发者模式”

添加拓展程序vue-devtools
将chrome文件(vue-devtools -> shells -> chrome)直接拖进去即可。
点击“加载已解压的拓展程序”,选择vue-devtool中的chrome文件夹,成功看见如下界面:

 搞定~~

参考链接如何安装vue-devtools(超简单)_前端吕小布的博客-CSDN博客_devtools怎么安装

vue-devtools安装教程(简单易上手)_小白_xm的博客-CSDN博客_vue-devtools安装

mac安装vue-devtools_小靳小盆友i.的博客-CSDN博客_mac vue-devtools


http://chatgpt.dhexx.cn/article/3rF4MUyf.shtml

相关文章

devtool使用介绍(1)

devtool使用介绍1 SDK中devtool的工作流程2.4.1 使用 devtool add添加应用程序 SDK中devtool的工作流程 可扩展SDK的核心要件是一个命令行工具,称为devtool。该工具提供了许多功能,可以帮助你在可扩展的SDK中构建,测试和打包软件&#xff0c…

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

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

DevTools使用

Chrome DevTools是内嵌在Chrome浏览器里的一组用于网页制作和调试的工具。使用DevTools,可以在平时中的开发调试中极大的提高效率。 使用快捷键ctrlshifti或者f12可以直接打开开发者工具。 在DevTools开发者工具一共有九个部分。 Element 在这张图中,右…

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

不少人都想下载 vue-devtools插件,但又不会做,今天我做个比较详细的笔记 查看当前的devtools的版本可以去这个网站看右侧的个v几点几的,就是版本号 github/vuejs/devtools 目录 第一个方法:使用极简插件 第一步:查…

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

目录 前言 一、vue-devtools是什么? 二、vue-devtools安装 1.下载vue-devtools工具 2.安装vue-devtools工具 三、vue-devtools的使用 总结 前言 主要介绍vue-devtools的安装与使用。 一、vue-devtools是什么? vue-devtools是一款基于chrome游览器…

devTools最新安装方法

VUE DevTools 最新安装方法 啊头疼!最近学习vue,要用到devtools,网上搜索资料,发现都不行,然后就试了好久好久,终于,成功了,接下来划重点!仔细看!&#xff0…

Devtools的简单使用

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

devtools安装

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

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

Devtools是Web测试时每天都要用的工具&#xff0c;它提供了很多调试功能&#xff0c;可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集&#xff0c;很多功能并没用到过。 作为高频使用的工具&#xff0c;还是有必要好好掌握的。测试时在日常工作中提BUG…

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

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

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

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

(十七)Spring Boot devtools

1、devtools简介 Spring Boot 提供了一组开发工具 spring-boot-devtools 可以提高开发者的工作效率&#xff0c;开发者可以将该模块包含在任何项目中&#xff0c;spring-boot-devtools 最方便的地方莫过于热部署了。 2、devtools 实战 2.1 基本用法 要想在项目中加入 devtoo…

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

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

Libev documentation

2019独角兽企业重金招聘Python工程师标准>>> NAME libev - a high performance full-featured event loop written in C SYNOPSIS #include <ev.h> EXAMPLE PROGRAM // a single header file is required #include <ev.h>#include <stdio.h> // f…

libev库使用教程

libev是用C语言编写的高性能、全功能事件循环库&#xff0c;支持select&#xff0c;poll模型&#xff0c;也支持linux特定的epoll模型&#xff0c;一个小巧、易用的库。 环境准备&#xff1a;ubuntu 一、libev库支持的功能 官方文档&#xff1a;http://pod.tst.eu/http://cvs…

偷懒的网络框架libevent、libev框架介绍

libevent、libev框架介绍 前言概述libevent编译安装libeventlibevent的封装层次 IO事件检测的封装与api介绍事件管理器event_base构建事件管理器event_base_new释放事件管理器event_base_freeevent_reinitevent_get_supported_methodsevent_base_get_method事件循环event_base_…

libev实现分析

libev实现分析 libev是一个事件驱动库&#xff0c;底层是基于select、epoll、kqueue等I/O复用接口。所谓事件驱动库&#xff0c;就是用户定义一个事件以及改事件发生时调用的函数&#xff0c;该库会监听该事件&#xff0c;并在事件发生时调用相应的函数。 libev提供了很多事件…

libev源码解读

1、源码&#xff1a; 源码参见官网或者我的github上 2、安装使用&#xff1a; 安装与基本使用参见我的另一篇博客&#xff1a;传送门 3、架构 Libev通过一个 struct ev_loop结结构表示一个事件驱动的框架。在这个框架里面通过ev_xxx结构&#xff0c;ev_init、ev_xxx_set、…

libev库

libev库 概念数据结构watch集合watch结构 全局触发事件集合数据结构事件触发之IO事件定时器原理ev_run函数 概念 libev是一个轻量级的事件通知库&#xff0c;具备支持多种事件通知能力。 数据结构 在熟悉代码之前先了解其相关数据结构往往更加方便后续代码的阅读。 在libev中…

libev 源码解析

一 libev简介 libev是一个轻量级的事件通知库&#xff0c;具备支持多种事件通知能力&#xff0c;通过对libev的源码的阅读&#xff0c;可以清楚了解事件通知实现内部机制。 二 核心数据结构 在libev中关键的数据结构是&#xff0c;loop结构体&#xff0c;该结构体定义的字段较…