安装使用react devtools的两种方式

最新推荐文章于 2024-08-13 08:40:25 发布
最新推荐文章于 2024-08-13 08:40:25 发布
阅读量532 收藏
点赞数
分类专栏： react 文章标签： chrome devtools reactjs chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adam_De/article/details/118580512
版权
本文介绍了在Chrome浏览器中安装React Devtools的两种方法：一种是作为浏览器扩展，通过Chrome Web Store搜索并安装；另一种是在react-devtools代码仓库获取，以独立应用的方式运行，并在项目的index.html中进行配置。通过这两种方式，开发者可以更方便地调试React应用程序。
摘要由CSDN通过智能技术生成

安装使用react devtools的两种方式;

  • 作为浏览器扩展 （以chrome为例）
    在chrome web store中搜索react developer tools；重新打开对应的react应运，即可开始嗨一下了
    在这里插入图片描述
    在这里插入图片描述

  • 作为react-devtools app使用 在react-devtools代码仓库中，可以查看具体使用方式（当前只涉及到pc端应运）

    step1：建议使用cnpm

    	npm install -g react-devtools

    step2：添加

    • 


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  adam_De
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
关于chrome中如何安装react-devtools开发工具

				
			

			

				

					weixin_45774322的博客
				

				

					09-10
					
					314
					
				

			

		

		

			
				
@(关于chrome中如何安装react-devtools开发工具)
关于chrome中如何安装react-devtools开发工具
安装react-devtools的前提是本地安装了git 以及node
1.首先访问官网：https://github.com/facebook/react-devtools/tree/v3
2.按照提示,复件项目文件的github地址

3.在命令行中运行命令
git clone https://github.com/facebook/react-devtools.git


			
		

	



                

              
                



	

		

			

				
					
React之devtools的使用

				
			

			

				

					youhebuke225的博客
				

				

					05-05
					
					2143
					
				

			

		

		

			
				
安装

官网

https://www.cnblogs.com/xiaoxuStudy/p/13339641.html



			
		

	



                


  
              

                


	

		

			

				
					
React Query Devtools 教程

					
最新发布

				
			

			

				

					gitblog_00773的博客
				

				

					08-13
					
					305
					
				

			

		

		

			
				
React Query Devtools 教程
 react-query-devtools⚛️ Devtools for React Query项目地址:https://gitcode.com/gh_mirrors/re/react-query-devtools 1. 项目目录结构及介绍
react-query-devtools 的目录结构主要包括以下几个部分：
react-query-devto...

			
		

	





	

		

			

				
					
安装 react-devtools

				
			

			

				

					AvrilML的博客
				

				

					03-05
					
					405
					
				

			

		

		

			
				
去git上下载react-devtools文件到本地，下载地址： https://github.com/facebook/react-devtools ；
	可以直接下载zip安装包解压，或者通过git clone来将项目拷贝到本地git clone https://github.com/facebook/react-devtools.git
	进入react-devtools文件夹，用npm...

			
		

	



		

			
		



	

		

			

				
					
安装react开发者工具react-devtools工具

				
			

			

				

					m0_60322879的博客
				

				

					05-05
					
					487
					
				

			

		

		

			
				
11

			
		

	





	

		

			

				
					
React 调试开发插件 React devtools 的使用

				
			

			

				

					BILL-博客-LLIB
				

				

					08-17
					
					1534
					
				

			

		

		

			
				
当在 Element 处点击任意 DOM 元素的时候，可以看到有个 “==$0”，可以通过 "$0" 获取相关的 DOM 节点。同样地，在 Components 处选中某一个React组件后，可以在 Console 处将当前选中的 React 元素输出。比如，点击左边的第一个ListItem，右边显出它的 props 相关属性、事件处理函数等等。在 Components 处，可以看到整个 React 应用的组件数。在 Console 处输入 $r，就输出了该组件的实例。右窗口显示组件具体的属性。

			
		

	





	

		

			

				
					
前端开源库-mobx-react-devtools

				
			

			

				

					08-29
				

			

		

		

			
				
`mobx-react-devtools`结合这两者，提供了一种直观的方式来监控和理解应用程序中的数据变化。  **描述解析：**"mobx react dev tools，mobx和react的dev工具"  描述简单明了，强调`mobx-react-devtools`是针对MobX和...

			
		

	





	

		

			

				
					
React Developer Tools和Redux DevTools

				
			

			

				

					08-30
				

			

		

		

			
				
React Developer Tools和Redux DevTools是两个非常重要的开发者工具，它们为JavaScript前端开发人员提供了一种高效的方式来调试和优化React和Redux应用。这两个工具都作为谷歌浏览器（Chrome）的扩展程序，极大地...

			
		

	





	

		

			

				
					
react-使用React和GraphQL重实现一个HackerNews网站

				
			

			

				

					08-15
				

			

		

		

			
				
在本项目中，我们将深入探讨如何使用React和GraphQL这两个现代前端技术栈的强大力量，重现实现一个功能丰富的Hacker News网站。React是Facebook推出的一款用于构建用户界面的JavaScript库，而GraphQL则是一种用于API...

			
		

	





	

		

			

				
					
react-devtools安装使用

				
			

			

				

					dong123ohyes的专栏
				

				

					06-06
					
					655
					
				

			

		

		

			
				
一、直接下载编译好的release包

1.访问releaseshttps://github.com/facebook/react-devtools/releases

