วิธีการหนึ่งที่จะแก้ปัญหารหัสปฏิกิริยาของพวกเขากับชนพื้นเมืองในขณะที่แอปทำงานในแอพจำลอง?

Cmd+Dจากภายในเครื่องจำลอง มันจะป๊อปอัป Chrome และจากนั้นคุณสามารถใช้เครื่องมือสำหรับนักพัฒนา

แก้ไข:

นี้มีการเชื่อมโยงในขณะนี้ในความช่วยเหลือเอกสาร

การแก้จุดบกพร่องตอบโต้แอป Native

ในการดีบักรหัส javascript ของแอป react ของคุณให้ทำดังนี้:

1. เรียกใช้แอปพลิเคชันของคุณในเครื่องจำลอง iOS
2. กดCommand + Dและหน้าเว็บควรจะเปิดขึ้นที่http: // localhost: 8081 / ดีบัก-UI (Chrome เท่านั้นสำหรับตอนนี้) หรือใช้Shake Gesture
3. เปิดใช้งานPause On Caught Exceptionsเพื่อประสบการณ์การดีบักที่ดีขึ้น
4. กดCommand + Option + Iเพื่อเปิดเครื่องมือสำหรับนักพัฒนา Chrome หรือเปิดทางView-> ->DeveloperDeveloper Tools
5. ตอนนี้คุณควรสามารถดีบักได้ตามปกติ

ไม่จำเป็น

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

โหลดสดใหม่

ในการเปิดใช้งาน Live Reload ให้ทำดังนี้

1. เรียกใช้แอปพลิเคชันของคุณในเครื่องจำลอง iOS
2. Control + Command + Zกด
3. ตอนนี้คุณจะเห็นEnable/Disable Live Reload, ReloadและEnable/Disable Debuggingตัวเลือก

สำหรับแอพ Android ถ้าคุณใช้ Genymotion คุณสามารถสลับเมนูโดยกดCMD + mแต่คุณอาจต้องเปิดใช้งานในเมนูโดยทำสิ่งนี้

• เลิกเลือกวิดเจ็ต
• เปิดใช้งานได้โดยCMD + mคลิกที่debug ใน chrome

นอกจากคำตอบอื่น ๆ คุณสามารถดีบัก react-native โดยใช้คำสั่ง debugger

ตัวอย่าง:

debugger; //breaks execution

เครื่องมือ Chrome dev ของคุณต้องเปิดให้ใช้งานได้

หากคุณต้องการแก้ปัญหาโดยใช้อุปกรณ์ Android บน Windows เพียงแค่เปิดพร้อมท์คำสั่งจากนั้นพิมพ์ (ตรวจสอบว่า adb ของคุณทำงานอย่างถูกต้อง)

adb shell input keyevent 82

มันจะแจ้งให้หน้าจอเหมือนภาพ

จากนั้นเลือก

debug JS Remotely

มันจะเปิดหน้าต่างใหม่โดยอัตโนมัติจากนั้นเปิดองค์ประกอบตรวจสอบหรือกด F12 สำหรับคอนโซล

ลองใช้โปรแกรมนี้: https://github.com/jhen0409/react-native-debugger

ทำงานบน: windows, และosxlinux

รองรับ: react nativeและredux

คุณยังสามารถตรวจสอบโครงสร้างส่วนประกอบเสมือนและปรับเปลี่ยนสไตล์ที่สะท้อนในแอพ

cmd ⌘+ Dแปลกไม่ได้สำหรับฉัน การกดctrl+ cmd ⌘+ Zในเครื่องมือจำลอง iOS ทำให้การปิดหน้าต่างเบราว์เซอร์การดีบักสำหรับฉัน

นี่คือหน้าจอที่ปรากฏขึ้น:

รายละเอียดเพิ่มเติมที่นี่

