กำจัดคำเตือน“ Remote debugger อยู่ในแท็บพื้นหลัง” ใน React Native

ฉันได้เริ่มโครงการ React Native ใหม่แล้วและได้รับคำเตือนต่อไปนี้:

ตัวแก้ไขจุดบกพร่องระยะไกลอยู่ในแท็บพื้นหลังซึ่งอาจทำให้แอปทำงานช้า แก้ไขปัญหานี้โดยการวางแท็บไว้ข้างหน้า (หรือเปิดในหน้าต่างแยกต่างหาก)

มันค่อนข้างน่ารำคาญฉันเลยอยากรู้ว่าจะกำจัดมันได้อย่างไร? ฉันใช้งานดีบักเกอร์ใน Chrome และย้ายไปยังหน้าต่างแยกต่างหาก แต่ก็ไม่ได้ช่วยอะไร

หากคุณมีช่องทำเครื่องหมายรักษาลำดับความสำคัญในหน้าต่างดีบักเกอร์ให้ลองเปิดใช้งานก่อนที่คุณจะข้ามไปที่วิธีแก้ไขปัญหาด้านล่าง

หากต้องการกำจัดคำเตือนในโปรเจ็กต์ทั้งหมดของคุณให้เพิ่มสิ่งต่อไปนี้ลงในไฟล์ Javascript ที่อยู่นอกสุดของคุณ(ส่วนใหญ่เป็นเวลาindex.jsสำหรับ React Native)

สำหรับปฏิกิริยาพื้นเมือง v0.63+:

ใช้LogBox: https://reactnative.dev/docs/debugging#logbox

LogBox.ignoreLogs(['Remote debugger']);

สำหรับปฏิกิริยาพื้นเมือง v0.57 - v0.62:

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

อ้างอิงจากเอกสาร React Native อย่างเป็นทางการ:

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

react-native v0.56 หรือต่ำกว่า:

เพิ่มสิ่งต่อไปนี้ก่อนในรหัสของคุณ:

console.ignoredYellowBox = ['Remote debugger'];

ง่ายง่ายและเฉพาะเจาะจงสำหรับข้อผิดพลาดนั้น ใช้ได้ผลสำหรับฉัน สามารถใช้แทนข้อความที่คุณต้องการได้

วิธีนี้ใช้ได้ผลสำหรับฉัน

เปิด / ย้ายhttp: // localhost: 8081 / debugger-ui (เส้นทางเริ่มต้นสำหรับการดีบักระยะไกล) บนหน้าต่างแยก

บางทีอาจช่วยได้ :)

คุณสามารถใช้ React Native Debugger ได้ที่https://github.com/jhen0409/react-native-debuggerซึ่งเป็นแอปแบบสแตนด์อโลนสำหรับการดีบักแอป React Native ระหว่างการพัฒนา

1. ย้ายhttp://localhost:*****/debugger-uiไปที่หน้าต่างแยก
2. Remote JS Debuggingเริ่มต้นใหม่

เป็นเพราะมีการเปิดแท็บจำนวนมากในเบราว์เซอร์ด้วยแท็บ React Native Remote Debugger UIตอบสนองแท็บระยะไกลพื้นเมืองดีบักฉันก็ประสบปัญหาเดียวกัน

ในการเอาชนะข้อความเตือนนี้คุณสามารถใช้วิธีใดวิธีหนึ่งดังต่อไปนี้:

• เปิดแท็บไม่ระบุตัวตนแล้ววางhttp: // localhost: 8081 / ดีบัก-UIบนแถบที่อยู่และกดENTER สุดท้ายโหลดแอป(Command + R)

• ปิดแท็บทั้งหมดในเบราว์เซอร์ ให้เพียง 1 แท็บเปิดแล้วกดhttp: // locahost: 8081 / ดีบัก-UIแล้วโหลดแอป(Command + R)

ดังกล่าวโดย @jakeforaker ในหนึ่งในความคิดเห็น คำเตือนหายไปโดยเพียงแค่เปิดตัวดีบักระยะไกลในหน้าต่างแยกต่างหากแทนที่จะเป็นแท็บในหน้าต่างที่มีอยู่ของเบราว์เซอร์ของคุณ (คุณต้องโหลดโปรแกรมจำลองของคุณซ้ำ)

เนื่องจากคำเตือนกำลังบอกว่าให้เก็บดีบักเกอร์ระยะไกลไว้ในหน้าต่างเดียวกับแท็บอื่น ๆ

อาจทำให้แอปทำงานช้า

ดังนั้นฉันคิดว่าการระงับคำเตือนตามที่ @kjonsson กล่าวไว้: - console.ignoredYellowBox = ['Remote debugger'];ดูเหมือนจะไม่ใช่ทางออกที่ดีที่สุด

ปัญหานี้ได้รับการแก้ไขแล้วเมื่อฉันปิดหน้าต่าง Chrome ที่เปิดอยู่ทั้งหมดและเริ่มการลบดีบักอีกครั้ง ฉันเคยเปิดหน้าต่าง Chrome มาก่อนดังนั้นดูเหมือนว่าการเปิดหน้าต่างเหล่านี้จะทำให้ประสิทธิภาพการทำงานลดลง

