Firebug Lite Joomla plugin
ตอนเริ่มทำเทมเพลตใหม่ ๆ ส่วนใหญ่ผมใช้ table ในคุมวัตถุ จัดหน้าเว็บ มันก็เป็นวิธีการง่าย ๆ และได้ผลดีในระดับหนึ่ง แต่ในความง่าย ก็ต้องแลกมาซึ่งการขาดความยืดหยุ่นในการใช้งาน...
ระยะหลัง ๆ เริ่มหันมาใช้ div tag หรือที่เรียกกันว่า tabless ในการสร้างเทมเพลตแทน แน่นอนว่าความยืดหยุ่นในการใช้งาน การปรับแต่งเว็บมีสูงมาก ๆ ยิ่งเมื่อได้ใช้ร่วมกับ จูมล่า แล้วเห็นผลอย่างชัดเจน
ปัญหา...
ความที่บราวเซอร์แต่ละค่าย ต่างก็ช่วงชิงความยิ่งใหญ่เลยทำให้การแสดงผล เทมเพลตผิดเพี้ยนไปหมด ปัญหานี้น่าหนักใจสำหรับคนทำเว็บมาก ๆ ยิ่งหากอยู่บนระบบปฎิบัติการวินโดวส์ด้วยแล้ว ไม่มีอะไร ที่ดี และ ฟรี เลยสักอย่าง...
และแน่นอนว่าไอ้เจ้าตัวปัญหาส่วนใหญ่มันอยู่ที่การแสดงผลของ Internet Explorer ที่ไม่เคยเหมือนชาวบ้านชาวเมืองเขา เอาเสียเลย พูดก็พูดเถอะแม้แต่ไอ้ตัวเดียวกัน แต่ต่างรุ่นกัน การแสดงผลออกมาไม่เหมือนกัน เละเป็นโจ๊ก ได้นั่งปวดหัวอยู่กับมันเสมอ ๆ
ใน Firefox เหล่าคนทำเว็บต่างมีความสุขกับการใช้ Firebug ในการดีบั๊กโค้ดไม่ว่าจะเป็น html , php , css หรือแม้กระทั่ง javascript เรียกว่ามันเป็นเครื่องมือในฝันเลยก็ว่าได้ และสิ่งที่ดีสุด ๆ ของ Firefox + Firebug คือ ฟรี ย้ำอีกครั้งครับ ฟรี
ด้วยความที่ส่วนแบ่งการใช้งาน Internet Explorer ยังอยู่ในระดับที่สูงมาก จึงหลีกเลี่ยงไม่ได้ที่ต้องทำให้มันแสดงผลหน้าเว็บให้เหมือนชาวบ้านเขา ในเบื้องต้นผมใช้วิธีการนั่งแก้เป็นจุด ๆ ไป ทำนาน ๆ เข้าก็เริ่มถอดใจ เพราะว่า มันยากกกกกกกก เหลือจะทน
ในที่สุดก็ได้เครื่องมือในฝันกลับมา.... มันคือ ... Firebug Lite
Firebug Lite เป็น javascript ที่ช่วยให้เราสามารถดีบั๊กโค้ดผ่านทางหน้าเว็บเพจได้ คราวนี้ ทำให้เราสะดวกโยธินไปเลย งานของผมง่ายขึ้นอีกจม...
วิธีการใช้ Firebug Lite ก็ง่าย ๆ ครับ คือ ติด javascript เข้าไปในส่วนใดก็ได้ของหน้าเว็บที่เราต้องการดีบั๊ก เมื่อเรียกหน้าเว็บขึ้นมาจะมีหน้าต่างที่เรียกว่า console ปรากฎอยู่ด้านล่าง เราจะสามารถเห็นการแสดงผลของ html , css และ javascript ได้อย่างง่ายดายผ่านทาง console นี้ ตัวอย่างการเรียกใช้โค้ด
แต่หมู่นี้ผมชักจะแก้ไขเทมเพลตถี่ขึ้น ความขี้เกียจและเบื่อหน่ายเริ่มมาเยือน... เลยคิดใหม่ ทำใหม่
ทำไมเราไม่เขียนเป็น ปลักอิน สำหรับจูมล่าไปเลยหล่ะ ดูใน extensions.joomla.org ก็ยังไม่มีใครทำเสียด้วยว่าแล้วก็เริ่มบรรเลงครับ ในที่สุดก็ได้ออกมา...
แต่นแต้นนนนนน !!!!!! ตื่นเต้นกันหน่อยครับพี่น้อง....
หลังจากติดตั้งปลักอันแล้ว ก็ไปจัดการมันก่อน
เข้าไปยัง administrator คลิกที่ ส่วนขยาย -> การจัดการปลั๊กอิน
เปิดการใช้งานปลั๊กอิน Krupong Firebug Lite ตั้งชื่อปลั๊กอินเป็นเกียรติประวัติของตัวเอง
คลิกเข้าไปตั้งค่า โดยรูปหมายเลข 1 เปิดใช้งาน ส่วนหมายเลข 2 จะใช้ปลั๊กอินแบบ Online หรือ Offline ความแตกต่างของทั้งสองตัวนี้ จะอยู่ที่หากเลือก Offline ตัวปลั๊กอินจะดึงเอา Firebug Lite รุ่น 1.2 ที่ผมแถมมาให้แล้วมาใช้ ส่วนถ้าเลือกแบบออนไลน์ ปลั๊กอินจะเรียกใช้งานจากเว็บไซต์หลักของ Firebug Lite เอง ซึ่งจะทำให้คุณได้ใช้ Firebug Lite รุ่นใหม่สุดเสมอ ส่วนอีกตัวเลือกหนึ่งคือ การตั้งค่าความสูงของ console ผมตั้งไว้ที่ 200 เพราะหน้าจอผมสูงแค่ 600 เท่านั้น
เมื่อเปิดการใช้งานแล้ว พอแสดงหน้าเว็บก็จะได้หน้าต่าง console มารอเราอยู่ด้านล่าง จากนี้ไปก็สามารถใช้ Inspector ในการเลื่อนดู DOM ใน เว็บเพจแล้วครับ...
ระบบที่ผมใช้ทดสอบคือ IE 6 , IE 7 , Opera , Konqueror ส่วน Firefox ใช้ Firebug ตัวจริง เนียนกว่าครับ
สนใจดาวน์โหลดมาลองได้ที่นี่
ระยะหลัง ๆ เริ่มหันมาใช้ div tag หรือที่เรียกกันว่า tabless ในการสร้างเทมเพลตแทน แน่นอนว่าความยืดหยุ่นในการใช้งาน การปรับแต่งเว็บมีสูงมาก ๆ ยิ่งเมื่อได้ใช้ร่วมกับ จูมล่า แล้วเห็นผลอย่างชัดเจน
ปัญหา...
ความที่บราวเซอร์แต่ละค่าย ต่างก็ช่วงชิงความยิ่งใหญ่เลยทำให้การแสดงผล เทมเพลตผิดเพี้ยนไปหมด ปัญหานี้น่าหนักใจสำหรับคนทำเว็บมาก ๆ ยิ่งหากอยู่บนระบบปฎิบัติการวินโดวส์ด้วยแล้ว ไม่มีอะไร ที่ดี และ ฟรี เลยสักอย่าง...
และแน่นอนว่าไอ้เจ้าตัวปัญหาส่วนใหญ่มันอยู่ที่การแสดงผลของ Internet Explorer ที่ไม่เคยเหมือนชาวบ้านชาวเมืองเขา เอาเสียเลย พูดก็พูดเถอะแม้แต่ไอ้ตัวเดียวกัน แต่ต่างรุ่นกัน การแสดงผลออกมาไม่เหมือนกัน เละเป็นโจ๊ก ได้นั่งปวดหัวอยู่กับมันเสมอ ๆ
ใน Firefox เหล่าคนทำเว็บต่างมีความสุขกับการใช้ Firebug ในการดีบั๊กโค้ดไม่ว่าจะเป็น html , php , css หรือแม้กระทั่ง javascript เรียกว่ามันเป็นเครื่องมือในฝันเลยก็ว่าได้ และสิ่งที่ดีสุด ๆ ของ Firefox + Firebug คือ ฟรี ย้ำอีกครั้งครับ ฟรี
ด้วยความที่ส่วนแบ่งการใช้งาน Internet Explorer ยังอยู่ในระดับที่สูงมาก จึงหลีกเลี่ยงไม่ได้ที่ต้องทำให้มันแสดงผลหน้าเว็บให้เหมือนชาวบ้านเขา ในเบื้องต้นผมใช้วิธีการนั่งแก้เป็นจุด ๆ ไป ทำนาน ๆ เข้าก็เริ่มถอดใจ เพราะว่า มันยากกกกกกกก เหลือจะทน
ในที่สุดก็ได้เครื่องมือในฝันกลับมา.... มันคือ ... Firebug Lite
Firebug Lite เป็น javascript ที่ช่วยให้เราสามารถดีบั๊กโค้ดผ่านทางหน้าเว็บเพจได้ คราวนี้ ทำให้เราสะดวกโยธินไปเลย งานของผมง่ายขึ้นอีกจม...
วิธีการใช้ Firebug Lite ก็ง่าย ๆ ครับ คือ ติด javascript เข้าไปในส่วนใดก็ได้ของหน้าเว็บที่เราต้องการดีบั๊ก เมื่อเรียกหน้าเว็บขึ้นมาจะมีหน้าต่างที่เรียกว่า console ปรากฎอยู่ด้านล่าง เราจะสามารถเห็นการแสดงผลของ html , css และ javascript ได้อย่างง่ายดายผ่านทาง console นี้ ตัวอย่างการเรียกใช้โค้ด
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'>
</script>
หลังจากพบวิธีการนำ Firebug มาใช้กับ Internet Explorer แล้ว ก็ใช้มาโดยตลอด ซึ่งวิธีการที่ผมนำมาใช้กับจูมล่าส่วนใหญ่คือแปะไว้กับ index.php ของ เทมเพลตที่ต้องการดีบั๊ก...ง่ายดีครับ...
แต่หมู่นี้ผมชักจะแก้ไขเทมเพลตถี่ขึ้น ความขี้เกียจและเบื่อหน่ายเริ่มมาเยือน... เลยคิดใหม่ ทำใหม่
ทำไมเราไม่เขียนเป็น ปลักอิน สำหรับจูมล่าไปเลยหล่ะ ดูใน extensions.joomla.org ก็ยังไม่มีใครทำเสียด้วยว่าแล้วก็เริ่มบรรเลงครับ ในที่สุดก็ได้ออกมา...
แต่นแต้นนนนนน !!!!!! ตื่นเต้นกันหน่อยครับพี่น้อง....
หลังจากติดตั้งปลักอันแล้ว ก็ไปจัดการมันก่อน
เข้าไปยัง administrator คลิกที่ ส่วนขยาย -> การจัดการปลั๊กอิน
 |
เปิดการใช้งานปลั๊กอิน Krupong Firebug Lite ตั้งชื่อปลั๊กอินเป็นเกียรติประวัติของตัวเอง
 |
 |
เมื่อเปิดการใช้งานแล้ว พอแสดงหน้าเว็บก็จะได้หน้าต่าง console มารอเราอยู่ด้านล่าง จากนี้ไปก็สามารถใช้ Inspector ในการเลื่อนดู DOM ใน เว็บเพจแล้วครับ...
 |
ระบบที่ผมใช้ทดสอบคือ IE 6 , IE 7 , Opera , Konqueror ส่วน Firefox ใช้ Firebug ตัวจริง เนียนกว่าครับ
สนใจดาวน์โหลดมาลองได้ที่นี่
http://www.surin3.net/kp/Downloads/krupongfirebuglite-1.0-beta-1.tar.gz
ความคิดเห็น