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

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

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

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

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

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

รูปภาพ

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

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

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

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

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

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

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

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

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

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

3. ทีนี้ก็ลองเลือกมาสักเว๊บนึงที่มีการใช้งาน Ajax แล้วเราก็เลือก ไปหัวข้อ Net แล้วเลือกหมวด All แล้วลองคลิ๊กดู
คุณไม่มีสิทธิ์ดูไฟล์ที่แนบมาในกระทู้
รูปภาพ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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