การดีบักการตอบสนองแบบเนทีฟ 0.40.0 บน Debian 8 (Jessie) สามารถทำได้โดยไปที่http: // localhost: 8081 / debugger-uiใน Chromium หรือ Firebug ขณะที่แอปของคุณทำงานในเครื่องจำลองแอนดรอยด์ หากต้องการเข้าถึงเมนูผู้พัฒนาในแอปให้รันคำสั่งต่อไปนี้ในหน้าต่างเทอร์มินัลอื่นตามที่กล่าวไว้ที่นี่ :

adb shell input keyevent 82

ฉันไม่มีชื่อเสียงพอที่จะแสดงความคิดเห็นกับคำตอบก่อนหน้าซึ่งยอดเยี่ยม :) ต่อไปนี้เป็นวิธีที่ฉันจะแก้ไขข้อบกพร่องเมื่อพัฒนาแอปแบบโต้ตอบตามพื้นเมือง

1. โหลดสดใหม่

   react-native ทำให้การดูการเปลี่ยนแปลงของคุณเป็นเรื่องง่ายด้วยปุ่ม⌘ + R หรือแม้กระทั่งเปิดใช้งานการรีโหลดแบบสดและยามจะ "รีเฟรช" ตัวจำลองพร้อมการเปลี่ยนแปลงล่าสุด หากคุณได้รับข้อผิดพลาดคุณสามารถรับเบาะแสจากหมายเลขบรรทัดจากหน้าจอสีแดงนั้น การเลิกทำสองสามครั้งจะทำให้คุณกลับสู่สถานะการทำงานและเริ่มต้นใหม่อีกครั้ง

2. console.log('yeah, seriously.')

   ฉันพบว่าตัวเองต้องการให้โปรแกรมทำงานและบันทึกข้อมูลมากกว่าการเพิ่มdebuggerจุดพัก (โปรแกรมดีบั๊กเกอร์มีประโยชน์เมื่อพยายามทำงานกับแพ็คเกจ / ไลบรารีภายนอกและมันมาพร้อมกับการเติมข้อความอัตโนมัติเพื่อให้คุณรู้วิธีการอื่นที่คุณสามารถใช้ประโยชน์ได้)

3. Enable Chrome Debuggingด้วยdebugger;จุดพักในโปรแกรมของคุณ

ขึ้นอยู่กับประเภทของข้อผิดพลาดที่คุณพบและการตั้งค่าของคุณในการแก้ปัญหา สำหรับวิธีส่วนใหญ่undefined is not an object (evaluating 'something.something')วิธีที่ 1 และ 2 จะดีพอสำหรับฉัน

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

บางครั้งมันมาจากแพลตฟอร์มของเจ้าของภาษาเองดังนั้น googling สำหรับปัญหาที่เกิดจากเจ้าของภาษาจะช่วยได้อย่างแน่นอน

หวังว่านี่จะช่วยให้ใครบางคนที่นั่น

แทนCmd+M, สำหรับ Android Emulator Press F10ใน Windows อีมูเลเตอร์เริ่มต้นเพื่อแสดงตัวเลือกการดีบักแบบตอบโต้พื้นเมืองทั้งหมด

adb logcat *:S ReactNative:V ReactNativeJS:V

เรียกใช้สิ่งนี้ใน terminal สำหรับบันทึก Android

หากคุณใช้ Microsoft Visual Code ให้ติดตั้งส่วนขยาย React Native Tools จากนั้นคุณสามารถเพิ่มจุดพักได้ง่ายๆเพียงคลิกที่หมายเลขบรรทัดที่ต้องการ ทำตามขั้นตอนเหล่านี้เพื่อตั้งค่าและตรวจแก้จุดบกพร่องแอพ:

อย่าลืมที่จะเปิดใช้งาน Debug JS จากระยะไกลในโปรแกรมจำลองหากคุณใช้งาน

