Loại bỏ cảnh báo "Trình gỡ lỗi từ xa nằm trong tab nền" trong React Native

Tôi đã bắt đầu một dự án React Native mới và tôi tiếp tục nhận được cảnh báo sau:

Trình gỡ lỗi từ xa nằm trong tab nền có thể khiến ứng dụng hoạt động chậm. Khắc phục điều này bằng cách làm nền trước tab (hoặc mở nó trong một cửa sổ riêng).

Nó hơi khó chịu vì vậy tôi muốn biết làm thế nào tôi có thể thoát khỏi nó? Tôi đang chạy trình gỡ lỗi trong Chrome và tôi đã chuyển nó sang một cửa sổ riêng biệt nhưng không giúp được gì.

Để loại bỏ cảnh báo trong toàn bộ dự án của bạn, hãy thêm phần sau vào tệp Javascript ngoài cùng của bạn (hầu hết thời gian là index.jsdành cho React Native)

cho react-native v0.57+:

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

Tham khảo điều này từ các tài liệu React Native chính thức:

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

react-native v0.56 hoặc bên dưới:

Thêm những điều sau vào mã của bạn sớm:

console.ignoredYellowBox = ['Remote debugger'];

Dễ dàng, đơn giản và cụ thể cho lỗi đó. Làm việc cho tôi. Có thể thay thế cho bất kỳ văn bản nào bạn muốn.

giải pháp này phù hợp với tôi

mở / di chuyển http: // localhost: 8081 / debugger-ui (đường dẫn mặc định để gỡ lỗi từ xa) trên cửa sổ riêng

có lẽ điều đó có thể giúp :)

Bạn có thể sử dụng React Native Debugger có sẵn tại https://github.com/jhen0409/react-native-debugger Đây là một ứng dụng độc lập để gỡ lỗi các ứng dụng React Native trong quá trình phát triển.

1. Di chuyển http://localhost:*****/debugger-uitrên cửa sổ riêng biệt.
2. Khởi động lại Remote JS Debugging.

Đó là do số lượng tab được mở trong trình duyệt với tab Giao diện người dùng của React Native Remote Debugger . Tôi cũng phải đối mặt với vấn đề tương tự.

Để khắc phục thông báo cảnh báo này, bạn có thể sử dụng bất kỳ phương pháp nào trong số các phương pháp sau:

• Mở tab ẩn danh, sau đó dán http: // localhost: 8081 / debugger-ui trên thanh địa chỉ và nhấn ENTER . Cuối cùng tải lại ứng dụng (Command + R) .

• Đóng tất cả các tab trong trình duyệt. Chỉ giữ lại 1 tab đã mở rồi nhấn http: // locahost: 8081 / debugger-ui rồi tải lại ứng dụng (Command + R) .

Như đã được đề cập bởi @jakeforaker trong một trong các nhận xét. Cảnh báo đã biến mất bằng cách chỉ cần mở trình gỡ lỗi từ xa trong một cửa sổ riêng biệt thay vì một tab trong cửa sổ hiện có của trình duyệt (bạn phải tải lại trình mô phỏng của mình).

Như cảnh báo đang nói rằng giữ trình gỡ lỗi từ xa trong cùng một cửa sổ với các tab khác

có thể khiến ứng dụng hoạt động chậm

Vì vậy, tôi nghĩ đơn giản là loại bỏ cảnh báo như được đề cập bởi @kjonsson: - console.ignoredYellowBox = ['Remote debugger'];dường như không phải là giải pháp tốt nhất.

Sự cố này đã được giải quyết khi tôi đóng tất cả các cửa sổ Chrome đang mở và bắt đầu lại Xóa gỡ lỗi. Trước đây tôi đã mở các cửa sổ Chrome, vì vậy có vẻ như việc mở chúng sẽ giết chết hiệu suất.

