วิธีการ Debug หน้าจอ XAML ขณะDesign-Time (ใน Microsoft Blend)

image2

การพัฒนา Application บน Windows Phone นั้น ผมคิดว่า จุดเด่นที่สำคัญที่สุดคือ Visual Studio และ Blend นั้น สามารถแสดงหน้าจอโปรแกรมของเรา ขณะที่โปรแกรมรันอยู่ได้จริงๆ ทำให้การปรับแต่งหน้าจอนั้นทำได้อย่างง่ายดายมาก โดยไม่ต้องเสียเวลา Compile, Run และ Debug เพื่อดูผลเหมือนกับเวลาที่ทำงานบน Android หรือ iOS แต่ก็จะพบว่า บางครั้ง หน้าจอโปรแกรมของเราใน Blend กลับไม่แสดงผลตามที่เราคิดไว้ ซึ่งนั่นก็อาจจะเป็นเพราะว่าเกิด Exception ขณะที่โปรแกรมเราทำงานอยู่ใน Process ของ Blend ครับ

วันนี้ ผมมีเทคนิคง่ายๆ ในการ Debug โปรแกรมของเรา ขณะที่รันอยู่ใน Visual Studio/Blend มาฝากครับ (เรียกว่า Design-Time Debugging) จะได้ทราบว่าเกิดอะไรขึ้น ทำไมหน้าจอ Design จึงไม่ทำงาน

วิธีการมีดังนี้ครับ

  1. ขั้นแรกเปิด Blend ขึ้นมา โดยใช้คำสั่ง Open in Blend หรือว่าเปิดไฟล์ Solution (.sln) ไฟล์เดียวกับที่เปิดอยู่ใน Visual Studio ก็ได้ แล้วทำการ Rebuild 1 ครั้ง เพื่อให้ได้ Assembly เวอร์ชั่นที่ตรงกันกับใน Visual Studio
    image5
  2. จากนั้น กลับมาที่ Visual Studio และใช้คำสั่ง Debug –> Attach to Process…
    image8
  3. ในหน้าจอ Attch to Process ให้เลือกดังนี้ครับ
    • ปุ่ม Select… เลือกตัวเลือกว่า Managed (v4.5, v4.0) code

      image11
    • จากนั้น ในรายการ Process มองหา Process ที่ชื่อว่า XDesProc.exe และเอาเมาส์ชี้ ให้ขึ้น Tooltip สังเกตว่า จะมีอยู่สองตัว ตัวหนึ่งเป็นของ Visual Studio และอีกตัวหนึ่งเป็นของ Blend ครับ ให้ดูตัวที่ใน Path มีคำว่า \Blend\ นั่นคือ Process ของ Blend ครับ

      แต่สำหรับ Windows Phone เวอร์ชั่นเก่า/WPF นั้น สามารถ Debug ไปที่ Process ของ Blend.exe ได้โดยตรง เข้าใจว่า ในเวอร์ชั่นใหม่ ทาง Microsoft ทำการแยก Process ออกมา เพราะว่าถ้าเกิดว่าโค๊ดเราเกิด Exception จะได้ไม่ทำให้ Blend ปิดไปด้วยครับ

      แต่ถ้าหากว่า หา Process ที่ชื่อ XDesProc.exe ของ Blend ไม่เจอ ให้เปิดหน้าจอ Design ที่เป็น XAML ขึ้นมาหนึ่งหน้า โดยดับเบิ้ลคลิกที่ไฟล์จากหน้าต่าง Projects เพื่อกระตุ้นให้ Blend ทำการ Create Process ขึ้นมา แล้วกลับไป Refresh ที่หน้าต่าง Attach To Process ของ Visual Studio ครับ

      image14

      image2
  4. จากนั้น Visual Studio จะอยู่ในโหมด Debug ซึ่งเราสามารถติดตามการทำงานของโปรแกรมเราได้ เหมือนตอนที่ Debug บน Device ครับ

    image17

เทคนิคอื่นๆ

สังเกตจาก Screenshot จะพบว่า หน้าจอโปรแกรม Meet’NGeek ที่เราพัฒนานั้น มีข้อมูลแสดงผลอยู่ทันที ระหว่างที่กำลังอยู่ในหน้าจอ Blend ทำให้ Designer สามารถแก้ไขหน้าจอโปรแกรมได้ง่ายดายมาก เพราะว่าเห็นผลทันทีเลยว่าเวลารันจะได้ผลเป็นอย่างไร

image20

เทคนิคที่สามารถทำให้มองเห็นข้อมูลได้ ขณะ Design คือการใช้ Sample Data ครับ ซึ่งเราอาจจะใช้ความสามารถในการสร้าง Sample Data ของ Blend ก็ได้ แต่ว่าทีมของเรา เลือกใช้วิธีแนบข้อมูลตัวอย่างเอาไว้เป็น JSON แล้วทำการ Deserialize ออกมา เมื่อโปรแกรมทำงานอยู่ในแบบ Design ครับ ผมบอกใบ้ให้แล้ว ลองไปหาวิธีกันดูนะครับ

แต่ถ้ายังนึกไม่ออก ครั้งต่อไป ผมจะมาแนะนำว่า จะมีวิธีการใช้งานเทคนิคนี้อย่างไรครับ