问题标签 [react-devtools]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

164 问题

0 投票

2 回答

5381 浏览

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

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

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

我该如何去改变端口来监听 3001 呢？

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

2017-03-28T16:12:24.397

0 投票

1 回答

3965 浏览

reactjs - 如何在 React Developer Tools 中搜索具有特定键的组件？

我目前正在使用 React Developer Tools chrome 扩展来调试基于 React Virtualized 的组件。

正如您在屏幕截图中看到的那样，我能够突出显示所有单元格，但我无法弄清楚如何才能仅找到具有特定键值的单元格。搜索输入似乎支持正则表达式。

reactjs react-devtools

2017-06-28T11:23:25.543

0 投票

1 回答

534 浏览

webpack - 如何将 React 开发者工具添加到 Electron Webpack 构建中

与此类似，尽管它仅显示如何在一个实例中下载开发人员工具。我想在每次启动应用程序时加载它development。我正在使用 webpack。

我收到manifest.json未打开的错误。

和

webpack electron react-devtools

2017-07-12T16:53:17.803

0 投票

0 回答

705 浏览

android - 如何让 React 开发人员工具与 Genymotion 一起使用

说明可以在这里找到，或者 React Native 的官方网站。我期待得到这样的东西，如官方网站所示：

而现实是：

我运行命令将 devtool 本地安装到我的项目中：
npm install --save-dev react-devtools

在 package.json 中的“scripts”节点中添加一行：
"react-devtools": "react-devtools"

所以，它看起来像：

然后我启动 Genymotion 模拟器，运行一个 cmd 窗口react-native start，运行另一个 cmd 窗口npm run react-devtools，这将打开独立工具：

我有第三个 cmd 窗口正在运行react-native run-android。这将在 Chrome 中打开一个调试选项卡。但是，开发人员工具中没有任何反应。
我在 Chrome 的 devtool 中找不到 $r：

我认为这可能是因为模拟器与打包服务器对话，它是localhost:8081. 但是，如果我将该设置更改为: 192.168.1.2:8097，如开发人员工具中所述：

我什至无法在模拟器中运行该应用程序，它总是像屏幕截图所示那样停止：

有没有人设法在 Windows 上运行它？任何帮助表示赞赏，谢谢。

android react-native windows-7-x64 genymotion react-devtools

2017-07-14T01:23:02.647

0 投票

0 回答

248 浏览

reactjs - 如何在反应开发工具中查看所有组件的层次结构？

问这个问题是因为在 react 开发工具中手动逐个检查它们有点困难（例如，在查看示例代码时，打开 App 组件并手动向下遍历有点麻烦）。如果我能看到项目中所有组件的简单层次结构，那将会很有帮助。

reactjs react-devtools

2017-07-23T04:19:29.723

0 投票

1 回答

1000 浏览

reactjs - 当浏览器加载正常但手机没有时如何调试reactjs

我想知道是否有一些关于如何追踪我的 react.js 应用程序未加载原因的提示。

在 Chrome 中确定
物理 iPhone 6 - 好的
在 iPhone 模拟器 6s 中 - 不行
旧 iPad2 - 不行

我已经npm install -g react-devtools添加<script src="http://192.168.0.21:8097"></script>到我的 index.html 中。

脚本似乎正在加载，但我只看到Waiting for roots to load...

我在最近几次提交中破坏了我的构建，作为最后的手段，我可以检查所有更改的原因。但是，我更愿意看看“真正的错误”是什么。

有关如何调试的任何建议或提示？

reactjs react-devtools

2017-07-24T17:05:25.190

0 投票

0 回答

410 浏览

reactjs - 为什么 React 开发工具中会出现两个提供程序

在 React Dev Tools 中，我看到了两个提供者：

据我所知，在设置代码时我没有做任何奇怪的事情：

该工具是否可能存在错误，或者我是否犯了常见错误？

reactjs react-devtools

2017-08-28T19:22:49.327

0 投票

1 回答

635 浏览

javascript - “React 开发者工具”之类的扩展是如何工作的？

我正在尝试构建一个 chrome 开发工具，它可以帮助开发人员调试他们的代码（前端的 JavaScript 代码）。但是由于大多数开发人员使用 webpack 之类的工具将他们的 javascript 代码构建到一个大文件中，并且浏览器获取的代码看起来不像他们在开发时编写的那样，我想知道是否有办法访问他们编写的代码。这是像 react-devtools 这样的工具如何检测 React 应用程序并基于该代码提供外部内容的方式吗？如果是，怎么会？

javascript google-chrome-extension google-chrome-devtools react-devtools

2017-09-25T14:18:05.297

0 投票

1 回答

416 浏览