บทความ IT เจ๋งๆ

วิธีที่ง่ายที่สุดวิธีหนึ่งในการ Debug อะไรก็ตามใน JavaScript ก็คือ การบันทึกสิ่งต่างๆ โดยใช้ console.log แต่อันที่จริงก็ยังมีวิธีอื่น ๆ อีกมากมายที่ Console จัดเตรียมไว้ให้ซึ่งสามารถช่วยให้คุณสามารถ Debug ได้ดีขึ้นกว่าเดิม และบทความนี้จะมาแนะนำ 9 เคล็ดลับ JavaScript Console ที่จะช่วยพัฒนาทักษะ Debug ของคุณ

1. เลิกทำสิ่งนี้ด้วย console.log()

ลองนึกภาพดูว่า เรามีตัวแปรที่ชื่อว่า name และเราต้องการบันทึกไว้ใน console

บ่อยครั้งที่พบว่า เรามักจะเขียนกันแบบนี้:

ตั้งแต่ ES2015 เป็นต้นมา เราสามารถใช้ Object Shorthand Notation ได้ทุกเมื่อที่ต้องการที่จะทำในลักษณะนี้ นั่นหมายความว่า เราสามารถเขียนได้ดังต่อไปนี้:

ซึ่งทั้ง 2 สิ่งนี้ จะได้ Output ออกมาในแบบเดียวกัน

2. วิธีที่ดีกว่าในการบันทึก log หลายรายการ

ลองนึกภาพสถานการณ์ เมื่อคุณมี Objects จำนวนมากที่คุณต้องการบันทึกลงไปใน console

หากเราต้องใช้ console.log() กับสิ่งเหล่านี้ แบบแยกกัน เช่น:

มันจะทำให้คุณทำงานได้ ช้า และมันจะไม่แสดงชื่อของตัวแปร ควบคู่ไปกับ Data ที่บันทึกไว้

แต่เราสามารถใช้วิธีการเดียวกันกับตัวอย่างแรกได้

ด้วยวิธีการนี้ จะทำให้เราได้รูปแบบการแสดงผลที่ดีขึ้นกว่าเดิม, Solution ที่รวดเร็วยิ่งขึ้นสำหรับการใช้ console กับ Log หลาย ๆ รายการ และมันจะแสดงชื่อของตัวแปรไว้ข้าง ๆ ของแต่ละรายการ

3. ทำไมต้องใช้ Lines ในเมื่อคุณสามารถใช้ Table ได้

เราสามารถก้าวไปอีกขั้น ด้วยการนำสิ่งเหล่านี้มารวมกันใน Table เพื่อให้สามารถอ่านได้ง่ายขึ้น เมื่อใดก็ตามที่คุณ Objects ที่มี Properties หรือ Array ของ Objects ที่เหมือน ๆ กัน ก็สามารถใช้ console.table() ได้ อีกทั้งเรายังสามารถใช้ console.table({ foo, bar}) แล้ว console จะแสดงดังนี้:

4. จัดกลุ่ม Log ให้เป็นกลุ่ม ๆ

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

บางทีคุณอาจกำลังบันทึกข้อมูลใน Function ต่าง ๆ 2-3 Functions และต้องการวิธีที่จะระบุให้ชัดเจนว่า ข้อมูลมาจาก Function ใด

ตัวอย่างเช่น หากคุณกำลังบันทึกรายละเอียดของ Users:

อีกทั้งคุณยังสามารถจัดตั้งกลุ่มภายในกลุ่มอื่น ๆ ได้ หากคุณต้องการ:

5. แสดง Warning ให้เห็นชัดขึ้น

คุณต้องการเพิ่มการมองเห็นข้อมูลบางอย่างที่กำลังบันทึกอยู่หรือไม่ ถ้าใช่ คุณสามารถใช้ console.warn() ซึ่งจะแสดงข้อมูลที่มี Background เป็นสีเหลือง:

6. แสดง Error logging ให้เห็นชัดขึ้น

บางทีคุณอาจอยากทำอะไรที่ Advance ขึ้น ด้วยการใช้ Log ประเภทเดียวกับที่คุณได้รับเมื่อใดก็ตามที่คุณได้รับ console logs สีแดง ที่มักจะทำให้คุณรู้สึกเป็นกังวล คุณสามารถทำสิ่งนั้นได้ดังนี้:

7. ออกแบบ Console ตามที่คุณต้องการ

คุณสามารถใช้ทักษะ CSS ของคุณ ใน console ได้เช่นกัน

คุณสามารถใช้คำสั่ง %c เพื่อเพิ่ม Style ให้กับ log statement ต่าง ๆ ได้

8. จับเวลาความเร็วในการทำงานของ Functions

เคยสงสัยหรือไม่ว่า Function ของคุณ ทำงานเร็วมากน้อยแค่ไหน คุณสามารถเขียนได้ดังนี้:

โปรดทราบว่า ความเร็วที่คุณเห็นอาจไม่คงที่เสมอไป หรือกล่าวอีกนัยหนึ่ง มันอาจแสดงว่าที่ เร็วหรือช้ากว่านี้ก็ได้ในช่วงเวลาใดเวลาหนึ่ง ส่วนปัจจัยอื่น ๆ ที่มีอิทธิพลต่อสิ่งนี้ ก็เช่น คอมพิวเตอร์ที่อาจกำลังทำงานอยู่, หรือสิ่งอื่น ๆ ที่กำลัง Execute อยู่ ณ ขณะนั้น เป็นต้น อันที่จริง หากเราทำสิ่งนี้อีก 5 ครั้ง เราอาจจะได้เห็นผลลัพธ์ที่แตกต่างกันทั้งหมดเลยก็ได้:

แต่ที่น่าสนใจก็คือ for loop ของเรา เร็วกว่า while loop เป็นจำนวน 3 ครั้งจากทั้งหมด 5 ครั้ง

9. การ Trace Stack ที่ดีขึ้นกว่าเดิม

console.trace() จะทำการแสดงผลของ stack trace ไปยัง console และแสดงให้เห็นว่า Code ไปถึง ณ จุดใดจุดหนึ่ง สิ่งนี้มีประโยชน์มากในกรณีที่คุณพยายาม Debug Code ที่มีความซับซ้อนที่อาจทำการ Calls ไปยังที่ต่าง ๆ มากมาย แม้ว่า ต่อไปนี้จะไม่ใช่ตัวอย่างของ “ Code ที่มีความซับซ้อน” แต่อย่างน้อย มันก็ช่วยอธิบายวิธีการทำงานได้:

เราสามารถคลิกที่ Link สีน้ำเงิน เหล่านั้นได้ และมันจะพาเราไปยังช่วงเวลาที่สร้าง console.trace() ใน Code ของเรา

และ console.trace() จะ Return สิ่งนี้กลับมาให้:

ที่มา: https://blog.bitsrc.io/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

 

บทความล่าสุด

• 8 GitHub Repositories ที่ช่วยให้คุณเรียนรู้ภาษา Programming ต่าง ๆ ได้
• 3 API Testing Tools ที่ควรลองนำไปใช้งาน
• ​7 VS Code Extensions มีประโยชน์ สำหรับใช้งานในปี 2022