程序员经验分享-hwhale

chrome浏览器安装react-devtools

2023-05-16

    react-devtools是react开发时的一个浏览器插件，对于各大主流高级浏览器都有扩展程序可以安装，官方的地址默认是https://github.com/facebook/react-devtools，但是后来它又集成到了react项目中，所以通过源码编译安装起来给人一种错觉，到底是安装react-devtools还是react。如果是直接git clone，还需要切换分支v3，然后构建。

    这里推荐直接通过码云上的react-devtools仓库来获取源代码进行构建，原因一个是克隆速度，一个是不用切换分支，克隆之后就可以使用。地址如下：https://gitee.com/mirrors/react-devtools.git

    克隆到本地之后：

cd react-devtools
cnpm i
yarn build:extenstion

   构建成功的截图如下：

   

    根据提示，我们可以运行测试：

           

    这个测试默认会打开chrome浏览器，并且显示react官网主页。浏览器右上角会有一个react的icon，表示扩展程序构建成功且可以安装。但是这个安装，貌似是临时的，如果重新打开浏览器，这个插件并没有显示出来，扩展程序里面也没有，这仅仅是一个测试。

    

    真正的安装，我们需要在扩展程序这个页面，选择加载已解压的扩展程序，找到react-devtools/shells/chrome/build/unpacked目录即可。

    

    扩展程序安装成功，最后检验，需要运行react的项目，然后打开浏览器，打开开发者工具选项，查看到多了一个React的Tab：

     

    到此，可以说react-devtools就是安装成功，并且可以使用了。 

    

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Chrome

React

devTools

浏览器安装

chrome浏览器安装react-devtools 的相关文章

  • React 定时刷新接口

    通过 useEffect 在页面加载时调用 getNodeDetailList 列表接口 useEffect gt getNodeDetailList change 然后通过 setInterval 来进行定时刷新 useEffect gt

  • hooks实践总结

    何为hooks 在React中hook是指不编写 class 的情况下使用 state 以及其他的 React 特性 而Vue3也推出了具有相同功能的组合式API 如果你用过Vue3就会知道在 setup 中你应该避免使用 this 因为h

  • 值得收藏的UmiJS 教程

    点击上方关注 前端技术江湖 一起学习 天天进步 前言 网上的umi教程是真的少 很多人都只写了一点点 很多水文 所以打算自己写一篇 自己搭建umi 并封装了一下常用的功能 并用到公司实际项目中 umi介绍 Umi 是什么 Umi 中文可发音

  • vue发展历史简介

    基本介绍 Vue 是一套用于构建用户界面的 渐进式框架 与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用 最初它不过是个人项目 时至今日 已成为全世界三大前端框架之一 github 上拥有 17 8万 Star 领先于 Reac

  • React事件处理及事件流

    React事件处理 React事件处理是通过将事件处理器绑定到组建上处理事件 事件触发的同时更新组建的内部状态 内部状态更新会触发组件的重绘 React 元素的事件处理和 DOM 元素的事件处理很相似 但语法上的略有区别 在React中事件

  • error Missing “key“ prop for element in array react/jsx-key

    react遇到一个奇怪的问题 error Missing key prop for element in array react jsx key 检查了jsx中使用map的 都定义了key div otherList map item an

  • React配置@src根路径

    第一种 直接修改node modules包中的webpack config js文件 找到node modules react scripts config webpack config js文件 修改其中alias中的配置 添加 src

  • Selenium Python 自动化搭建及简单用例编写

    1 首先确定自己的浏览器的当前版本号 2 下载对应版本驱动 http chromedriver storage googleapis com index html 下载完成后直接复制到py的目录下 3 调用 简单三行代码就可以简单实现我们的

  • 使用 R 的 devtools 库函数“安装”时如何保留源文件

    我正在尝试从源代码构建 R 包 DESeq2 以便我可以调试它 我已经安装了所需的所有依赖项 并且正在关注希拉里帕克的指示用于创建 R 包 我使用 R 3 4 2 在 CentOS 6 6 上运行它 I run library devtoo

  • 是什么设置了“auto_saved_sql”键以及为什么？在本地存储下的chrome devtools中找到

    我在 Chrome 中检查我的网络应用程序 发现一个名为 auto saved sql 的键包含以下查询语句 SELECT FROM myTable WHERE 我在控制台 gt 应用程序 gt 本地存储下找到了它 我的应用程序仍在开发中

  • 43 个 Bash 编程最容易犯的错误大全

    Bash Pitfalls 1 文章介绍了 40 多条日常 Bash 编程中 老手和新手都容易忽略的错误编程习惯 每条作者在给出错误的范例上 详细分析与解释错误的原因 同时给出正确的改写建议 文中有不少引用的文章 也值得大家仔细阅读 仔细阅

  • 自定义hooks

    自定义传参hooks 把大多数的通用代码 或者props 抽成一个hooks 用hooks实现上下文 就不用再一一传参了 实现原理 主要是通过createContext useContext 生产 消费者模式 用于大量props一层一层传参

  • R 包中的私有 Bitbucket 包依赖项

    Summary 创建包时 我可以在中列出 CRAN 依赖项Depends列出在DESCRIPTION file 本文档概述了如何列出 Bitbucket 依赖项 例如 Remotes bitbucket sulab mygene r def

  • 找不到必要的构建工具。使用 devtools 遇到错误

    我正在尝试安装 BTYDPlus 包 https github com mplatzer BTYDplus https github com mplatzer BTYDplus 当我输入这个命令时 devtools install gith

  • 具有私有 github 依赖项的 R 包

    我正在开发一个内部 R 包 它将从 github 存储和安装 但它依赖于另一个也在私人存储库中的 R 包 我知道如何使用开发工具指定远程依赖项Remotes tag vignette https github com hadley devt

  • C++ 函数不可用

    我有以下文件 cumsum bounded cpp include

  • 自动从包中的sysdata.rda加载数据

    我花了很多时间寻找可能是一个非常基本的问题的答案 但我就是找不到解决我的问题的方法 我发现的最接近的是这次交流 https stat ethz ch pipermail r devel 2011 August 061786 html从几年前

  • 如何在数据框列表上使用 devtools::use_data？

    我有一系列数据框 我想将它们保存为包中的单独 rda 文件 我可以用devtools use data my df1 my df2 但我没有每个数据帧的命名对象 它们都存储在一个大列表中 我想要做的是为每个列表元素调用 use data 并

  • DevTools 在 Intellij 中重新启动两次

    我正在 Intellij 中启动一个新的 Spring Boot 2 4 2 应用程序 并添加了 DevTools Spring Boot 是在 spring io 的主页中创建的 而不是通过 Intellij 创建的 在首选项 gt 构建

  • Chrome DevTools 中缺少“添加到主屏幕”链接

    使用 Google 服务可能会令人沮丧 他们有令人难以置信的文档 但文档总是假设一切正常 如果有什么东西不像广告上说的那样有效 那你就完全靠自己了 没有错误消息 没有解决问题的帮助 甚至没有承认某些事情可能不起作用 以防万一 添加到主屏幕

随机推荐

  • vue+vuetify表格控件v-data-table使用自定义列渲染

    这里先说明一下vue项目中使用vuetify框架进行整合的办法 xff1a 1 加入依赖 npm install vuetify save 2 加入开发依赖 npm install sass sass loader deepmerge sa

  • vue+vuetify构建简单消息确认框

    vue框架自己好像没有弹出框 xff0c 而vuetify有弹出框v dialog xff0c 没有确认框confirm xff0c 虽然确认框本身就是弹出框 xff0c 但是弹出框的功能有个特点 xff0c 就是确定做一件事情 xff0c

  • docker-compose构建mysql服务

    docker安装mysql服务显得很快捷 xff0c 我们如果使用了docker compose那就更快了 xff0c 我们只需要按照我们的要求 xff0c 设置相应的端口映射 xff0c 如果有需求 xff0c 也可以设置数据映射 配置如

  • Nginx核心模块内置变量

    本文根据Nginx官网整理了Nginx的ngx http core module模块的内置变量 xff0c 可与Apache做对比参考 随后做了一次测试观察各变量的值 xff0c 并附上测试结果 1 变量列表 arg name 请求行中参数

  • js属性名用变量代替

    在前端中 xff0c 我们有时候需要利用变量名来设置属性名 xff0c 虽然不是很常见 xff0c 但是也是一个应用场景 这时候 xff0c 我们如果想当然的 xff0c 直接使用变量来设置 xff0c 那么可能不会达到我们想要的结果的 我

  • nodejs利用ffi库调用windows系统user32库函数获取桌面程序窗口大小

    ffi库是npm提供的操作windows系统库函数的依赖库 xff0c 安装过程会比较麻烦 xff0c 需要编译 xff0c 可能需要npm全局安装windows build tools xff0c 如何安装 xff0c 可以参照这里 这篇

  • nodejs利用ffi库调用windows系统user32函数模拟用户登录操作

    如题所示 xff0c 一般的桌面程序 xff0c 用户登录很简单 xff0c 就是找到用户名和密码输入框 xff0c 输入相应的用户名和密码 xff0c 然后点击 登录 按钮 xff0c 完成登录操作 这是人为操作的步骤 xff0c 如果这

  • 通过vue指令创建electron-vue模板项目出现一直“downloading template“问题

    今天试了一下 xff0c vue init simulatedgreg electron vue vueapp的时候 xff0c 在命令行下一直downloading template xff0c 让我很懊恼 原来vue init创建的时候

  • electron-vue与vuetify整合出现报错：If you‘re seeing “$attrs is readonly“

    如题所示 xff0c 正常情况下electron vue与vuetify的整合 xff0c 因为就是vue与vuetify的整合 xff0c 按照一般的推荐方法 xff0c 基本不会出错 xff0c 但是 xff0c 这里因为electro

  • VISA编程实例(C实现)

    今天写这个文章 xff0c 是因为自己工作中用到了ROHDE amp SCHWARZ xff08 即罗德 施瓦茨公司 xff09 的仪表设备 xff0c 需要通过编程的方式来读取仪表上功率测试结果 xff0c 本来仪表上显示了测试结果 xf

  • mac下通过gcc命令手动编译动态链接库示例

    编译动态链接库 xff0c windows linux mac平台各不相同 xff0c 从文件上来说 xff0c windows下是dll xff0c linux下是so xff0c mac下是dylib xff1b 命令上也会有区别 xf

  • c++中char[]与char*的转换以及char*与数字互转

    在c c 43 43 中 xff0c 字符串操作不可避免 xff0c 而且通常 xff0c char 或者char 就能表示字符串 xff0c 这个跟java语言有很大的差别 xff0c java中char是字符 xff0c string才

  • electron项目构建打包缺少dll文件的问题解决办法

    最近 xff0c 在做electron项目中 xff0c 使用了第三方dll xff0c 开发环境运行一切正常 xff0c 可是当我们打包 xff0c 最后生成的可执行程序再执行 xff0c 发现调用dll总是不成功 xff0c 猜测是少了

  • c/c++中的回调函数

    c c 43 43 中的回调函数是一个很奇怪的东西 xff0c 在java中 xff0c 方法调用的时候 xff0c 参数最多可以传入另一个对象实例 xff0c 然后在方法体内 xff0c 调用实例的方法 xff0c 做不到方法调用的时候

  • 在Windows下配置多个git账号

    本文记录在Windows下配置两个github账号的过程 1 生成并部署SSH key 安装好Git客户端后 xff0c 打开git bash xff0c 输入以下命令生成user1的SSH Key xff1a ssh keygen t r

  • windows命令行下通过cl命令编译动态链接库示例

    一般在windows下写一个c c 43 43 的动态链接库 xff0c 我们都是在visual studio或着visual c 43 43 这些ide里面进行编译和生成的 xff0c 今天介绍 xff0c 如何通过命令行来实现手动编译和

  • gdb命令调试c程序

    一般开发c语言程序 xff0c 都是在ide中编码 xff0c 调试也是使用集成环境 xff0c 有时候 xff0c 我们的程序是在文本编辑器中编写的 xff0c 这时候可能使用gcc编译 xff0c 然后运行可执行程序 遇到需要调试的场景

  • 选择排序算法与示例详解（c语言）

    选择排序是排序算法的一种 xff0c 思想就是 xff0c 每一轮寻找数组中最大的值或者最小的值 xff0c 放在头部或者放入一个新的数组 这样经历一轮遍历 xff0c 数组或者新数组就是排好序的 xff0c 他的目的很明确 xff0c 每

  • 2020年csdn盘点

    十年前就注册了csdn账号 xff0c 之后一直没有写过博客 xff0c 都是看别人的博客 xff0c 等到2015年左右发表了第一篇自己的博客 xff0c 直到2016年底觉着做技术的就需要记录自己的博客 xff0c 不仅是自己学习的过程

  • chrome浏览器安装react-devtools

    react devtools是react开发时的一个浏览器插件 xff0c 对于各大主流高级浏览器都有扩展程序可以安装 xff0c 官方的地址默认是https github com facebook react devtools xff0c

热门标签