จะทำการล็อกอินใน React Native ได้อย่างไร

ฉันจะบันทึกตัวแปรใน React Native ได้อย่างไรเช่นใช้console.logเมื่อพัฒนาสำหรับเว็บ

console.log โรงงาน

โดยค่าเริ่มต้นบน iOS มันจะบันทึกลงในบานหน้าต่างดีบักภายใน Xcode

จาก IOS จำลองกด ( ⌘+ D) และกดรีโมท JS แก้จุดบกพร่อง นี่จะเป็นการเปิดทรัพยากรhttp: // localhost: 8081 / debugger-uiบน localhost จากนั้นใช้คอนโซลเครื่องมือนักพัฒนาซอฟต์แวร์ Chrome เพื่อดูconsole.log

การใช้งานconsole.log, console.warnฯลฯ

จาก React Native 0.29 คุณสามารถเรียกใช้สิ่งต่อไปนี้เพื่อดูบันทึกในคอนโซล:

$ react-native log-ios
$ react-native log-android

ทำปฏิกิริยาพื้นเมือง 0.29 ล่วงหน้าให้รันสิ่งนี้ในคอนโซล:

adb logcat *:S ReactNative:V ReactNativeJS:V

โพสต์ตอบโต้ Native 0.29, รัน:

react-native log-ios

หรือ

react-native log-android

อย่างที่มาร์ตินกล่าวในอีกคำตอบหนึ่ง

สิ่งนี้แสดง console.log () ข้อผิดพลาดบันทึกย่อและอื่น ๆ ทั้งหมดและทำให้ศูนย์ช้าลง

ใช้ console.debug("text");

คุณจะเห็นบันทึกภายในเทอร์มินัล

ขั้นตอน:

• เรียกใช้แอปพลิเคชัน:

react-native run-ios        # For iOS
react-native run-android    # For Android

• เรียกใช้ตัวบันทึก:

react-native log-ios        # For iOS
react-native log-android    # For Android

Visual Studio Code มีคอนโซลดีบั๊กที่สามารถแสดง console.log ของคุณ

รหัส VS คือบ่อยกว่าไม่ทำปฏิกิริยาพื้นเมืองที่เป็นมิตร

นี่คือที่ซึ่งเครื่องมือนักพัฒนาซอฟต์แวร์ Chromeเป็นเพื่อนของคุณ

ขั้นตอนต่อไปนี้ควรพาคุณไปที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ซึ่งคุณจะสามารถดูconsole.logคำสั่งของคุณได้

ขั้นตอน

1. ติดตั้งGoogle Chromeหากคุณยังไม่ได้ติดตั้ง
2. เรียกใช้แอปโดยใช้react-native run-androidหรือreact-native run-ios
3. เปิดเมนูผู้พัฒนา
   • Mac: ⌘+D สำหรับ iOS หรือ⌘MAndroid iOS
   • Windows / Linux: เขย่าโทรศัพท์ Android
4. เลือก Debug JS Remotely
5. การดำเนินการนี้ควรเรียกใช้ดีบักเกอร์ใน Chrome
6. ใน Chrome: Tools -> More Tools -> Developer Optionsและตรวจสอบว่าคุณอยู่ในconsoleแท็บ

ตอนนี้เมื่อใดก็ตามที่มีconsole.logการดำเนินการคำสั่งควรปรากฏใน Chrome Dev Tools เอกสารอย่างเป็นทางการเป็นที่นี่

มี 3 วิธีที่ฉันใช้เพื่อตรวจแก้จุดบกพร่องเมื่อพัฒนาแอป Native

1. console.log(): แสดงในคอนโซล
2. console.warn(): แสดงในกล่องสีเหลืองด้านล่างของแอปพลิเคชัน
3. alert(): แสดงเป็นพรอมต์เหมือนกับในเว็บ

ฉันชอบที่จะแนะนำให้พวกคุณใช้ React Native Debugger คุณสามารถดาวน์โหลดและติดตั้งโดยใช้คำสั่งนี้

brew update && brew cask install react-native-debugger

หรือ

เพียงตรวจสอบลิงค์ด้านล่าง

https://github.com/jhen0409/react-native-debugger

แฮ็คมีความสุข!

