在React Native中删除“远程调试器在后台选项卡中”警告

时间:2016-12-14 15:35:52

标签: react-native

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

  

远程调试器位于后台选项卡中,可能会导致应用程序执行缓慢。通过前景化选项卡(或在单独的窗口中打开它)来解决此问题。

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

17 个答案:

答案 0 :(得分:128)

要删除整个项目中的警告,请将以下内容添加到最外层 Javascript文件中(大部分时间为React Native的index.js

for react-native v0.57+

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

从官方的React Native文档中引用它:

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

反应原生 v0.56 或以下:

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

console.ignoredYellowBox = ['Remote debugger'];

简单,简单且特定于该错误。适合我。可以替换任何你想要的文字。

答案 1 :(得分:29)

这个解决方案对我有用

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

也许这可能会有所帮助:)。

答案 2 :(得分:22)

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

答案 3 :(得分:7)

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

答案 4 :(得分:4)

当我关闭所有打开的Chrome窗口并再次启动“删除调试”时,此问题已得到解决。我之前已经打开了Chrome窗口,因此“看起来”让它们打开会导致性能下降。

答案 5 :(得分:4)

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

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

答案 6 :(得分:3)

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

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

  

可能导致应用缓慢执行

所以我认为只是抑制@kjonsson提到的警告: - git remote add <remote_name> url 似乎不是最佳解决方案。

答案 7 :(得分: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

答案 8 :(得分:0)

对我来说,通过选中维护优先级复选框,警告消失了!

Maintain Priority Checkbox should be checked

答案 9 :(得分:0)

可能有另一个调试器已经连接到打包程序。 因此请关闭您的终端机和调试器Google Chrome。

如果您使用的是Visual Studio的软件包管理器,请不要通过Mac /其他os终端命令启动软件包管理器。

因此请关闭所有终端,并停止使用软件包管理器和Google chrome调试器。 重新开始该过程。

答案 10 :(得分:0)

我已将“ http://localhost:8081/debugger-ui/”窗口最小化。只需将其打开(最小化),然后重新加载该应用程序即可删除警告。

答案 11 :(得分:0)

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

enter image description here

答案 12 :(得分:0)

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

答案 13 :(得分:0)

我在index.js

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

答案 14 :(得分:0)

一周前我也遇到过同样的问题,最后我找到了对我来说非常好的解决方案

它叫反应电子管,你可以在这里找到它 - https://github.com/reactotron/reactotron你可以用它来表示:
*查看您的申请状态
*显示API请求&amp;响应
*执行快速性能基准测试 *订阅您的申请状态的部分
*显示类似于console.log的消息 *跟踪包含传奇堆栈跟踪的源映射堆栈跟踪的全局错误! *派遣行动,如政府运行的心理控制实验 *热交换你的应用程序的状态
*追踪你的传奇

我希望我的帖子很有用,你永远不会面对这个乏味的警告。

祝你好运

答案 15 :(得分:0)

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

相关代码概述如下(original licence适用):

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).'
    );
  };
})();

如您所见,没有使用任何配置选项,整个事情都在本地确定(请参阅上面的repo链接以获取更多详细信息)。

答案 16 :(得分:0)

昨天我遇到了同样的问题。谷歌搜索它导致了Stack Overflow post。在其中一个回复中(adriansprod),他建议:

#include <stdio.h> struct date { // struct time { ... } time; or // struct { ... } time; // struct time struct { int sec; int min; int hrs; } time; // Name the member of date. int day; int month; int year; }; int main(void) { struct date d,*dp=NULL; dp=&d; dp->time.sec = 10; // Access the sec member d.time.min = 20; // Accces the min member. }

您的React Native调试器可能不在其自己的Chrome浏览器窗口中,而是在Chrome浏览器标签中。正如adriansprod建议的那样,把它拉出来作为自己的窗口,为我解决了这个问题。