ASP.NET กับ jQuery: ใช้ Firebug เพื่อดูการ request/response ของ AJAX

สวัสดีครับมาพบกับวีธีที่ช่วยให้คุณตรวจดู HTTP request/response เมื่อเราใช้วิธีการ AJAX โดย Mozilla Firefox browser ได้จัดเตรียมเครื่องมือ add-on พัฒนา web ที่เรียกว่า Firebug ไว้แล้วเพื่อช่วยให้นักพัฒนาสามารถตรวจสอบ log javascript หรือ AJAX request/response การสื่อสารว่าเกิดอะไรกับ client page บน browser ของเรานี้บ้าง

มาเริ่มทำตามผมกันเลยดีกว่าครับ

1. เปิด Firefox แล้วติดตั้ง Firebug โดยไปที่ http://getfirebug.com/.

2. down load SourceCode จาก SourceCode เพื่อนำมาทำต่อ

3. เปิด projects ขึ้นมาแล้ว run page ด้วย Firebug ครับ จะขึ้นหน้าจอดังข้างล่างนี้ แล้วกดไปที่ icon รูปแมลง ตามภาพ

4. กดที่ปุ่ม กดเลยเซ่ ครับ จะแสดงตามภาพ

5. จะสังเกตุว่าที่ console ของ Firebug จะแสดงข้อความที่อยู่ใน code javascript ที่อยู่ใน page เป็นคำสั่งเพื่อแสดงข้อความ ซึ่งผมตัดส่วนสำคัญนี้มาให้ดู ดังนี้ครับ

beforeSend: function () {
console.log(‘log นี้เกิดใน Ajax beforeSend’);
},
complete: function () {
console.log(‘log นี้เกิดใน  Ajax complete’);
}

6. เอาละครับ เพื่อให้แสดงข้อความได้หลากหลายขึ้น ผมจะแสดงด้วยตัวอย่าง javascript ง่ายๆละกัน โดยให้คุณใส่ code javascript นี้เพิ่มเข้าไปใน page ที่ function complete คล้ายๆแบบนี้เลยครับ

complete: function () {
console.log(‘log นี้เกิดใน  Ajax complete function – Log Message’);
console.debug(‘log นี้เกิดใน  Ajax complete function – Debug Message’);
console.error(‘log นี้เกิดใน  Ajax complete function – Error Message’);
console.info(‘log นี้เกิดใน  Ajax complete function – Info Message’);
console.warn(‘log นี้เกิดใน  Ajax complete function – Warning Message’);
}

7. เปิด page ขึ้นมาใหม่แล้วกดปุ่ม กดเลยเซ่ จะแสดงตามหน้าจอข้างล่างนี้

เป็นไงครับที่ console ของ Firebug แสดงข้อความพร้อม icon ตามความหมายของ log แล้ว ลอง click Firebug ไปดูที่ tab อื่นกันบ้างดีกว่า โดย click ไปที่ Net>XHR>Response คุณจะเห็น content ของ HTML page ที่ผมได้เขียนเตรียมไว้ให้ AJAX เพื่อ get มาแล้วครับ ดังภาพนี้

เสร็จแล้วครับ การ log บน AJAX ด้วย Firebug

ขอบคุณครับ 🙂

Advertisements

#asp-net, #javascript, #jquery