ฉันมีปัญหาเดียวกัน: ข้อความคอนโซลไม่ปรากฏในพื้นที่การดีบักของ XCode ในแอพของฉันฉันทำ cmd-d เพื่อเปิดเมนู debug และจำได้ว่าฉันตั้ง "Debug in Safari" ไว้

ฉันปิดสิ่งนี้และข้อความบางข้อความถูกพิมพ์ไปยังข้อความขาออก แต่ไม่ใช่ข้อความคอนโซล อย่างไรก็ตามหนึ่งในบันทึกข้อความกล่าวว่า:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

นี่เป็นเพราะก่อนหน้านี้ฉันได้รวมโครงการของฉันสำหรับการทดสอบบนอุปกรณ์จริงด้วยคำสั่ง:

react-native bundle --minify

ชุดนี้รวมโดยไม่ต้อง "โหมด dev" หากต้องการอนุญาตข้อความ dev ให้รวมถึงแฟล็ก --dev:

react-native bundle --dev

และข้อความ console.log จะกลับมา! ถ้าคุณไม่ได้ bundling สำหรับอุปกรณ์จริงไม่ลืมที่จะ re-จุดjsCodeLocationในAppDelegate.mการ localhost (ฉันได้!)

กด [command + control + Z] ใน Xcode Simulator เลือก Debug JS จากระยะไกลจากนั้นกด [คำสั่ง + ตัวเลือก + J] เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

เครื่องมือจำลอง Xcode

อ้างอิง：การดีบักตอบโต้แอปเนทีฟ

มันง่ายมากที่จะได้รับบันทึกใน React-Native

ใช้console.logและconsole.warn

console.log('character', parameter)

console.warn('character', parameter)

บันทึกนี้คุณสามารถดูได้ในคอนโซลของเบราว์เซอร์ หากคุณต้องการตรวจสอบบันทึกอุปกรณ์หรือพูดบันทึกการผลิต APK คุณสามารถใช้

adb logcat

adb -d logcat

โมดูลreact-native-xlogที่สามารถช่วยคุณได้คือXlogของ WeChat สำหรับการตอบสนองแบบดั้งเดิม ที่สามารถส่งออกในคอนโซล Xcode และล็อกไฟล์ไฟล์บันทึกผลิตภัณฑ์สามารถช่วยให้คุณดีบัก

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');

การบันทึกเวลาในการพัฒนา

สำหรับเวลาในการพัฒนาเข้าสู่ระบบคุณสามารถใช้console.log () สิ่งสำคัญสิ่งหนึ่งหากคุณต้องการปิดการใช้งานการเข้าสู่ระบบในโหมดการผลิตจากนั้นในไฟล์ Root Js ของแอปเพียงกำหนดฟังก์ชั่นที่ว่างเปล่าเช่นนี้ - console.log = {} มันจะปิดการใช้งานการเผยแพร่บันทึกทั้งหมดตลอดทั้งแอป โหมดเป็น console.log ใช้เวลา

เรียกใช้การบันทึกเวลา

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

สิ่งที่ดีคือ Logentries มีReact Native Moduleเช่นกัน ดังนั้นจะใช้เวลาน้อยลงในการเปิดใช้งานการบันทึกเวลาทำงานด้วยแอพมือถือของคุณ

สิ่งที่เพิ่งออกมาเมื่อประมาณหนึ่งเดือนที่ผ่านมาคือ "สร้างแอป Native React" ซึ่งเป็นสุดยอดไอเท็มที่ช่วยให้คุณ (ด้วยความพยายามน้อยที่สุด) เพื่อแสดงว่าแอปของคุณมีลักษณะอย่างไรบนอุปกรณ์พกพาของคุณ . มันไม่เพียง แต่มีการอัพเดทสด แต่มันจะช่วยให้คุณเห็นบันทึกคอนโซลในเทอร์มินัลของคุณเหมือนกับเมื่อพัฒนาสำหรับเว็บแทนที่จะต้องใช้เบราว์เซอร์เหมือนที่เราเคยทำกับ React Native มาก่อน

แน่นอนว่าคุณต้องสร้างโครงการใหม่ด้วยแผ่นสำเร็จรูปนั่น ... แต่ถ้าคุณต้องการย้ายไฟล์ของคุณไปแสดงว่าไม่น่าจะมีปัญหา ลองยิงดู

