วันนี้ผมมีเทคนิคสั้นๆ มาฝากครับ นั่นคือ การ Debug โปรแกรมของคุณ ตั้งแต่มันยังทำงานอยู่ในโหมด Designer เลย ทำได้ยังไง มาติดตามดูกันครับ

ทำไมต้องทำแบบนี้

สาเหตุก็เพราะว่า เวลาเขียนโปรแกรมด้วย Silverlight เราอาจจะมีการสร้าง Data Template สร้าง Converter อะไรขึ้นมาจำนวนมาก ซึ่งการจะมาไล่ Debug มันด้วย Web Browser หรือ ถ้าเป็นโปรแกรม WP7 ก็ต้องรันผ่าน Emulator ทำให้เสียเวลาในการทำงานค่อนข้างมาก การ Debug กับ Expression  Blend จะช่วยให้เราค้นพบ Bug ได้เร็วขึ้น และการแก้ไขก็ง่าย เพราะเราสามารถหยุดการ Debug แก้ไขโค๊ด และสั่ง Build ใหม่ เพื่อดูการเปลี่ยนแปลงได้ทันที

ทำยังไงละ

ขั้นแรกเลย รู้สึกว่า ตัว Visual Studio จะต้องเป็น Professional ขึ้นไปครับ จากนั้น ไปที่เมนู

แล้วเลือก Blend จากรายการ

จากนั้น เราก็ใช้งาน Blend ตามปกติครับ สมมุติว่า ผมได้ตั้ง FlexAgendaModel เป็น DataContext ของ หน้า FlexAgenda และได้ทำการ Binding ไว้ เมื่อผมเปิดหน้านั้นขึ้นมา ใน Visual Studio ก็จะติด Breakpoint ที่ผมตั้งไว้ ตามภาพครับ

และจะเห็นว่า ผมใช้โค๊ด DesignerProperties.IsInDesignTool เพื่อตรวจสอบว่า ขณะนี้โค๊ดทำงานอยู่ภายใต้ Expression Blend หรือไม่ และก็ทำการสร้างข้อมูลตัวอย่าง ขึ้นมาด้วยโค๊ด (Expression Blend สามารถสร้างตัวอย่างให้ได้ แต่ว่า มันไม่รองรับข้อมูลทุกประเภทที่เราใช้ครับ) ทำให้เมื่อผมทำการออกแบบ ItemTemplate ก็สามารถทำได้ง่ายดายขึ้น เพราะสามารถเห็นการแสดงผลของ Template ได้ แบบ Real-Time โดยที่ไม่ต้อง Debug โปรแกรมเลย

นอกจากนี้ ถ้า Converter ผมมีปัญหา ซึ่งมันจะไม่แสดงเป็น Exception ออกมา ขณะ Runtime ก็สามารถตรวจพบด้วย Blend และ Visual Studio ได้ทันที

การแก้ไข Code

ถ้าเราพบ Error ที่ต้องการแก้ไข ก็เพียงแค่หยุดการ Debug และแก้ไขโค๊ด จากนั้น *** อย่าลืมเซฟ ***

แล้ว Build โปรแกรมใหม่ใน Blend

โค๊ดใหม่ที่แก้ไข ก็จะทำงานทันทีครับ

หวังว่าเทคนิคเล็กๆ น้อยๆ นี้คงเป็นประโยชน์สำหรับเพื่อนๆ ทุกคนนะครับ