sun.phaisarn.com

โดยส่วนตัว ผมเองพอทราบมาช่วงหนึ่งแล้วว่า Visual Studio สามารถ debug JavaScript ผมเคยได้ลอง set break point ในคำสั่ง JavaScript แต่พอลอง debug ดู โปรแกรมก็ไม่ได้มาหยุดที่ break point จึงไม่สามารถ debug JavaScript ได้ และประกอบกับผมเองก็ใช้งาน FireFox เป็นหลักจึงหันไปใช้การ debug JavaScript ด้วย FireBug ที่เป็น add-on ของ FireFox แทน แต่หลังจาก debug ด้วย FireBug มาช่วงหนึ่ง ผมพบว่ามีบ้างครั้งที่ผมสั่งให้มีการทำงานแบบ step into ไม่ยอมทำงาน ทำให้ผมได้พยายามหา tool อื่นๆ มาช่วยการ debug JavaScript จนทำให้นึกถึงการ debug JavaScript ด้วย visual Studio ขึ้นมาอีกครั้ง แต่คราวนี้ผมได้พยายามหาข้อมูลอย่างเต็มที่ให้สามารถใช้งาน feature นี้ใน visual studio ให้ได้ จนท้ายที่สุดผมก็ได้พบคำตอบ เป็นวิธีการที่ง่ายมากๆ เพียงแค่เพิ่ม key word debugger; เข้าไปในส่วนบนของคำสั่ง JavaScript ที่เราจะ debug ดังตัวอย่างในภาพต่อไปนี้







ในตัวอย่างนี้ ผมได้ใช้ Visual Studio 2008 และ jQuery 1.4.2  เป็น JavaScript Framework

ขอให้สังเกตบรรทัดที่ 11 ที่ได้เพิ่ม key word debugger; เข้าไป

และบรรทัดที่ 14 ที่มีการ set break point เอาไว้

ผมได้ทำการ debug คำสั่ง JavaScript แบบง่าย ๆ เพื่อทดสอบว่าเมื่อ click ที่ปุ่มที่มี id clickMe โปรแกรม จะวิ่งมาหยุดที่ตรงบรรทัดที่มีคำสั่งเพื่อแสดง message box ที่มีข้อความว่า You’ve just clicked me !!!



เพื่อให้การ debug ทำงานได้ จำเป็นที่จะต้อง setting ค่าใน IE (Internet Explore) โดยเปิดโปรแกรม IE ขึ้นมา

เข้าไปที่ Tools > Internet Options

เลือก Tab Advanced เลื่อนหา Section Browsing

uncheck disable script debugging (Internet Explorer) และ disable script debugging (other) ดังภาพ







กดปุ่ม F5 เพื่อ debug โปรแกรม

แล้วทำการ step over , step into ได้ตามต้องการ

สามารถที่จะดูสถานะของ object ด้วย locals Window หรือทำการ add object to watch แบบเดียวกับกับการ debug C# หรือ VB.NET







ผมได้แนบ source code ของตัวอย่างนี้ สามารถโหลดได้ตาม link ข้างล่างนี้เลย

download source code

ลองนำวิธีนี้ไปใช้กันดูนะครับ คิดว่าจะเป็นประโยชน์มากเมื่อมีปัญหากับ JavaScript

Ref: http://codesanook.com/