บทความ IT เจ๋งๆ
วิธีการหา Bugs ใน JavaScript Code ด้วย Debugger
01-พ.ย.-19
คัมภีร์เทพ IT
Build-in Debugger ที่อยู่ใน JavaScript มีประโยชน์มากเพราะมันช่วยหา Bugs อย่างเช่น ใน Nested Callbacks, Promises ที่มักมีความยุ่งยาก คำสั่ง Debugger ทำงานได้ทั้งบน Client Side และ Server Side วันนี้เรามาดู วิธีการหา Bugs ใน JavaScript Code ด้วย Debugger กัน
Syntax
คำสั่ง Debugger ช่วยให้เราหยุดการ Execute Code และตรวจสอบตัวแปร, ค่า และอื่น ๆ โดยพื้นฐานแล้วมันทำหน้าที่เป็นตัว Return และหยุด Function จากการ Execute
เมื่อเรา Execute Code ข้างต้น เราควรเห็นสิ่งนี้ สังเกตที่ข้อความ “Paused in debugger” และปุ่ม Resume และปุ่ม Loop-over ทางด้านขวา ที่ Panel ด้านซ้าย เราจะเห็น “sources” tab และ debugThis Function ของเราที่มีค่าที่เราส่งผ่าน หากคุณเลื่อน Mouse ไปเหนือตัวแปร a และ b คุณก็จะเห็นค่าของพวกมัน
คงไม่มากไปที่จะพูดว่า นี่เป็น Tool ที่มีประโยชน์กรณีที่เรามีสิ่งที่ซับซ้อนเกิดขึ้น และเราจำเป็นต้องตรวจสอบว่ามีอะไรผิดพลาดหรือไม่ Application ที่ซับซ้อนมาก อาจ Fetch ข้อมูลจาก Data Sources ต่าง ๆ นับ 10 แหล่ง แต่หนึ่งในนั้นอาจล้มเหลว แล้วเราจะทำอย่างไรดี หากเกิดเหตุการณ์แบบนี้ ซึ่ง Debugger คือตัวช่วยในเรื่องนี้
คำสั่ง Debugger จะเรียกใช้ Debugging Functionality ต่าง ๆ เช่น การตั้งค่า Breakpoint เป็นต้น หากไม่มี Debugging Functionality แล้ว คำสั่งก็จะไม่ส่งผลกระทบใด ๆ
Multiple Debuggers
Debugger จะมีประโยชน์อย่างยิ่งเมื่อเรามีคำสั่ง Debugger มากกว่า 1 คำสั่ง และมี Callbacks หรือ Promises เป็นจำนวนมาก ลองดูตัวอย่างต่อไปนี้ ที่เรามี Closure Function เรารับค่าจาก Function ด้านนอกแล้วส่งผ่านไปยัง Function ด้านใน:
Debugger จะช่วยเพิ่มความยืดหยุ่นให้เราสามารถตรวจสอบค่าของ Function ทั้งหมดได้ โดยภายใน Closure เราสามารถตรวจสอบค่า ของ Argument a, b และ c เพียงคุณวาง Mouse เหนือ Argument ของ Function แล้วคุณจะเห็นค่าของมัน
เมื่อเราเริ่มรู้จักการใช้ Debugger แล้ว เราลองมาดูตัวอย่างที่ซับซ้อนมากขึ้นกัน อันดับแรก เราต้องการตรวจสอบว่า เราได้ส่งผ่าน name Argument ไปยัง createPerson Function หรือไม่ ถ้าไม่ เราก็จะหยุดการ Execute Code ทั้งหมด และแจ้งเตือนไปยังConsole กรณีที่มี name ให้สร้าง person Object ด้วย Argument ที่ส่งไปให้
เมื่อเราเรียก createPerson Function ด้วย Argument ที่ให้มา Debugger ก็ควรปรากฏขึ้น ลองมาดูว่ามันบอกอะไรเราบ้าง
Debugger ตัวแรกจะทำหน้าที่ และทำให้เราสามารถเข้าไปตรวจสอบ Arguments ของ createPerson ได้ คุณสามารถบอกได้ไหมว่า จะเกิดอะไรขึ้นถ้าเราตรวจสอบ person Object?
คุณจะเห็นว่ามันเป็น Undefined ใช่ไหม ทำไม person ถึงเป็น Undefined ได้ล่ะ คำตอบง่ายมาก ก็เพราะเรายังไม่ได้ Execute Code ของเราใน Part นั้นนั่นเอง เราหยุดการ Execute Code ที่บรรทัดแรกของ Function เราไม่มี Scope การเข้าถึง person Object เนื่องจากมันไม่มีอยู่
หากเรากดปุ่ม Resume สีฟ้า Debugger ตัวที่สองก็จะทำหน้าที่ทันที ซึ่งครั้งนี้จะทำภายใน hasName Function
ตอนนี้เราอยู่ใน hasName Function แล้ว โดย Function นี้จะทำการตรวจสอบอย่างรวดเร็วว่า มีการส่งผ่าน name ไปยัง person Function หรือไม่ มันไม่สมเหตุสมผลเท่าไรนักที่จะมีมันใน Function ที่แยกออกมา เนื่องจากเราสามารถตรวจสอบ Property เดียวที่อยู่ภายใน createPerson แต่จุดประสงค์ของการแสดงตัวอย่างของ Debugger มันมีประโยชน์ในการแสดงถึงวิธีการใช้ Debugger ในทางปฏิบัติจริง ๆ person Object ของเรา ยังคงเป้น Undefined เนื่องจากเรากำลัง Execute hasName Function และยังไม่ถึง Part ที่เราสร้าง person Object
สุดท้าย ให้กดปุ่ม Resume เพื่อให้ Debugger ตัวที่สามได้ทำหน้าที่ของมัน
เราควรจะสามารถเห็นค่าของตัวแปรและ Object ทั้งหมดได้เนื่องจาก Code ของเราได้ถูก Execute แล้ว คำถามน่าสนใจคือ จะเกิดอะไรขึ้นถ้าเราไม่ส่งผ่าน name ไปยัง createPerson Function
เห็นได้ชัดว่ามี Warning แจ้งอย่างชัดเจนว่า เราลืมส่งผ่าน name ไปยัง Function นั่นเอง
ครั้งต่อไป ก่อนที่คุณจะเขียน console.log อยากให้ลองพยายามหาเหตุผลที่จะใช้ Debugger แทน คุณสามารถตั้งค่า Web Bundler ของคุณเช่น Webpack หรือ Parcel เพื่อลบคำสั่ง Debugger ใน Production โดย Default นอกจากนี้ Debugger ยังทำงานได้ภายใน Node Environment
หากคุณต้องการใช้ Debugger กับ Node ขอแนะนำให้ลองอ่านบทความนี้ ซึ่งเขียนไว้อย่างละเอียดเกี่ยวกับวิธีที่คุณจะสามารถ Debug Code ของ JavaScript ที่เป็น Server-Side
สรุป
หากเรามี Tool ที่มีประโยชน์ซึ่งช่วยทำให้ชีวิตของเราง่ายขึ้น เราก็ควรใช้งานมันบ่อย ๆ และ Debugger ก็เป็นหนึ่งใน Tool ที่คุณควรใช้งานให้เป็น
ที่มา: https://medium.com/
ดูงานที่ต้องใช้ทักษะภาษา JavaScript
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด