0Pricing
React Academy · บทเรียน

การติดตั้งและเปิด React DevTools

ตั้งค่า React DevTools ใน Chrome/Firefox และใช้งานแผง Components

การติดตั้งและเปิด React DevTools เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ยินดีต้อนรับ

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

React DevTools คืออะไร

React DevTools คือส่วนขยายเบราว์เซอร์ที่เพิ่มแผงใหม่สองแผงให้กับ DevTools ของ Chrome/Firefox ได้แก่ **คอมโพเนนต์** (ใช้ตรวจสอบโครงสร้างต้นไม้) และ **ตัววิเคราะห์ประสิทธิภาพ** (ใช้วัดประสิทธิภาพ) ส่วนขยายนี้ทำงานกับแอป React ใดก็ได้ในโหมดพัฒนา

การติดตั้งส่วนขยาย

ไปที่ Chrome Web Store (หรือ Firefox Add-ons) แล้วค้นหา **React Developer Tools** คลิก **เพิ่มใน Chrome** (หรือ Firefox) ไอคอน React ในแถบเครื่องมือจะสว่างขึ้นบนหน้าที่ใช้ React

การเปิด DevTools

กด **F12** (หรือ Cmd+Option+I บน Mac) เพื่อเปิด DevTools ของเบราว์เซอร์ คุณจะเห็นแท็บใหม่ที่มีชื่อว่า **คอมโพเนนต์** และ **ตัววิเคราะห์ประสิทธิภาพ** อยู่ถัดจากแท็บองค์ประกอบและคอนโซล

แผงคอมโพเนนต์

แท็บคอมโพเนนต์จะแสดงโครงสร้างต้นไม้คอมโพเนนต์ React ทั้งหมดของหน้าปัจจุบัน คุณสามารถคลิกคอมโพเนนต์ใดก็ได้เพื่อตรวจสอบพร็อพ สถานะ ฮุก และไฟล์ต้นฉบับที่ใช้ render คอมโพเนนต์นั้น

การใช้งานโครงสร้างต้นไม้

ใช้ช่องค้นหาที่ด้านบนของแผงคอมโพเนนต์เพื่อกรองตามชื่อคอมโพเนนต์ คลิกคอมโพเนนต์ในโครงสร้างต้นไม้เพื่อดูรายละเอียดทางด้านขวา ใช้ลูกศรเพื่อขยายหรือยุบคอมโพเนนต์ลูก

การตรวจสอบพร็อพแบบเรียลไทม์

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

การตรวจสอบสถานะและฮุก

ใต้พร็อพ คุณจะเห็นฮุก เช่น สถานะ เอฟเฟกต์ เมโม และรีฟ การขยายสถานะจะแสดงค่าปัจจุบันของการเรียกใช้ useState ทุกครั้งในคอมโพเนนต์นั้น

ข้อกำหนดของโหมดพัฒนา

React DevTools จะแสดงชื่อคอมโพเนนต์เฉพาะเมื่อแอปทำงานใน **โหมดพัฒนา** เท่านั้น ในบิลด์สำหรับใช้งานจริง React จะตัดชื่อคอมโพเนนต์ออกเพื่อให้ชุดรวมไฟล์มีขนาดเล็กลง ดังนั้นให้แก้ไขข้อบกพร่องในเครื่องเสมอด้วย npm start หรือ npm run dev

เน้นการอัปเดต

เปิดใช้ **เน้นการอัปเดตเมื่อคอมโพเนนต์ render** ในการตั้งค่า DevTools (ไอคอนรูปเฟือง) คอมโพเนนต์ที่ render ซ้ำจะกะพริบด้วยการซ้อนทับสี ทำให้เห็นการ render ที่ไม่จำเป็นได้ทันที

ตรวจสอบความเข้าใจ

ส่วนขยาย React DevTools เพิ่มแท็บใดสองแท็บให้กับเครื่องมือนักพัฒนาเว็บเบราว์เซอร์

ทบทวน

คุณได้ติดตั้ง React DevTools และสำรวจแผงคอมโพเนนต์แล้ว ตอนนี้คุณสามารถตรวจสอบโครงสร้างต้นไม้คอมโพเนนต์ อ่านพร็อพและสถานะแบบเรียลไทม์ แก้ไขค่าทันที และเน้นการ render ซ้ำได้ทั้งหมดโดยไม่ต้องแตะต้องซอร์สโค้ด

บทถัดไป

บทเรียนถัดไป: **การตรวจสอบโครงสร้างต้นไม้ของคอมโพเนนต์และพร็อพ** — คุณจะเจาะลึกลงไปในลำดับชั้นที่ซ้อนกัน และเรียนรู้การอ่านโครงสร้างพร็อพและสถานะที่ซับซ้อนในแถบด้านข้างของ DevTools

คำถามที่พบบ่อย

บทเรียน “การติดตั้งและเปิด React DevTools” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การติดตั้งและเปิด React DevTools” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การติดตั้งและเปิด React DevTools”

ตั้งค่า React DevTools ใน Chrome/Firefox และใช้งานแผง Components คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การติดตั้งและเปิด React DevTools” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การติดตั้งและเปิด React DevTools
  2. การตรวจสอบโครงสร้างคอมโพเนนต์และพร็อพส์
  3. การใช้แท็บ Profiler
  4. การแก้ไขข้อผิดพลาด React ที่พบบ่อย
← กลับไปที่ React Academy