บทความ IT เจ๋งๆ
6 เคล็ดลับ การ Debug JavaScript ที่คุณควรรู้ไว้
09-ส.ค.-24
คัมภีร์เทพ IT
แม้ว่า JavaScript จะถูกใช้งานอย่างแพร่หลาย แต่มันก็มีบางสิ่งที่ทำให้ Developers ปวดหัว และการ Debug ที่ก็เป็นหนึ่งในนั้น แม้ว่า Developers ส่วนใหญ่จะใช้ console.log หรือ breakpoints แต่ยังมีเคล็ดลับการ Debug อื่น ๆ ที่น่าสนใจอีก บทความนี้จึงมาแนะนำ 6 เคล็ดลับ การ Debug JavaScript ที่คุณควรรู้ไว้
1. ความมหัศจรรย์ของ console.table
คุณสามารถแสดง Objects และ Arrays ที่ซับซ้อนด้วย console.table สิ่งนี้จะทำการแปลงข้อมูลของคุณให้อยู่ในรูปแบบตารางที่มีโครงสร้างอย่างดีภายใน console ของคุณ:
2. ขจัดปัญหา Call Stacks ด้วย console.trace
เมื่อคุณรู้สึกเหมือนหลงทางใน Function Calls, console.trace จะช่วยแก้ปัญหาให้คุณได้ คุณจะเห็นภาพได้ชัดเจนว่า Code ของคุณมาถึงจุดใดจุดหนึ่งได้อย่างไร ซึ่งจะให้ความกระจ่างเกี่ยวกับเส้นทางของการ Execution
3. เพิ่มประสิทธิภาพของ Profiling
เพิ่มประสิทธิภาพอย่างมืออาชีพโดยใช้ Built-in Performance Tools ของ Browser เริ่มต้นการทำ Profiling ด้วย console.time('label') และจบด้วย console.timeEnd('label') วิธีนี้จะบันทึก Execution Time ของ Code Blocks, Pinpointing Bottlenecks ของคุณ
4. ใช้ Advanced Assertions
ยืนยัน Assumptions ของคุณด้วย console.assert โดยมันจะบันทึก Error หาก Assertion นั้นเป็น False ช่วยให้คุณได้เห็นข้อผิดพลาดได้เร็วขึ้น ทำให้สามารถตรวจจับ Errors ที่อาจเกิดขึ้น:
5. Time Travel Debugging
แม้ว่า Time Travel Debugging ที่แท้จริงอาจยังคงเป็นแค่นิยายวิทยาศาสตร์ แต่คุณสามารถสร้าง Snapshot ของสถานะของ Application ของคุณได้ คุณสามารถใช้ JSON.stringify() เพื่อ Serialize Objects และจัดเก็บไว้ มันช่วยให้คุณสามารถกลับมาดูและวิเคราะห์สถานะในอดีตเพื่อหา Bugs ที่ยุ่งยากได้
บางครั้ง คุณเพียงแค่ต้องการมุมมองที่สวยงามยิ่งขึ้นของ Object ที่ซับซ้อนหรือ JSON Data ในปริมาณมาก คุณสามารถใช้ JSON.stringify ร่วมกับการจัดรูปแบบบางอย่าง:
การดำเนินการนี้จะ Output ข้อมูลของคุณเป็นสตริง JSON ที่มีรูปแบบสวยงามพร้อมการเยื้อง ทำให้แยกวิเคราะห์และทำความเข้าใจได้ง่ายขึ้นมาก
วิธีการนี้จะช่วยให้ข้อมูลของคุณถูกแสดงออกมาเป็น JSON String ที่มีรูปแบบสวยงามและมีการเว้นวรรคจัดย่อหน้า ทำให้ง่ายต่อการวิเคราะห์และเข้าใจมากขึ้น
6. เปิดเผย Object Properties ด้วย console.log({obj})
แม้ว่า console.log(obj) จะเป็นวิธีที่นิยมใช้ในการแสดง Objects แต่มันก็อาจสร้างความสับสนได้หาก Objects มีความซับซ้อนและมีโครงสร้างซ้อนทับกันหลายชั้น การใส่ Object ในวงเล็บปีกกา จะทำให้คุณสร้าง Object ใหม่โดยมี Object ต้นฉบับเป็น Property เดียว ซึ่งจะทำให้ Console ใช้การจัดรูปแบบที่ดีขึ้นสำหรับ Object เผยให้เห็น Properties และค่าต่าง ๆ ในรูปแบบที่อ่านได้ง่ายขึ้น:
สรุป
โปรดทราบว่า การ Debug เป็นทั้งศิลปะและวิทยาศาสตร์ ดังนั้น จงสนุกกับกระบวนการนี้และอย่ากลัวที่จะทดลองทำ ยิ่งคุณฝึกฝนพวกมันและสำรวจมุมที่ซ่อนอยู่ของ Developer Tools ของ Browser ของคุณมากเท่าไร คุณก็จะยิ่งยกระดับความเชี่ยวชาญเกี่ยวกับ JavaScript ของคุณได้มากขึ้นเท่านั้น
ที่มา: https://itnext.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด