เครื่องมือสำหรับนักพัฒนา: การเปิดและใช้งาน DevTools
เปิด Chrome DevTools ตรวจสอบองค์ประกอบ อ่านคอนโซล ดูคำขอเครือข่าย และแก้ไข CSS แบบสดในเบราว์เซอร์
เครื่องมือสำหรับนักพัฒนา: การเปิดและใช้งาน DevTools เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
DevTools ของเบราว์เซอร์คืออะไร
เบราว์เซอร์สมัยใหม่ทุกตัวมาพร้อมชุดเครื่องมือสำหรับนักพัฒนาที่มีอยู่ในตัว DevTools ช่วยให้คุณตรวจสอบ HTML และ CSS แก้ไขข้อบกพร่องของ JavaScript วิเคราะห์ประสิทธิภาพ ตรวจสอบคำขอเครือข่าย และทำสิ่งอื่น ๆ ได้อีกมากมาย โดยไม่ต้องออกจากเบราว์เซอร์
การเปิด DevTools
เปิด DevTools ด้วย F12 (Windows/Linux) หรือ Cmd+Option+I (Mac) นอกจากนี้คุณยังคลิกขวาที่องค์ประกอบใดก็ได้แล้วเลือกตรวจสอบได้ ทางลัด Ctrl+Shift+J / Cmd+Option+J จะเปิดไปยังคอนโซลโดยตรง
แผงองค์ประกอบ
แผงองค์ประกอบจะแสดงต้นไม้ DOM แบบสด คลิกองค์ประกอบใดก็ได้เพื่อเลือกและดูรูปแบบที่คำนวณแล้วในบานหน้าต่างรูปแบบ คุณสามารถดับเบิลคลิกเพื่อแก้ไขค่า HTML หรือ CSS ได้แบบเรียลไทม์ การเปลี่ยนแปลงจะมีผลทันที แต่จะไม่ถูกบันทึกลงในไฟล์ของคุณ
การแก้ไข CSS แบบสด
ในบานหน้าต่างรูปแบบ ให้คลิกค่าของคุณสมบัติใดก็ได้เพื่อเปลี่ยนค่า เพิ่มกฎใหม่ด้วยปุ่ม + และใช้ช่องทำเครื่องหมายสลับเพื่อปิดใช้กฎ วิธีนี้เป็นวิธีที่เร็วที่สุดในการสร้างต้นแบบ CSS โดยไม่ต้องสลับไปยังเครื่องมือแก้ไขของคุณ
แผงคอนโซล
คอนโซลจะแสดงข้อความที่บันทึก คำเตือน และข้อผิดพลาด คุณยังสามารถพิมพ์ JavaScript โดยตรงแล้วเรียกใช้ได้ ใช้ console.log(), console.warn(), console.error() และ console.table() เพื่อแสดงข้อมูลระหว่างการแก้ไขข้อบกพร่อง
// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');แผงเครือข่าย
แผงเครือข่ายจะแสดงคำขอ HTTP ทุกคำขอที่หน้าเว็บส่งออกไป เลือกคำขอเพื่อดูส่วนหัว แสดงตัวอย่างเนื้อหาการตอบกลับ และตรวจสอบแผนภาพลำดับเวลาของคำขอ คุณสามารถกรองตามประเภทได้ ได้แก่ XHR/Fetch, JS, CSS, รูปภาพ และแบบอักษร
การอ่านเวลาของคำขอ
คำขอแต่ละรายการจะแสดงข้อมูลต่อไปนี้: เข้าคิว, ค้นหา DNS, การเชื่อมต่อเริ่มต้น, SSL, ส่งคำขอแล้ว, กำลังรอ (TTFB) และ ดาวน์โหลดเนื้อหา TTFB (เวลาจนถึงไบต์แรก) สะท้อนเวลาตอบกลับของเซิร์ฟเวอร์
การจำกัดความเร็วเครือข่าย
ใช้รายการแบบเลื่อนลงสำหรับจำกัดความเร็วในแผงเครือข่าย เพื่อจำลองเงื่อนไข 3G ที่ช้าหรือการออฟไลน์ วิธีนี้ช่วยเผยปัญหาด้านประสิทธิภาพที่มองไม่เห็นเมื่อใช้บรอดแบนด์ความเร็วสูง และช่วยให้คุณสร้างประสบการณ์ที่ใช้งานได้สำหรับผู้ใช้ที่มีการเชื่อมต่อไม่ดี
โหมดอุปกรณ์
คลิกไอคอนอุปกรณ์ (Ctrl+Shift+M / Cmd+Shift+M) เพื่อเข้าสู่โหมดอุปกรณ์ คุณสามารถจำลองพื้นที่แสดงผลบนมือถือ เหตุการณ์สัมผัส DPR และเงื่อนไขเครือข่ายได้ เลือกจากค่าที่ตั้งไว้ล่วงหน้า เช่น iPhone 14 หรือตั้งความกว้างแบบกำหนดเอง
แผงแหล่งที่มา
แผงแหล่งที่มาช่วยให้คุณอ่านและกำหนดจุดหยุดในไฟล์ JavaScript ได้ จุดหยุดจะหยุดการทำงานชั่วคราว ทำให้คุณตรวจสอบค่าตัวแปร สแต็กการเรียก และไล่ดูโค้ดทีละบรรทัดด้วย F10 (ข้ามไปยังคำสั่งถัดไป) และ F11 (เข้าสู่ฟังก์ชัน)
จุดหยุดการทำงานและเครื่องมือแก้จุดบกพร่อง
เพิ่มจุดหยุดการทำงานโดยคลิกหมายเลขบรรทัดในแหล่งที่มา เมื่อการทำงานหยุดชั่วคราว ให้วางเมาส์เหนือตัวแปรเพื่อดูค่า หรือพิมพ์ชื่อตัวแปรเหล่านั้นในคอนโซล ใช้แผง สแตกการเรียก เพื่อดูว่าฟังก์ชันใดบ้างที่นำมาสู่จุดนี้
// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is openตรวจสอบอย่างรวดเร็ว
แผงใดของ DevTools ที่แสดงคำขอของโพรโทคอลถ่ายโอนไฮเปอร์เท็กซ์ทั้งหมดที่หน้าเว็บส่งออกไป รวมถึงรหัสสถานะและเวลาตอบสนอง
ทบทวน: ชุดเครื่องมือ DevTools ของคุณ
องค์ประกอบ: ตรวจสอบและแก้ไข DOM ที่กำลังทำงานอยู่ คอนโซล: ใช้ log และเรียกใช้ JavaScript เครือข่าย: ตรวจสอบการรับส่งข้อมูลของโพรโทคอลถ่ายโอนไฮเปอร์เท็กซ์ แหล่งที่มา: ตั้งจุดหยุดการทำงานและแก้จุดบกพร่อง โหมดอุปกรณ์: ทดสอบการจัดวางที่ปรับตามหน้าจอ การเชี่ยวชาญแผงทั้งสี่นี้จะเปลี่ยนขั้นตอนการแก้จุดบกพร่องของคุณไปอย่างมาก
คำถามที่พบบ่อย
บทเรียน “เครื่องมือสำหรับนักพัฒนา: การเปิดและใช้งาน DevTools” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เครื่องมือสำหรับนักพัฒนา: การเปิดและใช้งาน DevTools” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เครื่องมือสำหรับนักพัฒนา: การเปิดและใช้งาน DevTools”
เปิด Chrome DevTools ตรวจสอบองค์ประกอบ อ่านคอนโซล ดูคำขอเครือข่าย และแก้ไข CSS แบบสดในเบราว์เซอร์ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “เครื่องมือสำหรับนักพัฒนา: การเปิดและใช้งาน DevTools” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- DNS และ HTTP ของเบราว์เซอร์: วงจรชีวิตคำขอ
- HTML CSS และ JavaScript: หน้าที่ของแต่ละชั้น
- หน้าเว็บแสดงผลอย่างไร: การแยกวิเคราะห์ DOM CSSOM การจัดวาง และการวาด
- เครื่องมือสำหรับนักพัฒนา: การเปิดและใช้งาน DevTools