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

最新推荐文章于 2023-09-22 14:24:53 发布
最新推荐文章于 2023-09-22 14:24:53 发布
阅读量279 收藏
点赞数
文章标签： 如何在浏览器中预览
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_32280593/article/details/112580112
版权

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

条件

  • 浏览器安装了 React Developer Tools

步骤

以知乎为例

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

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

7ce20db21ef05933984636b949588248.png
  • 浏览器会跳到 Sources Tab 中，点击左下角 Pretty print。

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

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

36de77b2c0e1d8d616c72f1f505919fe.png
https://github.com/LiuuY/Blog/issues/15​github.com
miss废柴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react 渲染道具_如何在浏览器中查看您的React状态和道具
cumi6497的博客
08-07 920
react 渲染道具by Andrew Bales 通过安德鲁·巴尔斯 如何在浏览器中查看您的React状态和道具 (How to see your React state & props in the browser) If you’re building a web app with React, you may want to see the state or props of ...
react 配置development uat production 环境
etemal_bright的博客
04-22 3528
首先可以参考一下官方文档 添加自定义环境变量， 怎么创建环境 接下来进入正文 1，创建 .env, .env.test, .env.production文件 # 默认测试环境 .env REACT_APP_ENV=development # 预发布环境 .env.test REACT_APP_ENV=prepare # 线上环境 .env.production REACT_APP_ENV=p...
react-reactlog在你的浏览器console中使用React
08-14
react-log: 在你的浏览器console中使用React
React获取DOM和获取组件实例的方式
m0_71485750的博客
10-03 1万+
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref，后面我们也会学习 hooks 中如何使用ref;该函数会在DOM被挂载时进行回调，这个函数回调时会传入一个元素对象，我们可以自己保存;方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上;使用时，直接拿到之前保存的元素对象即可;
浏览器的ctrl+f的搜索功能
qq_38143787的博客
05-24 1443
<vxe-column field="name" title="菜单名称" tree-node show-overflow="title"> <template #default="{ row }"> <div class="ellipsis"> &nbsp; <i :class="'iconfont ' + row.icon"></i>
react 生产环境，测试环境配置
wandoumm的博客
12-14 603
/config.ts文件。
react-convert-image:在浏览器中转换图像格式
03-21
React转换图像 React组件，用于图像格式转换。当前转换为WebP。取决于浏览器功能。 安装 npm install react-convert-image 用法 import React from "react" ; import ConvertImage from "react-convert-image" ; ...
在Web浏览器中React组件预览Markdown文本。 复制GitHub Markdown样式的最少CSS。-React开发
05-27
在Web浏览器中React组件预览Markdown文本。 复制GitHub Markdown样式的最少CSS。 React Markdown预览React组件在Web浏览器中预览Markdown文本。 复制GitHub Markdown样式的最少CSS。 当前文档网站是使用此react组件...
基本React：在浏览器中使用组件，道具和打印Hello World
02-11
打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。npm run build 构建生产到应用程序...
在浏览器中操作React + Emotion样式的Devtool-JavaScript开发
05-26
一个React开发工具，用于在浏览器中实时更新Emotion样式。 当样式看起来不错时，只需单击一下即可将其写入源文件。 操纵性React开发工具，用于在浏览器中实时更新情绪样式。 当样式看起来不错时，只需单击一下即可将...
react配置生产者和开发者
qq_60403325的博客
09-16 259
生产者也就是在远程电脑上的所有东西 开发者是在本地的开发 配置axios.js import axios from "axios"; axios.defaults.baseURL = process.env.REACT_APP_URL; //请求的拦截 axios.interceptors.request.use(config => { // 在发送请求之前做些什么 if (window.localStorage.getItem("token")) { con
React生产模式构建：优化你的应用的生产版本
最新发布
m0_61607678的博客
09-22 213
在React应用程序的开发过程中，我们通常会在开发环境中进行调试和测试。然而，将应用部署到生产环境时，我们需要确保它运行在最佳性能下。本文将介绍如何使用React的生产模式构建你的应用程序，以减小应用的体积、提高性能，并去除开发环境中的调试工具和警告。
React环境搭建及基础开发
ylnzzl的博客
08-12 858
目录 简介 React 引入JSX 运行JSX React 工具链 Create React App Next.js Gatsby 其它 概念 Hello World实例 JSX的使用 元素渲染 组件 & Props State & 生命周期 事件处理 条件渲染 列表 & Key 表单 状态提升 组合 vs 继承 简介 React React是一个用于构建用户界面的javaScript库，适用于用 JavaScript 构建快速响应的大
React 生产模式 Best Practice
GoldenaArcher的博客
05-10 589
React 生产模式 Best Practice 一些用于生产环境的 Best Practice 禁用 React Dev Tool 有两种解决方法。 JS 版本： // disable react-dev-tools for this project if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") { for (let [key, value] of Object.entries( window.__REACT_DE
react 消除知乎div
阿豪
10-31 137
原文链接: react 消除知乎div 上一篇: ...
class react 获取_React 如何获取组件的实例？
weixin_39663360的博客
12-30 1136
首先我不清楚你的这种需求是怎么产生的。多个组件调用A组件的某个方法fn，这种完全可以根据组件通信去解决，不建议使用这种“黑科技”如果只是学术上的问题如何拿到组件的实例那么很简单，react提供了一种方法就是this.refs api比如//this.refs.div这个api已经废弃了，现在的写法是这样的//this.div现在就是div的引用了this.div=ref}/>...
最简单的安装React Devtools调试工具
热门推荐
一个慢的博客
07-04 5万+
在运行一个react项目的时候浏览器控制台会提醒你去安装react devtools调试工具 Download the React DevTools for a better development experience: https://fb.me/react-devtools 但是上面的链接我基本上没打开过 记录下我安装React Devtools调试工具的步骤： 1、去git上下载r...
Chrome插件安装 之 安装React-devtools
倚树探星的博客
04-28 1764
转自：https://blog.csdn.net/weixin_42670455/article/details/101779788 1.下载 1.1 在GitHub上找到项目 GitHub地址：https://github.com/facebook/react-devtools 查看说明： 1.2 执行命令： （1）克隆项目: git clone https://github.com/f...
React调试工具：React Devtools
Dragon.G
10-04 3万+
React Devtools是React官方提供的类似于浏览器调试台的插件。通过在浏览器中安装这个插件，可以查看组件的层次、各个组件的Props、States等信息。并且它的使用方式也很简单。 （图片取自网上！）下载：https://github.com/facebook/react-devtools/releases注意： 如果是Chrome浏览器就下载.crx后缀的文件。如果是FirFox浏览
怎么在浏览器中运行react-native项目
05-25
要在浏览器中运行 React Native 项目，需要使用 React Native Web。这是一个使 React Native 应用程序可以在 Web 上运行的库。 以下是在浏览器中运行 React Native 项目的步骤： 1. 在项目中安装 react-native-web： ``` npm install react-native-web ``` 2. 修改项目中的入口文件，将其从 index.js 改为 index.web.js，然后从 react-native 和 react-native-web 中导入 AppRegistry 和组件。 3. 创建一个名为 index.html 的新文件，并将以下内容添加到其中： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My React Native App</title> </head> <body> <div id="root"></div> <script src="./index.web.js"></script> </body> </html> ``` 这将创建一个包含一个 id 为 root 的 div 元素的 HTML 文件，并将 index.web.js 作为脚本包含在内。 4. 在项目根目录中创建一个名为 webpack.config.js 的新文件，并将以下内容添加到其中： ``` const path = require('path'); const webpack = require('webpack'); module.exports = { entry: './index.web.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], }, ], }, plugins: [ new webpack.DefinePlugin({ __DEV__: JSON.stringify(true), }), ], }; ``` 这将创建一个名为 bundle.js 的文件，其中包含打包后的 React Native 代码。 5. 安装 webpack 和 webpack-dev-server： ``` npm install webpack webpack-dev-server --save-dev ``` 6. 在 package.json 文件中添加以下内容： ``` "scripts": { "start": "webpack-dev-server --hot --open", "build": "webpack" } ``` 这将允许您使用 npm start 命令启动开发服务器，并使用 npm run build 命令构建项目。 7. 运行项目： ``` npm start ``` 运行此命令后，浏览器将自动打开，并在其中显示 React Native 应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值