แก้ไข: จริงๆแล้วมันไม่จำเป็นต้องมีกล้อง ฉันบอกว่าสำหรับการสแกนรหัส QR แต่คุณสามารถพิมพ์บางอย่างเพื่อซิงค์กับเซิร์ฟเวอร์ของคุณไม่ใช่แค่รหัส QR

มีสองตัวเลือกในการดีบักหรือรับเอาต์พุตของแอ็พพลิเคชันเนทีฟแบบโต้ตอบของคุณเมื่อใช้

จำลองหรืออุปกรณ์จริง

สำหรับการใช้งาน Emulator ครั้งแรก: ใช้

react-native log-android หรือ react-native log-ios

เพื่อรับเอาต์พุตบันทึก

บนอุปกรณ์จริงเขย่าอุปกรณ์ของคุณ

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

ใช้ดีบักเกอร์แบบตอบโต้พื้นเมืองสำหรับการบันทึกและจัดเก็บข้อมูล redux https://github.com/jhen0409/react-native-debugg

เพียงดาวน์โหลดและเรียกใช้เป็นซอฟต์แวร์จากนั้นเปิดใช้งานโหมดดีบั๊กจากเครื่องมือจำลอง

รองรับคุณสมบัติการแก้ไขข้อบกพร่องอื่น ๆ เช่นเดียวกับองค์ประกอบในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ซึ่งช่วยให้เห็นสไตล์ที่จัดเตรียมให้กับองค์ประกอบใด ๆ

การสนับสนุนที่สมบูรณ์แบบล่าสุดสำหรับเครื่องมือ dev redux

1. ใส่console.log("My log text")รหัสของคุณ
2. ไปที่เครื่องมือบรรทัดคำสั่งของคุณ
3. วางตำแหน่งตัวเองในโฟลเดอร์การพัฒนา

ใน Android:

• เขียนคำสั่งนี้: React-native log-android

ใน IOS:

• เขียนคำสั่งนี้: React-native log-ios

คุณสามารถใช้ตัวเลือก debugly ระยะไกล js จากอุปกรณ์ของคุณหรือคุณสามารถใช้log-ios แบบตอบโต้-native -androidและreact-native log-iosสำหรับ ios

console.log () เป็นวิธีที่ง่ายในการดีบักรหัสของคุณ แต่จำเป็นต้องใช้กับฟังก์ชั่นลูกศรหรือผูก () ในขณะที่แสดงสถานะใด ๆ คุณอาจพบว่าลิงค์มีประโยชน์

คุณสามารถทำได้ 2 วิธี

1> โดยใช้การเตือน

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> โดยใช้การแจ้งเตือนสิ่งนี้ไม่ดีในแต่ละครั้งหากได้รับการแจ้งเตือนจากนั้นแต่ละครั้งที่ป๊อปจะเปิดขึ้นดังนั้นหากการวนซ้ำหมายความว่าไม่เหมาะที่จะใช้

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);

ผู้ใช้กับ Windows และ Android Studio:

คุณจะพบมันภายใต้ Logcat ใน Android Studio มีข้อความบันทึกจำนวนมากปรากฏขึ้นที่นี่ดังนั้นคุณอาจสร้างตัวกรองสำหรับ "ReactNativeJS" ได้ง่ายกว่าซึ่งจะแสดงเฉพาะข้อความ console.log ของคุณที่สร้างขึ้นภายในแอปพลิเคชันดั้งเดิมของคุณ

นักพัฒนาซอฟต์แวร์ทุกคนประสบปัญหาในการแก้ไขข้อบกพร่องกับเจ้าของภาษาแม้ว่าฉันจะต้องเผชิญด้วยเช่นกันและฉันก็อ้างถึงสิ่งนี้และวิธีแก้ปัญหาก็เพียงพอแล้วสำหรับฉันในระดับเริ่มต้นซึ่งครอบคลุมวิธีการบางอย่างที่ช่วยให้เราลอง

1. การดีบักด้วย console.log
2. การดีบักรหัส (ตรรกะ) ด้วย Nuclide
3. การแก้จุดบกพร่องรหัส (ตรรกะ) ด้วย Chrome
4. ใช้ Xcode เพื่อดีบัก GUI

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

คุณสามารถใช้ Reactotron ได้มันจะให้ฟังก์ชั่นการใช้งานมากกว่าการบันทึก https://github.com/infinitered/reactotron

มีหลายวิธีในการบรรลุเป้าหมายนี้ฉันจะแสดงรายการพวกเขาและรวมถึงข้อเสียในการใช้พวกเขาด้วย คุณสามารถใช้ได้:

1. console.logและดูคำสั่งการบันทึกบนโดยไม่ต้องยกเลิกตัวเลือกการดีบักแบบรีโมทจากเครื่องมือ dev, Android Studio และ Xcode หรือคุณสามารถเลือกไม่ใช้ตัวเลือกการดีบักแบบรีโมทและดูการบันทึกบนเครื่องมือ Chrome dev หรือ vscode หรือตัวแก้ไขอื่น ๆ ที่สนับสนุนการแก้ไขข้อบกพร่องคุณต้องระมัดระวังเพราะจะทำให้กระบวนการโดยรวมช้าลง
2. คุณสามารถใช้console.warnแต่หน้าจอมือถือของคุณจะเต็มไปด้วยกล่องสีเหลืองแปลก ๆ ซึ่งอาจจะเป็นไปได้หรือไม่เป็นไปตามสถานการณ์ของคุณ
3. วิธีที่มีประสิทธิภาพมากที่สุดที่ฉันมาข้ามคือการใช้เครื่องมือของบุคคลที่สามReactotron เครื่องมือกำหนดค่าที่เรียบง่ายและใช้งานง่ายที่ช่วยให้คุณเห็นคำสั่งการบันทึกข้อมูลแต่ละระดับที่แตกต่างกัน (ข้อผิดพลาดการดีบักคำเตือน ฯลฯ ) มันให้เครื่องมือ GUI ที่แสดงการบันทึกแอพทั้งหมดของคุณโดยไม่ทำให้ประสิทธิภาพช้าลง

คุณใช้สิ่งเดียวกันกับที่ใช้กับเว็บทั่วไป consoleคำสั่งนอกจากนี้ยังทำงานในกรณีนี้ ตัวอย่างเช่นคุณสามารถใช้console.log(), console.warn(), console.clear()ฯลฯ

คุณสามารถใช้นักพัฒนาซอฟต์แวร์ Chrome เพื่อใช้consoleคำสั่งเมื่อคุณเข้าสู่ระบบในขณะที่คุณเรียกใช้แอป React Native

console.log() เป็นวิธีที่ดีที่สุดและง่ายในการดูคอนโซลการเข้าสู่ระบบของคุณเมื่อคุณใช้ดีบักเกอร์ js ระยะไกลจากเมนูนักพัฒนาของคุณ

Chrome Devtool เป็นวิธีที่ดีที่สุดและง่ายที่สุดในการบันทึกและตรวจแก้จุดบกพร่อง

หากคุณใช้งาน osx และใช้โปรแกรมจำลองคุณสามารถดูconsole.logโปรแกรมตรวจสอบเว็บซาฟารีของคุณได้โดยตรง

Safari => Development => Simulator - [เวอร์ชั่นเครื่องมือจำลองของคุณที่นี่] => JSContext

โดยปกติจะมีสองสถานการณ์ที่เราต้องการแก้ไขข้อบกพร่อง

1. เมื่อเราประสบปัญหาเกี่ยวกับข้อมูลและเราต้องการตรวจสอบข้อมูลของเราและแก้ไขข้อบกพร่องที่เกี่ยวข้องกับข้อมูลในกรณีนั้น console.log('data::',data)

   และ debug js จากระยะไกลเป็นตัวเลือกที่ดีที่สุด

2. อีกกรณีหนึ่งคือ UI และปัญหาที่เกี่ยวข้องกับสไตล์ที่เราต้องตรวจสอบการจัดแต่งทรงผมขององค์ประกอบในกรณีนั้นเครื่องมือตอบสนอง -ev-tools เป็นตัวเลือกที่ดีที่สุด

   ทั้งสองวิธีกล่าวถึงที่นี่

console.log สามารถใช้สำหรับโครงการ JS ใด ๆ หากคุณใช้งานแอพใน localhost แน่นอนว่ามันคล้ายกับโครงการจาวาสคริปต์ใด ๆ แต่ในขณะที่ใช้ตัวจำลองหรืออุปกรณ์ใด ๆ ให้เชื่อมต่อตัวจำลองนั้นกับ localhost ของเราและเราจะเห็นในคอนโซล