สำหรับ Android: Ctrl + M (อีมูเลเตอร์) หรือเขย่าโทรศัพท์ (ในอุปกรณ์) เพื่อแสดงเมนู

สำหรับ iOS: Cmd + D หรือเขย่าโทรศัพท์เพื่อเปิดเผยเมนู

ตรวจสอบให้แน่ใจว่าคุณมีโครเมียม

บนเมนูที่เปิดเผยให้เลือก Debug JS Remote ทางเลือก

Chrome จะเปิดโดยอัตโนมัติที่ localhost: 8081 / debugger-ui คุณสามารถไปที่ดีบักเกอร์ด้วยตนเองด้วยลิงก์นี้

เปิดเผยคอนโซลและคุณสามารถดูบันทึกที่ถูกบันทึกไว้

ให้ฉันวิธีที่ดีที่สุดในการแก้ปัญหาเกี่ยวกับการตอบสนองพื้นเมืองคือการใช้"Reactotron"

ติดตั้ง Reactotron แล้วเพิ่มสิ่งเหล่านี้ใน package.json ของคุณ:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

ตอนนี้มันเป็นเพียงเรื่องของการเข้าสู่ระบบรหัสของคุณ เช่น:console.tron.log('debug')

1. เรียกใช้แอปของคุณในตัวจำลอง - ทำปฏิกิริยาพื้นเมือง run-ios
2. กด ctrl + d แล้วคลิกที่ Debug JS จากระยะไกล

1. หน้าเว็บควรเปิดขึ้นที่http: // localhost: 8081 / debugger-uiหากไม่พิมพ์ URL และไปที่ลิงค์นี้ใน Chrome
2. คลิกขวาที่หน้าและคลิกตรวจสอบและควรเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำหรับโครเมี่ยม

3. ไปที่แหล่งข้อมูลในเมนูด้านบนและค้นหาไฟล์คลาส js ของคุณใน explorer ไฟล์ด้านขวามือ

4. คุณสามารถวางเบรกพอยต์ไปที่มุมมองและตรวจแก้จุดบกพร่องรหัสในที่นั่นตามที่คุณเห็นในภาพ

ตามค่าเริ่มต้นเครื่องมือจำลอง iOS ของฉันไม่ได้รับการกดแป้นซึ่งเป็นสาเหตุที่ cmd-D ไม่ทำงาน ฉันต้องเปิดการตั้งค่าสำหรับแป้นพิมพ์โดยใช้เมนูของเครื่องมือจำลอง:

ฮาร์ดแวร์> คีย์บอร์ด> เชื่อมต่อคีย์บอร์ด

ตอนนี้ cmd-D เรียกใช้การแก้ไขข้อบกพร่องของ Chrome

สำหรับหุ่นยนต์ app .Press Ctrl + M เลือก js แก้ปัญหาระยะไกลก็จะเปิดหน้าต่างใหม่ในโครเมี่ยมที่มี URL http: // localhost: 8081 / ดีบัก-UI ตอนนี้คุณสามารถดีบักแอปในเบราว์เซอร์ chrome

มีพื้นที่ในเส้นทางของไฟล์ที่จะป้องกันไม่ให้Cmd + Dจากการทำงาน ฉันย้ายโปรเจ็กต์ของฉันไปยังสถานที่ที่ไม่มีที่ว่างและในที่สุดฉันก็ได้รับโปรแกรมดีบั๊กของ Chrome มาทำงาน ดูเหมือนว่าข้อผิดพลาด

หากคุณต้องการเปิดใช้งานการดีบักโดยค่าเริ่มต้น:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

ในการทำให้ Android นี้ทำงานได้:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

การอ้างอิง: เปิดแอป React Native ด้วยการเปิดใช้งาน“ Debug JS Remotely” เป็นค่าเริ่มต้น

ง่ายมากเพียงแค่สองคำสั่ง

For IOS $ react-native log-ios
For Android $ react-native log-android

