วิธีการใช้งาน Firebug เพื่อดูการทำงานของ JavaScript Ajax request -response

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 2:06 am

วิธีการใช้งาน Firebug เพื่อดูการทำงานของ JavaScript Ajax request -response

โพสต์โดย samsonnaze3 » 11/04/2012 3:06 pm

รูปภาพ

สำหรับวิธีการใช้งานใน Firebug สามารถใช้ได้หลายจุดประสงค์เช่น การทดลองแก้ไข CSS ในเว๊ปที่เราเขียนไปนั้น ก็สามารถ ใช้ตัว Firebug ในการทดลองแก้ไขได้ โดยเมื่อแก้ไขไป มันจะไม่เซฟค่าให้แต่อย่างใด โดยสามารถดูวิธีใช้งานเกี่ยวกับ CSS ได้จาก วิธีใช้งาน Firebug ช่วยปรับแต่ง Blogger Layout

ส่วนกระทู้นี้จะเป็นกระทู้แนะนำคร่าวๆเกี่ยวกับการใช้งานเพื่อดูการทำงานของ JavaScript ที่เราได้เขียนไว้ ว่ามันส่งค่า คืนค่าอะไรยังไง แบบไหน ได้ค่าอะไร มาบ้างเป็นต้น
รูปภาพ

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 2:06 am

Re: วิธีการใช้งาน Firebug เพื่อดูการทำงานของ JavaScript

โพสต์โดย samsonnaze3 » 11/04/2012 3:10 pm

วิธีการใช้งาน
1. ให้ทำการเปิด Firefox ที่ติดตั้งส่วนเสริม Firebug แล้วขึ้นมา
**วิธีการติดตั้ง ดูได้ที่ : วิธีติดตั้ง Firebug

2. ให้ทำการคลิ๊กที่ Icon Firebug ที่อยูด้านมุมขวา แล้วมันจะขึ้นหน้าจอแสดงผลต่างๆมาให้ ในตอนต้น จะยังไม่มีการแสดงผลอะไรให้เห็น
แนบไฟล์
04.gif
04.gif (58.85 KiB) เปิดดู 3775 ครั้ง
รูปภาพ

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 2:06 am

Re: วิธีการใช้งาน Firebug เพื่อดูการทำงานของ JavaScript

โพสต์โดย samsonnaze3 » 11/04/2012 4:10 pm

3. ทีนี้ก็ลองเลือกมาสักเว๊บนึงที่มีการใช้งาน Ajax แล้วเราก็เลือก ไปหัวข้อ Net แล้วเลือกหมวด All แล้วลองคลิ๊กดู
แนบไฟล์
01.gif
01.gif (23.83 KiB) เปิดดู 3761 ครั้ง
รูปภาพ

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 2:06 am

Re: วิธีการใช้งาน Firebug เพื่อดูการทำงานของ JavaScript

โพสต์โดย samsonnaze3 » 11/04/2012 4:11 pm

4. เมื่อคลิ๊กแล้วมันก็จะแสดง URL ที่มันไปเรียกใช้งานมา ซึ่งเราสามารถกดเข้าไปดูรายละเอียดต่างๆได้
แนบไฟล์
02.gif
02.gif (19.26 KiB) เปิดดู 3761 ครั้ง
รูปภาพ

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 2:06 am

Re: วิธีการใช้งาน Firebug เพื่อดูการทำงานของ JavaScript

โพสต์โดย samsonnaze3 » 11/04/2012 4:14 pm

5. เมื่อคลิ๊กเข้ามาดูรายละเอียดแล้วมันก็จะมีหัวข้อต่างๆโชว์ขึ้นมา โดยถ้ามีหัวข้อ Post นั้นคือ ได้มีการส่งค่าตัวแปรแบบ Method Post ผ่าน ลิ้งค์หรือปุ่มที่เรากดเข้ามา โดยใน หัวข้อ Post ก็จะมีบอกว่า เราได้ส่งค่า หรือตัวแปรอะไรมาบ้าง
แนบไฟล์
03.gif
03.gif (14.54 KiB) เปิดดู 3768 ครั้ง
รูปภาพ

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 2:06 am

Re: วิธีการใช้งาน Firebug เพื่อดูการทำงานของ JavaScript

โพสต์โดย samsonnaze3 » 11/04/2012 4:15 pm

6. ถ้าต้องการดู output ก็เข้าไปที่หัวข้อ Response ว่า มันได้มีการส่งค่า output มาเป็นอะไรบ้าง โดยจะแสดงออกมาในรูปแบบ Code
แนบไฟล์
04.gif
04.gif (11.29 KiB) เปิดดู 3768 ครั้ง
รูปภาพ

ภาพประจำตัวสมาชิก
samsonnaze3
PHP Hero Member
PHP Hero Member
โพสต์: 190
ลงทะเบียนเมื่อ: 04/03/2012 2:06 am

Re: วิธีการใช้งาน Firebug เพื่อดูการทำงานของ JavaScript

โพสต์โดย samsonnaze3 » 11/04/2012 4:16 pm

7. หรือถ้าต้องการดู output อีกแบบ ให้เข้ามาที่หัวข้อ HTML มะนก็จะแสดง output มาในรูปแบบของ Object ให้เห็นภาพเลยว่า แสดงอะไรออกมาจากการกดปุ่มเมื่อกี้
แนบไฟล์
05.gif
05.gif (8.08 KiB) เปิดดู 3768 ครั้ง
รูปภาพ


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 4 และ บุคคลทั่วไป 0 ท่าน