COOL IT IDEAS AND STUFF
Top 3 Chrome DevTools Tricks I Wish I Knew Earlier
09-Dec-25
คัมภีร์เทพ IT
See the original english version Click here!
Chrome DevTools เป็นหนึ่งในเครื่องมือที่ Developer ใช้กันเป็นประจำ แต่หลายคนอาจยังไม่เคยสำรวจความสามารถทั้งหมดที่ซ่อนอยู่ในเครื่องมือนี้ บทความนี้จึงนำเสนอ 3 เคล็ดลับการใช้ Chrome DevTools ที่ Developer ควรรู้ไว้ ที่ช่วยให้การ Debug การ Test และการตรวจสอบปัญหาต่าง ๆ ทำได้ง่ายและมีประสิทธิภาพมากขึ้น โดยเน้นเทคนิคที่ใช้งานได้จริง และสามารถนำไปใช้ได้ทันที ไม่ว่าคุณจะเป็น Developer มือใหม่หรือมีประสบการณ์แล้วก็ตาม
1. debug(functionName) - เพื่อลดการใช้ console.log() ที่ไม่จำเป็น
โดยทั่วไป เมื่อ Code เกิดปัญหา Developer มักจะใช้วิธีเพิ่ม console.log() เข้าไปหลายๆ จุดเพื่อหาต้นเหตุของ Bugs ดังตัวย่างนี้
แม้ว่าวิธีนี้จะใช้ได้ผล แต่ก็ทำให้ Code รกและใช้เวลาค่อนข้างมากเกินจำเป็น
DevTools มีคำสั่งที่ช่วยให้กระบวนการนี้ง่ายขึ้น:
เมื่อใช้คำสั่งนี้ ตัว Debugger จะหยุดการทำงานไว้ที่ต้น Function โดยอัตโนมัติ ทำให้ Developer เห็นตัวแปร, สถานะของ Stack, ขอบเขตการทำงาน และการไหลของ Program ได้ทันที โดยไม่ต้องเปิด File ต้นทางหรือแก้ไข Code แต่อย่างใด
ข้อดีของวิธีนี้คือ:
- ใช้งานได้แม้เป็น Function จาก Libraries ภายนอก
- สามารถควบคุมได้เต็มที่ทั้งตรวจสอบตัวแปร, Call Stack รวมทั้ง Scope ได้อย่างครบถ้วน
- ไม่จำเป็นต้องรู้ด้วยซ้ำว่า Function นั้นถูก Define ไว้ที่ไหน
2. แก้ไข JavaScript ได้โดยตรงใน Browser
หลายคนอาจคุ้นเคยกับการแก้ไข CSS บน DevTools แต่จริงๆ แล้ว JavaScript ก็สามารถแก้ไขแบบ Live บน DevTools ได้เช่นกัน
วิธีใช้งาน:
- เปิดแท็บ Sources ใน DevTools
- เลือกไฟล์ JavaScript ที่ต้องการ
- ดับเบิลคลิกที่บรรทัดไหนก็ได้เพื่อแก้ไข Code
- กด Ctrl+S หรือ Cmd+S เพื่อบันทึก
- ให้ App ทำงานต่อไปตามปกติด้วย Code ที่ถูกแก้ไขใหม่ทันที
ข้อดีคือ Developer สามารถทดสอบแนวคิด แก้ไข Code หรือไล่ Bug ที่เกิดขึ้นได้โดยไม่ต้อง Reload หน้า หรือแก้ไขไฟล์จริงใน Project วิธีนี้มีประโยชน์อย่างมากเมื่อเจอ Bug ที่เกิดขึ้นเฉพาะใน Environment จริงอย่าง Production
3. ทดสอบความช้าของ Internet ด้วย Network Throttling
โดยทั่วไป Developer มักทดสอบ App ใน Network ที่เร็ว จึงทำให้บางครั้งมองข้ามปัญหาบางอย่างไป แต่ในความเป็นจริง อาจมี User บางรายที่ใช้งานใน Environment ช้า ทำให้เจอปัญหาเช่น เช่น หน้า Load ไม่ขึ้น, ข้อมูลไม่แสดง หรือ UI ค้าง เป็นต้น
DevTools มี Feature อย่าง Network Throttling ที่จะช่วยจำลองความเร็ว Internet แบบต่างๆ เช่น Slow 3G, Fast 3G และกำหนดความเร็วเองได้
วิธีใช้งาน:
- เปิดแท็บ Network
- ที่ด้านบน เลือก Dropdown ที่ระบุว่า No throttling
- เลือก Slow 3G, Fast 3G หรือความเร็วที่ต้องการทดสอบ
- Reload หน้า Web ใหม่
ด้วยวิธีนี้ จะช่วยให้ Developer จะเห็นสภาพการทำงานของ App ใน Network ที่ช้าเหมือนที่ User ใช้งานจริง ซึ่งจะช่วยให้สามารถตรวจจับปัญหาที่มักมองไม่เห็นบน Network ปกติ
นอกจาก 3 เคล็ดลับดังกล่าวแล้ว DevTools ยังมีคำสั่งเล็กๆ ที่ช่วยชีวิต Developer ได้ เช่น:
- $0: อ้างถึง Element ล่าสุดที่เลือกในแท็บ Elements
- copy(someVar): Copy ค่าของตัวแปรลงใน Clipboard ของคุณ
- $_: แสดงผลลัพธ์จาก Expression ล่าสุดของคุณ
และยังมีคำสั่งสนุกๆ เช่น:
ซึ่งมันทำให้แก้ไขข้อความบนหน้าเว็บได้เหมือนเป็นไฟล์เอกสาร คุณสามารถแก้ไขข้อความบนหน้า Web ได้เหมือนเป็น Word Document (ที่อาจเหมือนไม่ค่อยมีประโยชน์มากมายอะไร แต่มันก็น่าสนุกดี)
สรุป
และนี่ก็เป็น 3 เคล็ดลับการใช้ Chrome DevTools ที่ Developer ควรรู้ไว้ คุณจะเห็นว่า Chrome DevTools มี Features ที่น่าสนใจซ่อนอยู่มากกว่าที่หลายคนรู้ และ 3 เคล็ดลับในบทความนี้เป็นตัวอย่างของความสามารถที่ช่วยเพิ่มประสิทธิภาพการทำงานของคุณได้ คุณสามารถนำเทคนิคเหล่านี้ไปใช้ได้ทันที โดยไม่จำเป็นต้องเป็นผู้เชี่ยวชาญ DevTools และเมื่อเริ่มใช้แล้ว จะช่วยให้คุณทำงานเร็วขึ้น เข้าใจ Code ได้ดีขึ้น และแก้ไขปัญหาได้ดีขึ้นกว่าเดิม
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด