ผู้ช่วยมือขวา ของคนทำเว็บ กับ firebug

ผู้ช่วยมือขวา ของคนทำเว็บ กับ firebug

เวลาที่เราเปิดเว็บเพื่อรัน แล้วหน้าเว็บมันเบี้ยวๆ จะรู้ได้อย่างไร ว่าโค้ดส่วนไหนที่มันทำให้เบี้ยว ยิ่งยุคใหม่ด้วยแล้ว จัดการแสดงผลด้วย CSS เวลาเบี้ยวนี้มึนตึ้บเลย เพราะไม่รู้ว่า selector ตัวไหนมันทับกันตรงไหนอย่างไร แต่แค่มี firebug เราสามารถรู้ได้ในเวลา 2 วินาที เชื่อหรือเปล่า.... หรือว่าเวลาที่รูปไม่ขึ้นก็ตาม ทำไมรูปถึงไม่ขึ้น ก็รู้ได้ใน 2 วิอีกเช่นกัน... หรือกรณีที่เขียน AJAX สั่งให้มันส่งค่าไปแล้ว แต่ว่าทุกอย่างยังคงนิ่ง ไม่รู้ว่าเกิดปัญหาจากตอนส่ง หรือตอนรับกลับ หรือตอนประมวลผล แต่ ใช้ firebug ก็รู้ได้ใน 2 วิ เชื่อหรือเปล่า ไม่เชื่อลองอ่านดูครับ เดี๋ยวจะหาว่าโม้

Firebug คือ add on ตัวหนึ่งของ firefox browser ดังนั้นแล้ว คนจะใช้ firebug ก็เลยจำเป็นต้องติดตั้ง firefox ก่อนด้วย เพราะว่ามันจะทำงานคู่กัน คือเปิดหน้าเว็บด้วย firefox แล้วก็รัน firebug ได้เลยนั่นเอง

จริงๆ firebug ยังมีใน google chrome ด้วยนะ (รู้รึเปล่า) แต่ว่าใน version chrome เป็นตัว lite ความสามารถยังไม่เทียบเท่า firefox ในระดับต้นฉบับ

ตอนนี้ถือว่าทุกคนได้ติดตั้ง firebug เป็นที่เรียบร้อยแล้วนะครับ ถ้ายัง ก็จิ้มที่นี่เลย  http://getfirebug.com/

วิธีการใช้แสนง่าย เพียงแค่คลิก รูป แมลง ที่มุมขวามือ ด้านล่างของ firefox  ก็จะเป็นการเปิด firebug ขึ้นมาเพื่อทำงานแล้ว ถ้าจะให้ดีหากเป็นการเปิดการทำงานหลังจากที่เรารันหน้าเว็บนั้นไปแล้ว ก็ให้กด refresh หน้าเว็บนั้น 1 ที โดยไม่ต้องปิด firebug เพื่อให้ firebug สามารถเก็บข้อมูลของหน้าเว็บนั้นๆได้ตั้งแต่ตอนโหลดเลยครับ

firebug

เราจะมาเริ่มใช้งาน ด้วย tab ที่ใช้บ่อยที่สุด คือ tab Net โดยเมื่อคลิกครั้งแรก ไม่ต้องตกใจ เพราะ Net panel is disable นะครับ เพราะว่าเป็น default อยู่แล้ว เราก็แค่คลิกที่ลูกษรชี้ลง แล้วกด Enable เท่านั้นเอง เราก็จะได้เป็นดังนี้ (ทุก tab จะ enable ด้วยวิธีการเดียวกันหมดครับ)

firebug net tab

firebug area tab

จะเห็นว่ามันว่างๆอยู่ ลองเปิดเว็บอะไรก็ได้ดูครับ โดยตลอดตัวอย่างนี้ผมจะเปิดหน้าเว็บ meewebfree.com เพื่ออธิบายโดยตลอดนะครับ จะได้เข้าใจตรงกัน เมื่อเปิดเว็บก็จะเห็นว่า มันจะโชว์อะไรขึ้นมาเยอะเลย

firebug file list

โดยเราจะเห็นว่า สิ่งที่มันแสดงขึ้นมาก็คือ หน้าเว็บนั้นๆ ได้เรียกโหลดไฟล์อะไรเข้ามาบ้าง และ สถานะ http เป็นอย่าง (200,304,404,500) และเรียกมาจากโดเมนไหน ขนาดเท่าไร ใช้เวลาโหลดเท่าไร (และเวลาใช้ไปกับอะไรบ้าง)

firebug show download object

เมื่อเราคลิกบวกใน แต่ละ item ลงมาเราก็จะเห็น detail เพิ่มขึ้น ซึ่งสำหรับมือใหม่อาจจะมองว่ามันไม่จำเป็นเลย แต่สำหรับมือเก่าถือว่าเป็นข้อมูลที่ครบถ้วนเลยทีเดียว เพราะว่าทำให้เห็น http header ด้วย ว่ามีการ request / response เป็นอย่างไร มีอะไรผิดปกติตรงไหนบ้างหรือเปล่า  และอีก tab ย่อยก็คือ tab response ที่เอามาช่วยเรา debug ได้ เพราะว่าหลายครั้ง มันได้ output ออกมาไม่ตรงตามที่เราเขียนก็มีครับ (ส่วนใหญ่เป็นเพราะแก้ผิดไฟล์ 5555 ไล่หาตั้งนานทำไม มันได้ผลลัพท์ไม่ตรงตามที่เราเขียน)

