สำหรับบทความนี้เราจะมาดูการDebug ของReact Native กัน
สำหรับการDebug ของReact Native ตามคู่มือแล้ว จะแนะนำ การDebug ผ่าน Chrome DevTools extension แต่สำหรับผู้เขียนแล้วในบทความนี้จะแนะนำการDebug ผ่านสอง Tools เพื่อให้เลือกใช้ได้ตามความถนัด
React Developer Tools
สำหรับ React Developer Tools เป็นโครงการ open-sourceของ facebook ซึ่งทำมาเพื่อช่วยให้ RN Debug ได้ง่ายขึ้น
Install
เริ่มต้นลง Chrome DevTools extension
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Use
หลังจากนั้น Run App ขึ้นมา ผ่าน emulator หรือผ่าน Device เมื่อApp เปิดมาเสร็จแล้ว ให้เปิด In-App Developer Menu
โดยสามารถเปิดได้ผ่าน Shake Gesture
MacOS
Command⌘ + D สำหรับ iOS
Command⌘ + Mสำหรับ Android
Windows
Ctrl⌘ + M
เมื่อเปิด In-App Developer Menu ขึ้นมา จะประกอบไปด้วย
- Reload ไว้สำหรับ reload หน้าเพื่อRun Codeใหม่
- Debug JS Remotely ไว้สำหรับเปิด Debug Mode
- Enable Live Reload เมื่อเปิดส่วนนี้จะทำให้เมื่อมีการแก้ Code จะทำการ reload หน้าจอให้อัตโนมัติ
- Start Systrace คือการเปิดการทำ Profiling เพื่อไว้ดูว่าแต่ส่วนใช้ระยะเวลาทำงานเท่าไหร่
- Enable Hot Reloading ส่วนนี้จะคล้ายๆ Enable Live Reload แตกต่างกันตรงที่จะทำการเปลี่ยนแปลงเฉพาะจุดที่แก้
- Show Inspector เปิดการเปิด Inspector คล้ายกับ Inspector ใน Google Chrome
- Show Perf Monitor เป็นการเปิด Monitor ดู Ram ดีการทำงานอื่นๆ
ตรงนี้ให้เลือก Debug JS Remotely หลังจากนั้นจะมีการเปิดหน้า Chromeให้ หลังจากนั้นให้เปิด Dev Tools แล้วไปที่ Tab Sources
หลังจากนั้นเลือก debuggerWorker.js>http://localhost:8081/>กล่องProject>หน้าไฟล์ที่ต้องการ Debug
หลังจากเปิดไฟล์แล้ว ถ้าต้องการDebug ส่วนไหนให้ไปใส่ BreakPoints ที่บรรทัดนั้น โดยคลิกที่เลขบรรทัดนั้น
หลักจากนั้นเมื่อใช้งานApp จนมาถึงส่วนที่BreakPoints ไว้มันจะหยุดไว้ที่บรรทัดนี้
โดยสามารถควบคุมการทำงาน ผ่านเครื่องมือมุมด้านขาวมือ
โดยสามารถ Resume, Step over,Step Into,Step out ได้
Visual Studio Code Debug
สำหรับการ Debug อีกแบบนึงที่ผู้เขียนอยากแนะนำคือ การDebug ผ่าน VSCode
Install&Config
โดยหลังจากเปิด VSCode มาแล้ว ให้ Install extension ชื่อ React Native Tools
หลังจากนั้น เข้าสู่ส่วน Debug
ต่อมาให้เลือกที่ฟันเฟืองด้านบน
ต่อมาเลือก React Native
หลังจากนั้น ให้เลือก Debug Android หรือ iOS ตามที่ต้องการ
Use
กลับมาที่Code ในส่วนที่ต้องการทำ BreakPoints เมื่อถึงบรรทัดที่ต้องการให้หยุด ให้ทำการใส่ BreakPoints โดยการคลิกหน้าเลขบรรทัด จะแสดงวงกลมสีแดงหน้าบรรทัดนั้น
ต่อมากลับไปที่ส่วน Debug แล้วทำการ กดที่ เครื่องหมาย Play สีเขียว
หลังจากกดแล้วให้รอการทำงานสักครู่
เมื่อทำงานเสร็จแล้วจะขึ้นเครื่องมือสำหรับ Debug มาให้
เมื่อทำการใช้งานApp ถึงจุด BreakPoints จะแสดงดังภาพ
โดยสามารถใช้ Resume, Step over,Step Into,Step out,Reload,Stop ได้
แล้วซ้ายบนจะแสดง Variables ณ ขนาดนั้น