在React Native中摆脱“远程调试器在后台选项卡中的警告”

问题描述 投票:80回答:15

我已经开始了一个新的React Native项目,并且不断收到以下警告:

远程调试器在后台选项卡中,可能会导致应用运行缓慢。通过突出显示选项卡(或在单独的窗口中打开)来解决此问题。

这有点烦人,所以我想知道如何摆脱它?我在Chrome中运行调试器,将其移至单独的窗口,但没有帮助。

react-native
15个回答
138
投票

要摆脱整个项目中的警告,请将以下内容添加到您的outermost Javascript文件中(大多数时间是React Native的index.js

for react-nativev0.57+

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);

参考官方的React Native文档:

https://facebook.github.io/react-native/docs/debugging.html

react-nativev0.56或以下:

在代码中尽早添加以下内容:

console.ignoredYellowBox = ['Remote debugger'];

简单,简单且特定于该错误。为我工作。可以替代您想要的任何文本。


0
投票

昨天我弹出了同样的问题。谷歌搜索导致此Stack Overflow post。在其中一项回应中(由adriansprod提出),他建议:

Chrome debugger in it's own window fixes. But annoying problem

您的React Native调试器可能不在其自己的Chrome浏览器窗口中,而是在Chrome浏览器标签中。正如adriansprod建议的那样,将其作为自己的窗口拉出,为我修复了此问题。


0
投票

(非常烦人的)错误消息由debuggerWorker.js处理,可悲的是它不包含任何配置选项来关闭该消息。因此,暂时没有办法配置您的应用程序以禁用该消息。

下面概述了相关代码(debuggerWorker.js适用::

original licence

如您所见,没有使用任何配置选项,整个事情都局限在本地范围内(有关更多详细信息,请参见上面的repo链接)。


0
投票

大约一周前,我也遇到了同样的问题,最后我找到了对我有效的解决方案

它称为Reactotron,您可以在这里找到它-var visibilityState; var showVisibilityWarning = (function() { var hasWarned = false; return function() { // Wait until `YellowBox` gets initialized before displaying the warning. if (hasWarned || console.warn.toString().includes('[native code]')) { return; } hasWarned = true; console.warn( 'Remote debugger is in a background tab which may cause apps to ' + 'perform slowly. Fix this by foregrounding the tab (or opening it in ' + 'a separate window).' ); }; })(); ,并且可以将其用于:*查看您的申请状态*显示API请求和响应*执行快速的性能基准测试*订阅部分申请状态*显示类似于console.log的消息*使用源映射堆栈跟踪(包括传奇堆栈跟踪)跟踪全局错误!*派遣行动,例如政府经营的精神控制实验*热插拔应用程序的状态*追踪您的Sagas

希望我的帖子对您​​有所帮助,并且您永远不会面对这个乏味的警告。

祝你好运


0
投票

0
投票

我在Macbook上。我通过将调试器窗口放在主桌面上而不是在它认为位于“背景”中的单独桌面上来解决此问题。

if (__DEV__) { console.ignoredYellowBox = [ 'Remote debugger', 'Warning: isMounted… is deprecated', 'Module RCTImageLoader' ]; }


0
投票

我已将“ enter image description here”窗口最小化。只需将其打开(最小化),然后重新加载该应用程序即可删除警告。


34
投票

此解决方案对我有用

打开/移动http://localhost:8081/debugger-ui(远程调试的默认路径),位于单独的窗口

也许可以帮助您:)


22
投票

您可以使用位于https://github.com/jhen0409/react-native-debugger的React Native Debugger,它是用于在开发过程中调试React Native应用程序的独立应用程序。


7
投票
  1. 在单独的窗口上移动http://localhost:*****/debugger-ui
  2. 重新启动Remote JS Debugging

4
投票

当我关闭所有打开的Chrome窗口并再次启动“删除调试”时,此问题已解决。我以前曾打开过Chrome浏览器窗口,因此“似乎”打开它们会降低性能。


4
投票

这是因为使用React Native Remote Debugger UI选项卡在浏览器中打开了许多选项卡。我也面临同样的问题。

要克服此警告消息,您可以使用以下任意一种方法:


3
投票

正如@jakeforaker在评论之一中提到的。只需在单独的窗口中打开远程调试器,而不是在浏览器现有窗口中的选项卡中打开警告,即可消除警告(不过您必须重新加载模拟器)。

正如警告所言,将远程调试器与其他选项卡放在同一窗口中

可能会导致应用运行缓慢

所以我认为只是像@kjonsson所提到的那样抑制警告:-console.ignoredYellowBox = ['Remote debugger'];似乎不是最佳解决方案。


2
投票

我认为接受的答案不再准确(至少对于React Native v0.57 +来说是这样。

现在正确的代码是:

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);

参考官方的React Native文档:

https://facebook.github.io/react-native/docs/debugging.html


2
投票

自2017年3月this commit起,您可以启用保持优先级复选框。启用后,它静默地播放base64编码的.wav文件,以防止调试器的浏览器选项卡进入低功耗模式,这会影响websocket的性能。这将有效防止您描述的警告。

© www.soinside.com 2019 - 2024. All rights reserved.