จริงๆแค่ tab นี้ก็ถือว่าเกือบครึ่งนึงของ main feature แล้วครับ เพราะว่าได้ใช้กันบ่อยจริงๆ แล้วเวลาที่รูปไม่ขึ้น มันจะแสดงเป็นสีแดงให้เห็นเด่นชัดเลย ว่ามีอะไร error แล้วเราก็เอาเม้าส์ชี้ๆ หรือจิ้มดูได้ว่ามัน error เพราะว่าอะไร path เราเขียนผิดหรือเปล่า หรือว่าเขียนถูกแต่ดันอ้างอิงผิดที่เป็นต้น อันนี้จะเจอกรณีหลายครั้ง เวลาที่เรียกภาพเข้าไปใน flash แล้วมันไม่แสดง หากเราไม่มีเครื่องมือนี้ อาจจะคิดว่า flash เขียนผิด แต่เมื่อไล่ดูแล้วกลับพบเลย ว่าอ้างอิง path รูปผิด  หรือยังไม่มีรูปนั้นจริง ก็แค่เอารูปมาใส่ มันก็ทำงานต่อได้ทันที ถือว่า work มาก ในการใช้ debug ส่วน frontend

firebug 404 not found

อีก 1 hilight ที่สำคัญที่เป็น main feature อีกตัวหนึ่งก็คือตัว Inspector ถือว่าได้ใช้กันบ่อยมาก เพราะว่าเวลาที่เราอยากจะรู้ว่าหน้าเว็บตำแหน่งนั้น มันมีโค้ดเป็นอย่างไร ทั้งส่วน HTML และ CSS เราก็เอา inspector ไปชี้จับเอาออกมาได้เลย ง่ายจริงๆ

firebug inspector

จากตัวอย่างจะเห็นเลย ว่าโค้ดตรงหัวเว็บผมเขียนเป็น tag a href ธรรมดา และก็มี CSS กำกับเอาไว้แบบนั้น พร้อมทั้งถ้าดูดีๆ จะเห็นว่าด้านขวามือของ CSS บอกไว้ด้วยว่าเป็นค่า CSS ที่มาจากไฟล์ไหน ละเอียดมั้ยล่ะครับ เวลาที่วางโครงสร้างเว็บ ได้ใช้กันบ่อยมาก ถึงมากที่สุดเลยทีเดียว

firebug inspector element

ส่วน inspector นี้ มันบอกอะไรเราได้เยอะกว่านี้มากครับ บางครั้ง เวลาที่หน้าเว็บเปลี่ยนไปจาก javascript ถ้าเรา view source เราจะไม่เห็นค่าหลังจากที่ javascript เปลี่ยน แต่เจ้า firebug นี่เห็นเลย ว่าจุดไหนมีโค้ดอย่างไร แล้วถ้ามีการเปลี่ยนค่าจากคำสั่งของ javascript ก็จะเห็นแบบ real time เลยด้วยเจ๋งมั้ยครับ

ยังไม่เพียงแค่นั้นนะครับ ด้านขวามือที่เป็นส่วนของ CSS เรายังสามารถปรับปรุงค่า parameter ได้เองด้วย ง่ายๆแค่คลิกขวา หรือจะลบออก เพิ่มเติมอะไรก็ยังได้ เอาให้มันส์มือกันเลยทีเดียว แต่เค้าไม่ได้ให้มีไว้เล่นสนุกหรอกครับ เค้าก็แค่มีไว้ให้เราลองใส่ค่าที่ทำให้หน้าเว็บออกมาสวยงามเพื่อจะได้เอาค่านั้นกลับไปใส่ใน CSS ต่อไปครับ

firebug real time edit css

มาอีก 1 tab ที่คนส่วนใหญ่ไม่ค่อยได้ใช้ ก็คือ console โดย tab นี้ จะมีผลโดยตรงกับ javascript ครับ เพราะว่ามันเอาไว้รัน javascript นั่นเอง โดย ซึ่งหากต้องการแสดงค่าอะไร ก็เรียกออกมาจากตรงนี้ได้เลย หรือรันคำสั่งตามที่ต้องการที่ตรงนี้ได้เลย ง่ายจริงๆ และนอกเหนือจากนี้หากเราเขียน javascript syntax ไม่ถูกต้อง เมื่อเวลาที่รัน มันก็จะมาแสดง error ตัวแดงในนี้ทันที นั่นแปลว่า เราเขียนบางอย่างใน javascript ไม่ถูกต้องแล้ว

ตัวอย่างนี้ผมลองพิมพ์คำสั่ง alert($("#logo>h2>a").html()) ในช่อง command ข้างล่าง ก็จะได้ pop up alert ของ javascript เป็นคำว่า เพื่อคนทำเว็บ โดยผมอาศัยคำสั่ง javascript ในส่วนของ jquery ในการอ้างอิง object เพื่อดึงค่าออกมาครับ

firebug get element from javascript console

แค่นั้นยังสนุกน้อยไป เรายังสามารถเปลี่ยนแปลงค่าที่อยู่หน้าเว็บได้อีกต่างหาก ด้วยการ ใส่คำสั่ง $("#logo>h2>a").html("รักเธอที่สุด") เท่านี้ header หน้าเว็บผมก็เปลี่ยนไปเลยซะอย่างนั้น

firebug console javascript

อ่ะ สงสัยจะฮากันมาพอเพียงแล้ว ต่อจากนี้ก็ถึงเวลาใช้งาน ของทุกท่านแล้วครับ แล้วจะเข้าใจ ว่าทำไมผมต้องมีติดตัว

Create: Modify : 2010-10-18 10:39:59 Read : 8972 URL :