Debug บน Web Browser (HTML & Javascript)

ก่อนหน้านี้ผมได้พูดถึงการ Debug source code ภาษา Java ในโปรแกรม Eclipse ไป (Debug คืออะไร และ ทำอย่างไร ??) แต่ว่าการ Debug ใน Eclispe นั้นก็ทำได้เพียงการทำงานที่เป็น source code จริงๆ เท่านั้น หากเป็น Web Application ก็จะมี jsp ที่เราได้เขียนต่างๆ นาๆ ทั้ง taglib, scriptlet อย่างที่รู้ๆกันว่า jsp จะเป็นการทำงานฝั่ง Client ทำให้สุดท้ายแล้ว Web Browser ก็จะแสดงเพียง HTML เท่านั้น

แต่ว่า การทำงานฝั่ง Client ของเรานั้นอาจมีการเล่นกับ event ต่างๆ เช่น พิมพ์, คลิกปุ่ม หรืออื่นๆ พวกนี้ก็มักจะมีการเรียก javascript ให้มาทำงาน อาจเป็นในลักษณะของ jQuery หรือ Ajax ก็ตามแต่ผู้เขียนจะออกแบบ ซึ่ง ณ จุดนี้หน้าเว็บนั้นๆ อาจต้องการส่งค่าไปยัง Server-side หรืออาจส่งไปหน้าเว็บอีกหน้าหนึ่ง บางครั้งเราจำเป็นต้องดูค่าต่างๆว่า มันถูกส่งไปยังอีกหน้าหนึ่งหรือไม่ หรือต้องการเชคว่า โปรแกรมมันเข้า case ที่เรากำหนดไว้หรือเปล่า อะไรทำนองนี้ (อ่านเพิ่มเติมได้จาก link Debug ด้านบน)

เล่าให้ฟังเล่นๆ ว่า เมื่อก่อนผมต้องการรู้ตรวจสอบอะไรพวกนี้ (ก่อนจะรู้จักการ Debug) ผมก็เล่น alert(); ตลอดเลยครับ พัฒนาขึ้นมาหน่อยก็ใช้ console.log(); ซึ่งก็ไม่ได้เป็นวิธีที่ดีเลย แต่ผมว่า หลายคนก็คงเคยทำเหมือนผมแหละ อิอิ

ต่อจากนี้ เราจะมารู้จักวิธีที่ควรจะทำ และทำแล้วดูเป็น Professional มากขี้นกันดีกว่าครับ มันคือการ Debug แต่ว่าการ Debug ในที่นี้เราจะไม่ได้ทำด้วย Eclipse แล้วนะครับ เราจะใช้ Web Browser ของเรานี่แหละ (สำหรับผู้ใช้ Mozilla Firefox ต้องโหลด plugin: Firebug มาก่อนนะครับ)


ในที่นี้ผมวาด HTML แบบง่ายๆ มี function javascript ขำๆ อีกตัวหนึ่ง code ก็ตามภาพเลยครับ

เขียนเสร็จแล้ว ก็จัดการรันผ่าน Web Browser ที่ชอบได้เลย (ในตัวอย่างเป็น Google Chrome นะครับ) จากนั้นเปิด Developer Tools โดยการกด F12 แล้วหา Tab ที่สามารถดู source code ได้ทั้งหมดทีเดียว ส่วนใหญ่แล้วมักจะเป็น Tab Script แต่ใน Chrome version ใหม่เค้าเปลี่ยนเป็น Tab Source ครับ




ทีนี้ "จิ้ม" ที่หมายเลขบรรทัดเพื่อให้เกิด Breakpoint ใน function getValue() ครับ (ถ้าจิ้มไม่ได้แสดงว่าเราเปิดผิด Tab กลับไปขั้นตอนแรกใหม่)



Breakpoint แล้ว ก็ลองเลือกข้อมูลใน textbox แล้วทำการกดปุ่ม click เพื่อให้เข้า function getValue() โดยใน Developer Tools จะมีเครื่องมือให้ step ในรูปแบบต่างๆ ครับ ที่ใช้บ่อยก็คือ Step Over (F10) คือ การ step แบบไม่เข้า function ที่มันเรียกต่ออีกทีหนึ่ง จากนั้นเอาเมาส์ชี้เพื่อดูค่าตัวแปรนั้นๆ หรืออาจดูจากด้านข้างก็ได้ครับ
**คีย์ลัดสำหรับการ Debug ไม่เหมือนใน Eclispe นะครับ

ทีนี้ เราก็จะขึ้นชื่อว่า "Debug ใน Browser เป็นแล้ว" ลองเอาไปใช้ดูครับ แล้วจะรู้ว่า มันมีประโยชน์จริงๆ อ้อ ในโค้ดนี้ผมแถม HTML5 ไปด้วยอย่างนึง คือ

<input type="date" name="date" />

ซึ่งเป็น tag ที่สามารถแสดง datepicker ได้เลยโดยที่ไม่ต้องใช้ library อื่นๆ เพิ่มเติม (ไม่เชื่อลองดูสิ ข้างล่างนี้)

ลองดูนะครับ ^^