สมมติว่าคุณต้องการแสดงเมนูนี้บนอุปกรณ์จำลอง Android

• จากนั้นลอง⌘+mเปิดกล่องโต้ตอบการตั้งค่า dev นี้บนตัวเลียนแบบ Android บน Mac

• AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input boxถ้ามันไม่ได้แสดงให้เห็นแล้วไปที่

• ⌘+mและจากนั้นลองใหม่อีกครั้ง

• หากยังไม่ปรากฏขึ้นให้ไปที่การตั้งค่าตัวจำลองการทำงานและในSend keyboard shortcuts toคอมโบบ็อกซ์ / ดรอปดาวน์จากนั้นเลือกEmulator controls (default)ตัวเลือก

• ⌘+mและจากนั้นลองใหม่อีกครั้ง

• ฉันหวังว่านี่จะช่วยได้

หากคุณใช้ Redux ฉันขอแนะนำ React Native Debugger มันรวมถึง Chrome devtools แต่ยังมี Redux devtools และ React devtools

Redux Devtools : สิ่งนี้ช่วยให้คุณสามารถดูการกระทำของคุณและก้าวข้ามไปมาได้ นอกจากนี้ยังช่วยให้คุณดูที่เก็บ redux ของคุณและมีคุณสมบัติในการกระจายสถานะก่อนหน้าโดยอัตโนมัติด้วยสถานะที่อัปเดตสำหรับแต่ละการกระทำดังนั้นคุณจะเห็นว่าในขณะที่คุณก้าวไปมาผ่านชุดของการกระทำ

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

Chrome Devtoolsช่วยให้คุณเห็นผลลัพธ์คอนโซลทั้งหมดของคุณใช้เบรกพอยต์หยุดพักการดีบักเกอร์ คุณสมบัติการดีบักมาตรฐาน หากคุณคลิกขวาที่พื้นที่ที่การกระทำของคุณอยู่ใน Redux Devtools และเลือก 'อนุญาตการตรวจสอบเครือข่าย' คุณจะสามารถตรวจสอบการโทร API ของคุณได้ในแท็บเครือข่ายของ Chrome Devtools

สรุปได้ว่าสิ่งเหล่านี้ทั้งหมดในที่เดียวนั้นยอดเยี่ยมมาก! หากคุณไม่ต้องการหนึ่งในนั้นคุณสามารถสลับเปิด / ปิดได้ รับ Native Debugger และสนุกกับชีวิต

นี่คือวิธีอื่นในการใช้แอปพลิเคชันเนทีฟแบบดีบั๊ก

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

ตอบสนองพื้นเมือง-ดีบัก

เช่นกันวันนี้คุณสามารถใช้ลิงก์ด้านล่างเพื่อช่วยคุณได้

โครเมี่ยมสำหรับนักพัฒนาเครื่องมือ

1. หากคุณกำลังใช้โปรแกรมจำลองการทำงานให้ใช้Ctrl+ MและโปรแกรมจำลองCmd +D

2. คลิกที่ - Debug js จากระยะไกล

3. Google Chrome ไปที่คอนโซล

นอกจากนี้ยังมีชื่อดีบักที่ดีมาก Reactotron https://github.com/infinitered/reactotron

คุณไม่จำเป็นต้องอยู่ในโหมดแก้ไขข้อบกพร่องเพื่อดูค่าข้อมูลบางอย่างและมีตัวเลือกมากมาย

ไปดูที่มีประโยชน์จริง ๆ ;)

ในการแก้จุดบกพร่อง React-Native ง่ายกว่ามาก

• เพื่อดีบักใน IOS ใช้

cmd + d

ctrl + cmd + z (สำหรับโปรแกรมจำลอง)

• เพื่อดีบักใน Android

เขย่าอุปกรณ์ด้วยการสัมผัส(ตรวจสอบให้แน่ใจว่าตัวเลือกนักพัฒนาของคุณเปิดใช้งานอยู่)

