การพัฒนา Web ในสมัยนี้ ถ้าจะว่าด้วยเรื่องรูปร่างหน้าตา เพรียวบาง สดสวยขนาดไหน ก็คงไม่พ้นภาษาหลักอย่าง CSS ไปได้แล้วล่ะครับ
ซึ่งการเขียน CSS นั้น เราก็จะใช้พวก Text Editor เขียนขึ้นมาใช้งานใน Website จะเขียนแบบ inline หรือ external stylesheet ก็ตามแต่สะดวก
หากแต่ว่าขั้นตอนที่เขียน -> save -> ทดสอบ มันก็กินเวลาและขั้นตอนหลายช่วง เห็นด้วยไหมครับ?
หรือว่าผ่านไปเจอ web งามๆ แล้วใคร่รู้อยากจะดูเทคนิคที่เขาทำ จะได้นำมาศึกษาต่อใช่ไหม?
อย่างนั้นคุณก็ต้องมีเครื่องมือเพิ่มเติมแล้วล่ะ คนทั่วไปเรียกเครื่องมือชนิดนี้ว่า Debugging Tool ซึ่งจะติดมากับ Web Browser รุ่นใหม่ๆ หรืออยู่ในรูปแบบของ Plugin ที่ต้อง download มาติดตั้ง
แต่ติดตั้งแล้ว เวลาใช้งานนี้เรียกได้ว่าคุ้มค่าจริงๆ
ว่าแล้วมาดูกันดีกว่าครับ ว่าทั้ง 4 ตัวมีอะไรบ้าง
1. Google Chrome Developer Tool
เจ้าแรกนี้กำลังตีตื้นขึ้นมาชิงบัลลังก์ Web Browser ที่คนทั่วโลกนิยมใช้มากที่สุดจาก IE อย่างต่อเนื่อง ก็ปฎิเสธไม่ได้เพราะด้วยความง่าย และรูปลักษณ์ในการใช้งานที่น่าประทับใจ รวมถึงการอัพเกรดเวอร์ชั่นใหม่ๆ อย่างต่อเนื่อง น่าจะทำให้คุณโหลดมาทดลองใช้กัน
แต่นอกเหนือจากที่กล่าวไปแล้ว Developer และ Designer น่าจะชอบใจกับ ส่วนการใช้งานที่เรียกว่า Developer Tool ที่ติดมากับตัว Web browser ไม่จำเป็นต้อง download มาติดตั้งเพิ่มเติมแต่ประการใด
บน Windows สามารถเปิดได้จาก Menu bar ด้านบนหรือกด Ctrl – Shift – I หรือ Ctrl – Shift – J เพื่อเปิดใช้งาน Developer Tool
ส่วนบน Mac ให้ใช้ ⌥⌘I (Command – Option – I) หรือ ⌥⌘J (Command – Option – J) ครับ
ว่าแล้วก็ไป download มาใช้กันได้เลย ฟรีไม่เสียเงินครับ
2. Firebug for Mozilla Firefox
โด่งดังและเป็นที่รู้จักกันดีในวงการ Web Developer และ Designer เจ้า Firebug นี้เป็น plug-in ที่คุณต้อง download มาติดตั้งบน Web Browser ที่ชื่อว่า Firefox (หรือที่ชาวไทยอย่างพวกเราเรียกกันเล่นๆ ว่าน้องหมาไฟ) อีกทีหนึง แต่ไม่เสียเงินเช่นกับ Chrome
พอติดตั้งเรียบร้อยแล้วก็สามารถเปิดขึ้นมาใช้งานได้เลยครับ สนใจจะลองก็ต้องทำการ download และติดตั้ง Mozilla Firefox ในเคร่ืองให้เรียบร้อยก่อน จากนั้นก็เข้าไปติดตั้ง Firebug ในส่วนของ Add-on ก็เป็นอันเสร็จพิธี
3. Internet Explorer’s Developer Tool
ขาใหญ่อย่างยักษ์ใหญ่ตัว e สีฟ้า ก็ไม่พลาดที่จะฝัง Debugging Tool มากับ IE เวอร์ชั่นใหม่ตั้งแต่เวอร์ชั่น 9 เป็นต้นมา โดยการใช้งานก็แสนจะง่าย
สนใจลองก็สามารถเข้าไป download Internet Explorer ที่ตีตราตั้งแต่เวอร์ชั่น 9 ขึ้นไปมาลองใช้งานบน Windows ของคุณได้แล้วครับ
4. Opera’s Dragon Fly
สำหรับ web browser ตัวเล็กๆ แต่แอบจี๊ดสะใจในหลายๆ ด้านตัวนี้ ก็มี Debugging Tool อย่างพี่ๆ เขาเหมือนกัน เครื่องมือตัวนี้มีชื่อว่า Dragon Fly (ภาษาไทยก็แมลงปอนี่แหละครับ) มีความสามารถเทียบชั้นกับ Debugging Tool ใน Browser ตัวอื่นได้สบายๆ ครับ
สามารถไป download Opera web browser มาติดตั้งได้โดยการคลิกที่นี่ ก็เรียบร้อย สามารถเปิด Dragon Fly ขึ้นมาใช้งานแล้วครับ
มีอะไรเพิ่มเติมไหม?
ก่อนที่คุณจะไปสนุกสุขสันต์กับ Debugging Tool ใน Browser ตัวโปรดของคุณ ก็ขอบอกว่าการใช้งาน Debugging Tool นั้นมีความสนุกสุนแสน มากกว่ายุคก่อนหน้าที่เราไม่มีเครื่องมือดีๆ แบบนี้มาใช้งานกัน ในยุคก่อนหน้านี้ เราชาว Web developer และ designer ต่างก็ต้องกด save file, switch ไปที่ browser แล้วก็กด refresh กลับไปกลับมาอย่างนี้ ซึ่งวุ่นวายกว่ามาก
ฉะนั้นจงดื่มด่ำกับสิ่งที่เทคโนโลยีสมัยใหม่นำมาให้อย่างมีความสุขครับ
บทความนี้ถูกโพสขึ้นครั้งแรกที่ http://nextflow.in.th/2012/faster-web-design-with-css-debugging-tool/tool/