เนื่องจากข้อตกลงนี้ในเดือนมีนาคม 2017 คุณสามารถเปิดใช้งานช่องทำเครื่องหมายรักษาลำดับความสำคัญได้ เมื่อเปิดใช้งานแล้วเล่น.wavไฟล์ที่เข้ารหัส base64 แบบเงียบ ๆเพื่อป้องกันไม่ให้แท็บเบราว์เซอร์ของดีบักเกอร์เข้าสู่โหมดพลังงานต่ำซึ่งอาจส่งผลต่อประสิทธิภาพของ websocket วิธีนี้จะป้องกันคำเตือนที่คุณอธิบายได้อย่างมีประสิทธิภาพ

ฉันคิดว่าคำตอบที่ยอมรับนั้นไม่ถูกต้องอีกต่อไป (อย่างน้อยสำหรับ React Native v0.57 +)

รหัสที่ถูกต้องคือ:

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

อ้างอิงจากเอกสาร React Native อย่างเป็นทางการ:

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

ฉันใช้ Macbook ฉันแก้ไขปัญหานี้โดยนำหน้าต่าง Debugger มาไว้บนเดสก์ท็อปหลักแทนที่จะใช้ในเดสก์ท็อปแยกต่างหากซึ่งคิดว่าอยู่ใน "พื้นหลัง"

ฉันมีปัญหาเดียวกันปรากฏขึ้นเมื่อวานนี้ Googling นำไปสู่โพสต์ Stack Overflowนี้ ในคำตอบหนึ่ง (โดย adriansprod) เขาแนะนำ:

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

มีแนวโน้มว่าโปรแกรมแก้ไขข้อบกพร่อง React Native ของคุณไม่ได้อยู่ในหน้าต่างเบราว์เซอร์ Chrome ของตัวเอง แต่อยู่ในแท็บเบราว์เซอร์ Chrome การดึงมันออกมาเป็นหน้าต่างของตัวเองตามที่ adriansprod แนะนำแก้ไขให้ฉัน

ข้อความแสดงข้อผิดพลาด (น่ารำคาญมาก) ได้รับการจัดการโดย debuggerWorker.jsซึ่งน่าเศร้าที่ไม่มีตัวเลือกการกำหนดค่าใด ๆ เพื่อปิดข้อความ ดังนั้นในขณะนี้ไม่มีวิธีใดที่คุณสามารถกำหนดค่าแอปพลิเคชันของคุณเพื่อปิดใช้งานข้อความได้

รหัสที่เกี่ยวข้องระบุไว้ด้านล่าง ( ใช้ใบอนุญาตเดิม ):

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 ด้านบนสำหรับรายละเอียดเพิ่มเติม)

ฉันเคยเผชิญกับปัญหาเดียวกันเมื่อประมาณหนึ่งสัปดาห์ที่แล้วและในที่สุดฉันก็พบวิธีแก้ปัญหาที่ใช้งานได้ดีสำหรับฉัน

เรียกว่า reactotron คุณสามารถค้นหาได้ที่นี่ - https://github.com/reactotron/reactotronและคุณสามารถใช้เพื่อ:
* ดูสถานะแอปพลิเคชันของคุณ
* แสดงคำขอ API และการตอบกลับ
* ทำการวัดประสิทธิภาพอย่างรวดเร็ว
* สมัครสมาชิกบางส่วนของคุณ สถานะแอปพลิเคชัน
* แสดงข้อความคล้ายกับ console.log
* ติดตามข้อผิดพลาดทั่วโลกด้วยสแต็กเทรซที่แมปที่มารวมถึงสแต็กเทรซ saga!
* ส่งการกระทำเช่นการทดลองควบคุมจิตใจที่ดำเนินการโดยรัฐบาล
* hot swap สถานะของแอปของคุณ
* ติดตาม sagas ของคุณ

ฉันหวังว่าโพสต์ของฉันจะเป็นประโยชน์และคุณจะไม่ต้องเผชิญกับคำเตือนที่น่าเบื่อนี้

โชคดี

ฉันใช้สิ่งนี้ใน index.js

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

ฉันได้ย่อขนาดหน้าต่าง " http: // localhost: 8081 / debugger-ui / " เพียงแค่เปิดขึ้นมา (ยกเลิกการย่อขนาด) และการโหลดแอปใหม่จะเป็นการลบคำเตือน

อาจมีโอกาสที่ดีบักเกอร์อื่นเชื่อมต่อกับแพ็กเกจแล้ว ดังนั้นปิดเทอร์มินัลของคุณและดีบักเกอร์ google chrome

หากคุณกำลังใช้ตัวจัดการแพ็คเกจของ Visual Studio อย่าเริ่มตัวจัดการแพ็คเกจด้วยคำสั่งเทอร์มินัล Mac / OS อื่น

ดังนั้นให้ปิดเทอร์มินัลทั้งหมดและหยุดไปที่ตัวจัดการแพ็คเกจและดีบักเกอร์ Google Chrome เริ่มกระบวนการอีกครั้ง