如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...

在 Production Mode 下,React 并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。

条件

步骤

知乎为例

  • 打开浏览器 Console,输入 __REACT_DEVTOOLS_GLOBAL_HOOK__,这是 React Developer Tools 暴露的全局变量。

image

  • __REACT_DEVTOOLS_GLOBAL_HOOK__ 的对象中包含了一个 renderers,找到其中其中的 findFiberByHostInstance 方法,右键,然后选择 Show function definition

image

  • 浏览器会跳到 Sources Tab 中,点击左下角 Pretty print。

image

  • findFiberByHostInstance 对应的文件就是 ReactDOM 所在的文件,然后在这个文件中搜索(ctrl + f) createElement 方法,这就是 React 本身包含的方法。在搜索结果中找到类似如下的位置,加断点。

image

  • 刷新浏览器,在浏览器断点暂停后,对应的例如上面的 a.a 就是 React 实例了,可以在 Console 中打印看看。如果没有断点暂停,说明代码并没有运行到,可以更换createElement 方法出现的位置加断点。

image

Image placeholder
马真名
未设置
  35人点赞

没有讨论,发表一下自己的看法吧

推荐文章
在浏览器中使用Vue.js裁剪图像

在本教程中,我们将探讨如何在浏览器中使用JavaScript库来操作图片,为服务器上的存储做准备,并在Web程序中使用。我们将使用Vue.js而不是原生JavaScript来完成此操作。要了本文想要完

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

gMIS吉密斯十年执念:Lower Costs较低成本Better Productivity较高效率

Hello2020!元旦快乐!今起揭开21世纪20年代的篇章.1.gMIS吉密斯十周年2010-2020,十年转眼已成历史,gMIS吉密斯——通用管理信息系统(generalManagementInf

jquery如何判断是否是ie浏览器?

jquery如何判断是否是ie浏览器?在写页面的时候,会遇到浏览器兼容问题,在这个浏览器中可以使用,但在其他浏览器中却不能很好的显示。以下就是判断浏览器的方法,从而更好的区分代码,使得页面正常浏览。f

css3支持哪些浏览器?

CSS3带来众多全新的设计体验,但有一个问题值得考虑:浏览器对CSS3特性的兼容情况如何?因为页面最终离不开用浏览器来渲染,并不是所有浏览器都完全支持CSS3的特性。有时花时间写的效果只能在特定的浏览

css不同浏览器兼容性问题怎么解决?

css不同浏览器兼容性问题的解决方案1.浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把ma

浏览器字体大小怎么调?

浏览器调整字体大小的方法1、打开浏览器2、打开浏览器菜单,点击设置3、切换到界面设置4、选择自定义字体大小5、更改字体字号,在右边可以看到字体的变化6、重启浏览器,更改即可生效

IE浏览器页面显示不全怎么办?

快速修复浏览器方案(鉴于系统环境不同→请活学活用以下方法→根据具体情况决定做哪些)1、打开浏览器,点“工具”→“管理加载项”那里禁用所有可疑插件,或者你能准确知道没问题的保留。然后→工具→INTERN

浏览器控制台打不开怎么办

浏览器控制台打不开怎么办浏览器控制台打不开可能是网页禁用了f12按键和右键网页的功能,解决方法是使用浏览器的功能按钮打开。不同浏览器略有不同,但基本都能在菜单中找到。1、chrome打开方式:点击右上

jquery不兼容低版本ie浏览器怎么办?

jquery不兼容低版本ie浏览器怎么办?1、可以使用原生JS或者低版本的Jquery1.x版本。因为Jquery从2.x版本开始已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。如果需要

jquery判断浏览器的内核

jquery判断浏览器的内核判断浏览器内核可以使用$.browser属性。$.browser属性在jQuery1.9已经被移除。用于返回用户当前使用的浏览器的相关信息。不建议使用该属性来检测浏览器,因

jquery禁用浏览器后退按钮

使用Jquery禁用浏览器的back和next按钮:有时为了防止用户乱了访问顺序,不得不禁掉浏览器的前进后退按钮jQuery(document).ready(function(){ if(window

安防摄像头网页无插件直播流媒体服务器EasyNVR在IE浏览器下的 pointer-events- none前端兼容性调试

背景说明由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋。传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCXWeb插件进行直播。对于安防监控

深度解析微信域名经常被封的防封方案与已被封域名强制浏览器打开的防封短链接实现!

很多做H5(QP、BC、CP)的朋友都会经常遇到域名被微信秒封的情况。导致推广出去的二维码和链接用户打不开,这样会错失很多流量。这个问题一直让很多朋友头疼,因为微信推广的效率确实很理想,用户量的裂变也

qq浏览器不支持css3怎么办?

qq浏览器不支持css3怎么办?css3属性,比如keyframe和animation都需要加webkit、ms前缀,针对手机不同浏览器可能还要加更多前缀。以此达到适配所以浏览器的目的。解决qq浏览器

node_modules是什么文件夹?

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。npminstall执行完毕后,我们可以在node_modules中

Spring-SpringAOP原理,手写Spring事务框架

一、Spring核心知识Spring是一个开源框架,Spring是于2003年兴起的一个轻量级的Java开发框架,由RodJohnson在其著作ExpertOne-On-OneJ2EEDevelopm

如何在cmd中下载react模板

如何在cmd中下载react模板打开cmd命令行窗口,输入npm-version,查看当前的npm版本如果npm版本是5.2以上版本,在cmd中输入npxcreate-react-appmy-app,

如何在idea中下载react

如何在idea中下载react1、首先安装Terminal插件File—>Settings—>Plugins搜索Terminal,打上勾,重启idea2、按下alt+f12打开Terminal工具3、

如何在react加css样式?

react加css的3种方法:1.行内样式直接给对应的DOM元素添加style属性,遵循react的规则,写在{}当中。ThisisPage1!2.声明样式render(){   letmystyle

在终止AWS EC2实例的时候如何保留根卷

在aws控制台创建EC2的时候,我们在添加存储步骤中,如果使用默认配置的情况下,“终止时删除”配置默认是被选中的,就是说在这个实例被终止的时候,所挂载的这个EBS卷也同时会被删除;这样带来的影响就是我

IBM Spectrum Protect 8.1.7在AIX7.1上的安装和配置

                                                本文作者: 谷铁柏摘要:    本文章主要讲述IBMSpectrumProtect8.1.7版本在AIX

Java如何在没有throws签名的函数中手动抛出异常

如果想在方法中抛出异常,像下面这样直接throw是不行的。publicvoidtest(){ thrownewException(); }这时编译器会给我们一个错误:Error:(101,13)jav

SpringBoot 整合 Dubbo

1.整合dubbo 有的人或许会说已经有spring-cloud了,你整合dubbo干什么,其实没啥意图,主要就是想整合一下,毕竟dubbo在国内使用的还是很多的,你会一点点总不至于让你显得那么尴尬。

02.4. struct 类型

struct Go语言中,也和C或者其他语言一样,我们可以声明新的类型,作为其它类型的属性或字段的容器。例如,我们可以创建一个自定义类型person代表一个人的实体。这个实体拥有属性:姓名和年龄。这样