react-devtools：默认情况下，DevTools 监听 localhost 上的 8097 端口。如何定制？

Posted 2023-03-12

【中文标题】react-devtools：默认情况下，DevTools 监听 localhost 上的 8097 端口。如何定制？

【英文标题】：react-devtools: By default DevTools listen to port 8097 on localhost. How to customise?

【发布时间】：2017-08-21 19:54:21

【问题描述】：

我正在尝试安装独立的 react-devtools，它默认侦听端口 8097。我的应用使用端口 3001。文档说明如下：

"默认情况下，DevTools 侦听 localhost 上的 8097 端口。 如果您需要自定义主机、端口或其他设置，请参阅 react-devtools-core 包。”

如何更改端口以改为监听 3001？

来源：https://github.com/facebook/react-devtools/tree/master/packages/react-devtools

【参考方案1】：

文档建议查看react-devtools-core：

require('react-devtools-core').connectToDevTools(options)

这类似于另一个包中的require('react-devtools')，但 提供更多控制。不像require('react-devtools')，它没有 立即连接，但导出一个函数。

在与 React 相同的上下文中运行 connectToDevTools() 以设置一个 连接到 DevTools。确保它在任何 react 之前运行， react-dom 或 react-native 导入。

选项对象可能包含：

主机（字符串），默认为'localhost'。 端口（编号），默认为8097。 resolveRNStyle（函数），RN和null默认使用。

【讨论】：

谦虚，字面意思。

对于 React Native 我应该把它放在哪里？我试过把index.js和App.js放在根目录下，然后运行npx react-devtools，它根本没有改变。文档没有多大帮助，GitHub 上没有关于它的问题，它强调我没有例子。

【参考方案2】：

您还可以将您的模拟器或设备端口更改为 8097。为我工作。

例如：adb -s <device-name> reverse tcp:8097 tcp:8097

如何找到设备名称：运行adb devices

【讨论】：

如何更改设备端口？您显示的命令仅用于端口转发。