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

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

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

User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

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

Post by samsonnaze3 »

Image

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

ส่วนกระทู้นี้จะเป็นกระทู้แนะนำคร่าวๆเกี่ยวกับการใช้งานเพื่อดูการทำงานของ JavaScript ที่เราได้เขียนไว้ ว่ามันส่งค่า คืนค่าอะไรยังไง แบบไหน ได้ค่าอะไร มาบ้างเป็นต้น
Image
User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

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

Post by samsonnaze3 »

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

2. ให้ทำการคลิ๊กที่ Icon Firebug ที่อยูด้านมุมขวา แล้วมันจะขึ้นหน้าจอแสดงผลต่างๆมาให้ ในตอนต้น จะยังไม่มีการแสดงผลอะไรให้เห็น
Attachments
04.gif
04.gif (58.85 KiB) Viewed 4826 times
Image
User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

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

Post by samsonnaze3 »

3. ทีนี้ก็ลองเลือกมาสักเว๊บนึงที่มีการใช้งาน Ajax แล้วเราก็เลือก ไปหัวข้อ Net แล้วเลือกหมวด All แล้วลองคลิ๊กดู
Attachments
01.gif
01.gif (23.83 KiB) Viewed 4812 times
Image
User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

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

Post by samsonnaze3 »

4. เมื่อคลิ๊กแล้วมันก็จะแสดง URL ที่มันไปเรียกใช้งานมา ซึ่งเราสามารถกดเข้าไปดูรายละเอียดต่างๆได้
Attachments
02.gif
02.gif (19.26 KiB) Viewed 4812 times
Image
User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

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

Post by samsonnaze3 »

5. เมื่อคลิ๊กเข้ามาดูรายละเอียดแล้วมันก็จะมีหัวข้อต่างๆโชว์ขึ้นมา โดยถ้ามีหัวข้อ Post นั้นคือ ได้มีการส่งค่าตัวแปรแบบ Method Post ผ่าน ลิ้งค์หรือปุ่มที่เรากดเข้ามา โดยใน หัวข้อ Post ก็จะมีบอกว่า เราได้ส่งค่า หรือตัวแปรอะไรมาบ้าง
Attachments
03.gif
03.gif (14.54 KiB) Viewed 4819 times
Image
User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

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

Post by samsonnaze3 »

6. ถ้าต้องการดู output ก็เข้าไปที่หัวข้อ Response ว่า มันได้มีการส่งค่า output มาเป็นอะไรบ้าง โดยจะแสดงออกมาในรูปแบบ Code
Attachments
04.gif
04.gif (11.29 KiB) Viewed 4819 times
Image
User avatar
samsonnaze3
PHP Hero Member
PHP Hero Member
Posts: 190
Joined: 04/03/2012 1:06 am

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

Post by samsonnaze3 »

7. หรือถ้าต้องการดู output อีกแบบ ให้เข้ามาที่หัวข้อ HTML มะนก็จะแสดง output มาในรูปแบบของ Object ให้เห็นภาพเลยว่า แสดงอะไรออกมาจากการกดปุ่มเมื่อกี้
Attachments
05.gif
05.gif (8.08 KiB) Viewed 4819 times
Image
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 21 guests