ขั้นตอนที่ 1: สถานที่debuggerที่คุณเคยต้องการที่จะหยุดสคริปต์เช่น:

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

สิ่งนี้จะหยุดการดีบักเกอร์ชั่วคราวเมื่อมีการควบคุมมาที่บล็อกของรหัสนี้

ขั้นตอนที่ 2: กดCmd+Dบนจำลอง iOSและCmd+Mบนจำลอง Android หากคุณมีอุปกรณ์จริงให้เขย่าอุปกรณ์เพื่อเปิดเมนู dev หากคุณไม่ต้องการเขย่าอุปกรณ์ติดตามบล็อกนี้

ขั้นตอนที่ 3: เลือกตัวเลือกEnable Remote JS Debuggingนี้จะเปิด Chrome

ขั้นตอนที่ 4: เลือกDeveloper Tools.

ขั้นตอนที่ 5: ดีบักเกอร์ของคุณจะหยุดในSourcesแท็บทุกที่ที่คุณเขียนไว้debuggerในรหัสของคุณ ไปที่คอนโซลและพิมพ์พารามิเตอร์ใด ๆ ที่คุณต้องการตรวจแก้จุดบกพร่อง (ที่มีอยู่ในบล็อกรหัส) เช่น: หากต้องการย้ายไปยังจุดดีบักเกอร์ถัดไปอีกครั้งให้ย้ายไปยังแหล่งที่มา -> คลิกที่ปุ่มดำเนินการสคริปต์ต่อ

วางดีบักเกอร์ทุกที่ที่คุณต้องการหยุดสคริปต์ชั่วคราว

เพลิดเพลินกับการแก้ไขข้อบกพร่อง !!

คุณสามารถใช้ Safari เพื่อดีบักแอปเวอร์ชัน iOS ของคุณโดยไม่ต้องเปิดใช้งาน "Debug JS Remotely" เพียงทำตามขั้นตอนต่อไปนี้:

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger

อันดับแรกในเครื่องมือจำลอง iOS ของคุณหากคุณกดปุ่ม [command + D] คุณจะเห็นหน้าจอนี้

จากนั้นคลิกปุ่มดีบัก JS จากระยะไกล

หลังจากที่คุณอาจเห็นหน้าโต้ตอบพื้นเมืองดีบักเกอร์เช่นนี้

จากนั้นเปิดตัวตรวจสอบของคุณ [f12] และไปที่แท็บคอนโซลตรวจแก้จุดบกพร่อง! :)

ทำปฏิกิริยาพื้นเมือง 0.62 ปล่อยตัว - ทางการทางออกคือ Flipper 🚀

Flipperเป็นเครื่องมือในการดีบัก Android และ iOS Mobile โดยไม่ต้องใช้โหมดแก้ไขข้อบกพร่องในการตอบสนองพื้นเมือง

ตั้งแต่ RN 0.62 (ดูลิงค์นี้) ฟลิปเปอร์จะเริ่มต้นด้วยโครงการเริ่มต้น

Flipper มีปลั๊กอินจำนวนหนึ่งสำหรับการดีบัก ปลั๊กอินรวมLayout,Network ,Shared preferences

ประโยชน์ที่ดีที่สุดของ Flipper นั้นไม่ใช่ปลั๊กอินจำนวนมาก แต่คุณสามารถเห็นการดีบักคอนโซลอุปกรณ์ Android / iOS ได้อย่างง่ายดาย

Flipper แจ้งเตือนคุณเกี่ยวกับความผิดพลาดหรือการปฏิเสธเครือข่ายด้วย

ปลั๊กอินเค้าโครงประกอบด้วยโหมดการช่วยการเข้าถึงและโหมดเป้าหมาย

นอกจากนี้คุณยังสามารถดูคำขอ / การตอบกลับของเครือข่ายในแอปพลิเคชันของคุณ