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

เพิ่มทักษะการ Debug JavaScript Code ด้วยเทคนิคการใช้ Console

15-ม.ค.-20

คัมภีร์เทพ IT

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

ใน Console Object ได้มีการจัดเตรียมการเข้าถึง Debugging Console ของ Browser ไว้แล้ว คุณสามารถใช้ Console Object ได้ในกรณีที่คุณ Run JavaScript Code บน Browser เช่นใน Client-side Code, ไม่ใช่ Server-side Code ส่วนวิธีการทำงานก็อาจแตกต่างกันไปตาม Browser แต่มันมีชุดของ Features ที่ถูกจัดเตรียมไว้ให้อยู่แล้ว ส่วนที่ดีที่สุดของ Debugging Statements ก็คือ พวกมันทำงานทั้งกับ Libraries และ Frameworks เนื่องจากพวกมันอยู่ภายใน Core Language อยู่แล้ว

กรณีการใช้งานขั้นพื้นฐานที่สุดสำหรับ console.log ก็คือ การแสดงผลลัพธ์ของ Code โดยคุณสามารถลองดู Code ต่อไปนี้:

มันทำการบันทึกชื่อ (name) แล้วส่งผ่านไปยัง sayHello Function

แล้วถ้าเราต้องการทราบจำนวนครั้งที่เราจะต้องเรียกใช้ sayHello Function เราจะทำอย่างไรดี? วิธีง่าย ๆ สำหรับการทำสิ่งนั้น เรียกว่า console.count()

• Console.count

count() จะแสดงจำนวนครั้งที่มันถูกเรียกด้วย Label นั้น ในกรณีที่ไม่มี Arguments, count() จะทำงานเหมือนว่า มันถูกเรียกด้วย Default Label

จาก Code ด้านบน จะได้ออกมาดังนี้:

สิ่งนี้จะทำให้เราสามารถนับจำนวนครั้งที่เราเรียกใช้ Function แล้วถ้าเราต้องการนับจำนวนครั้งที่เราเรียกใช้ Function ด้วยชื่อ (name) เดียวกันล่ะ จะทำอย่างไร? วิธีการทำ ก็คือ เราแค่เพียงส่ง name Argument ไปยัง count Method

และผลก็คือ Function จะช่วยนับจำนวนครั้งที่เราเรียกใช้ Function ด้วยชื่อแต่ละชื่อ

• Console.warn

Method ต่อไปนี้จะทำการแสดง Warning Message ไปยัง Console ซึ่งมันจะมีประโยชน์อย่างยิ่งเมื่อทำงานร่วมกับ Developer Tools หรือ APIs นอกจากนี้ console.warn ยังเหมาะอย่างยิ่งสำหรับการทำให้ User ทราบว่า มีบางสิ่งที่อาจไม่ถูกต้อง เช่น เมื่อไม่มีการส่ง Argument หรือการให้ Developer ทราบว่า API/Package Version นั้น ๆ ถูกเลิกใช้ไปแล้ว

จาก Code ข้างต้น จะตรวจสอบว่า name Argument ได้ถูกส่งผ่านไปยัง Function หรือไม่ หากไม่มีชื่อ (name) ถูกส่งผ่านไป มันจะแจ้ง Warning Message เพื่อให้คุณได้ทราบ

• Console.table

หากคุณต้องทำงานร่วมกับ Arrays หรือ Objects, console.table จะมีประโยชน์อย่างในการแสดงข้อมูล โดยทั่วไปแต่ละ Element ใน Array จะอยู่เป็นแถวของ Table ขอยกตัวอย่างคือ กรณีที่เรามี Array ของผลไม้ (Fruits) ถ้าเราส่ง Fruits Array ไปยัง console.table Method เราควรจะเห็น Table ที่ถูก Print ไปยัง console

และถ้าเรามองไปที่ console เราจะเห็น Table ที่อธิบายถึง Array ของเรา

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

และถ้าเราเรียก console.table ด้วย Array เราก็จะเห็น Table ดังต่อไปนี้

การทำงานกับ Array นั้นอาจดูไม่มีอะไรซับซ้อนมากนัก แล้วถ้าเราต้องทำงานกับ Object ล่ะ จะเป็นอย่างไรบ้าง

จะสังเกตว่า ตอนนี้เรามี Object แทนที่จะเป็น Array โดย Object ประกอบไปด้วย 2 Keys คือ ชื่อ (name) และประเภท (type) ของสัตว์เลี้ยง (pet)

 

คุณจะเห็นว่าข้อมูลใน Table จะแสดงรายละเอียดที่แตกต่างออกไปจากก่อนหน้านี้ แล้วจะเกิดอะไรขึ้นหากเรามี Object เพิ่มขึ้นมาอีกหนึ่ง Object?

เป็นไปตามที่คาดไว้ ทั้ง 2 Objects จะแยกกันแสดงผลใน 2 Tables

แต่ถ้าเราต้องการที่จะจับคู่พวกมันให้อยู่ใน Table เดียวกัน จะต้องทำการ Wrap Object เอาไว้ภายใน Array

ทำให้ตอนนี้ เราสามารถจัดกลุ่มของ Objects ไว้ใน Table เดียวกันได้แล้ว

 

• Console.group

เมื่อต้องทำงานกับ Sets หรือ Linked-Data, ให้คุณใช้ Nested Groups เพื่อช่วยจัดการ Output ของคุณ โดยเชื่อมโยง Messages ที่เกี่ยวข้องกัน หากต้องการสร้าง Nested Block ใหม่ ก็ให้เรียกใช้ console.group()

Code ต่อไปนี้แสดง Console Statements ของ Nested Block-Level ซึ่งมันมีประโยชน์อย่างมากเมื่อต้องทำงานกับ Relation-Based Data

console.groupCollapsed() Method ก็จะคล้าย ๆ กัน แต่ Block ใหม่จะถูกยุบ (collapse) และคุณจะต้องคลิกที่ปุ่ม (Disclosure Button) เพื่ออ่านข้อมูลที่ซ่อนอยู่

สรุป

อยากให้คุณลองใช้ Tools ทั้งหมดที่แต่ละภาษาที่คุณใช้งานได้จัดเตรียมหรือมีไว้ให้อยู่แล้ว และถ้ามันสมเหตุสมผลหรือเหมาะสมที่จะใช้งาน ก็จงใช้มันซะ

ที่มา:  https://medium.com/

 

 

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

 

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

เพิ่มเพื่อน

 

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

ประเภทบทความ