2.可选择chrome或firefox的扩展程序包

chrome-extension.zip

firefox-extension.zip

3.解压后，在浏览器中导入扩展程序即可








...

			
		

	





	

		

			

				
					
React学习28（redux-devtools使用）

				
			

			

				

					xiaojian044的博客
				

				

					12-18
					
					712
					
				

			

		

		

			
				
redux-devtoos安装使用

			
		

	





	

		

			

				
					
npm 安装React Devtools调试工具

				
			

			

				

					jingtian678的博客
				

				

					04-08
					
					328
					
				

			

		

		

			
				
前言
这里主要写给和我一样摸索的新手，之前相信大家也看到了网上的一些安装方法，有的给你个git上的下载链接，然后就没有然后了(好像官方也没给个具体操作)；有的让你去google商店下载一个.crx，前提你的网能翻墙。这里主要讲一下如何通过git上的react-devtools文件下载后打包一份扩展程序，来对chrome浏览器进行插件安装。

1.去git上下载react-devtools文件到本地...

			
		

	





	

		

			

				
					
Mac react-native  npm install -g react-devtools 报错

				
			

			

				

					梦若在心就在的博客
				

				

					12-22
					
					209
					
				

			

		

		

			
				
报错 可以尝试


sudo npm install -g react-devtools --unsafe-perm=true --allow-root  如果卡主不动的话，可以考虑墙了


			
		

	





	

		

			

				
					
React DevTools性能分析：深入了解你的组件渲染

				
			

			

				

					m0_61607678的博客
				

				

					09-26
					
					769
					
				

			

		

		

			
				
React DevTools 是一个强大的工具，可以帮助你深入了解React应用程序的性能，从而更好地识别和解决性能问题。通过观察渲染时间、使用Profiler工具以及分析性能数据，你可以优化你的React应用，提供更好的用户体验。在下一篇博客文章中，我们将深入研究如何使用React.memo来缓存组件的渲染结果，以减少不必要的重新渲染。希望这篇文章详细介绍了使用React DevTools进行性能分析的步骤和技巧。如果您有任何进一步的问题或需要更多信息，请随时提问。

			
		

	





	

		

			

				
					
React Developer Tools

				
			

			

				

					wangjuan_01的专栏
				

				

					07-31
					
					1472
					
				

			

		

		

			
				
React Developer Tools
With React Native 0.43 or higher, you can use the standalone version of React Developer Tools to debug the React component hierarchy. To use it, install the react-devtools packa

			
		

	





	

		

			

				
					
react-devtools简单安装教程

				
			

			

				

					菜菜鸟的博客
				

				

					04-22
					
					7532
					
				

			

		

		

			
				
1.首先打开官网：https://github.com/facebook/react-devtools
发现好像主分支是空的，不慌不慌，继续走着

那咱就进去v3分支，地址：https://github.com/facebook/react-devtools/tree/v3，直接download ZIP格式

2.知道下载位置，解压到自己可以找见的目录下，进入到react-devtools-3目录...

			
		

	





	

		

			

				
					
在chrome中安装react devtools

				
			

			

				

					qq_46112580的博客
				

				

					08-27
					
					693
					
				

			

		

		

			
				
在网上看了几位前辈分享的博客，真的想问一下 你自己亲自用过你说的方法吗 。。。还都是最新更新的博客  别人地址都换了还用老地址。
  话不多说 直接实际操作 
  首先 地址https://github.com/facebook/react-devtools/releases  
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200827202602118.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5na..

			
		

	





	

		

			

				
					
react  项目如何安装并使用  Redux DevTools Extension

				
			

			

				

					浮生离梦的博客
				

				

					05-23
					
					1488
					
				

			

		

		

			
				
一、react项目安装并使用Redux DevTools Extension


在 react 项目中，通过 npm install --save redux-devtools-extension 命令进行下载 redux-devtools-extension 工具, GitHub 地址为 https://github.com/zalmoxisus/redux-devtools-extension。


在安装完成以后，就可以在 store 的 index.js 文件中进行使用， redux 与 redu

			
		

	





	

		

			

				
					
react devtools安装后vuedevtool打不开了

				
			

			

				

					12-06
				

			

		

		

			
				
当你安装了React DevTools之后，Vue DevTool打不开，这可能是因为两个浏览器插件之间的冲突。解决这个问题的方法如下：

1. 确保你已经安装了最新版本的Vue DevTool和React DevTools。有时候旧版本可能会导致冲突或错误。
   
2. 打开浏览器的开发者工具，并在Extensions或插件管理器中查找Vue DevTool的选项。确保Vue DevTool已启用，并检查是否有任何错误信息。
   
3. 如果仍然无法打开Vue DevTool，尝试禁用React DevTools。在Extensions或插件管理器中找到React DevTools的选项，并禁用它。然后重新启动浏览器并尝试打开Vue DevTools。
   
4. 如果以上步骤都没有解决问题，可能需要卸载并重新安装React DevTools和Vue DevTool。确保在卸载之前已经备份了任何重要的数据和设置。
   
5. 最后，如果问题仍然存在，可以尝试在不同的浏览器或使用不同的开发者工具来打开Vue DevTool。这将帮助排除是否是浏览器或特定插件的问题。

综上所述，通过确保插件的最新版本，启用/禁用插件，卸载/重新安装插件以及使用不同的浏览器或开发者工具，你应该能够解决React DevTools安装后Vue DevTool无法打开的问题。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值