Kể từ cam kết này vào tháng 3 năm 2017, bạn có thể bật hộp kiểm Duy trì mức độ ưu tiên . Khi được bật, nó sẽ âm thầm phát.wav tệp được mã hóa base64 để ngăn tab trình duyệt của trình gỡ lỗi chuyển sang chế độ năng lượng thấp, có thể ảnh hưởng đến hiệu suất websocket. Điều này sẽ ngăn chặn hiệu quả cảnh báo mà bạn mô tả.

Tôi nghĩ rằng câu trả lời được chấp nhận không còn chính xác nữa (ít nhất là đối với React Native v0.57 +).

Mã chính xác bây giờ là:

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

Tham khảo điều này từ các tài liệu React Native chính thức:

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

Tôi đang sử dụng Macbook. Tôi đã khắc phục sự cố này bằng cách đưa cửa sổ Trình gỡ lỗi trên màn hình chính, thay vì đặt nó trên màn hình riêng biệt mà nó cho là trong "Nền".

Tôi đã có cùng một vấn đề bật lên ngày hôm qua. Googling nó đã dẫn đến bài đăng Stack Overflow này . Trong một trong những phản hồi (của adrianprod), anh ấy đã gợi ý:

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

Có khả năng trình gỡ lỗi React Native của bạn không nằm trong cửa sổ trình duyệt Chrome của chính nó mà nằm trong tab trình duyệt Chrome. Kéo nó ra làm cửa sổ riêng, như adrianprod đề xuất, đã sửa lỗi này cho tôi.

Thông báo lỗi (rất khó chịu) được xử lý debuggerWorker.js, điều đáng buồn là không bao gồm bất kỳ tùy chọn cấu hình nào để tắt thông báo. Vì vậy, hiện tại không có cách nào bạn có thể định cấu hình ứng dụng của mình để tắt thông báo.

Mã liên quan được nêu bên dưới ( áp dụng giấy phép gốc ):

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

Như bạn thấy, không có tùy chọn cấu hình nào được sử dụng, toàn bộ điều này được thực hiện cục bộ (xem liên kết repo ở trên để biết thêm chi tiết).

Tôi cũng đã phải đối mặt với vấn đề tương tự cách đây khoảng một tuần và cuối cùng tôi đã tìm ra giải pháp phù hợp nhất với mình

Nó được gọi là reactotron, bạn có thể tìm thấy nó ở đây - https://github.com/reactotron/reactotron và bạn có thể sử dụng nó để:
* xem trạng thái ứng dụng của bạn
* hiển thị các yêu cầu và phản hồi API
* thực hiện các điểm chuẩn hiệu suất nhanh
* đăng ký các phần của trạng thái ứng dụng
* hiển thị thông báo tương tự như console.log
* theo dõi lỗi toàn cầu với dấu vết ngăn xếp được ánh xạ nguồn bao gồm dấu vết ngăn xếp saga!
* thực hiện các hành động như một thử nghiệm kiểm soát tâm trí do chính phủ điều hành
* hoán đổi nóng trạng thái ứng dụng của bạn
* theo dõi sagas của bạn

Tôi hy vọng bài viết của tôi hữu ích và bạn sẽ không bao giờ phải đối mặt với cảnh báo tẻ nhạt này.

Chúc may mắn

Tôi sử dụng cái này trong index.js

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

Tôi đã thu nhỏ cửa sổ " http: // localhost: 8081 / debugger-ui / ". Chỉ cần mở nó lên (bỏ thu nhỏ) và tải lại ứng dụng đã xóa cảnh báo.

có thể có khả năng một trình gỡ lỗi khác đã được kết nối với packager. vì vậy hãy đóng thiết bị đầu cuối và trình gỡ lỗi google chrome của bạn.

nếu bạn đang sử dụng trình quản lý gói của visual studio thì đừng khởi động trình quản lý gói bằng Mac / lệnh đầu cuối hệ điều hành khác.

vì vậy hãy đóng tất cả thiết bị đầu cuối và ngừng tiếp tục trình quản lý gói và trình gỡ lỗi google chrome. bắt đầu lại quá trình.