Adobe Browser Lab | Cross Browsers Check Online

ก่อนส่งท้ายปีเก่า มีบริการดี ๆ สำหรับผู้พัฒนาเว็บไซต์ (Web Developer) และนักออกแบบเว็บไซต์ (Web Designer) เนื่องจากการเปิดหน้าเว็บที่ละที่นั้นจำเป็นต้องเปิดผ่าน Browser ซึ่งเจ้า Browser นี่แหละเป็นตัวปัญหาถือว่าเป็นอุปสรรคลำดับต้น ๆ ในการพัฒนาเว็บเพื่อให้แสดงผลได้อย่างถูกต้อง ซึ่งแต่ละ Browser นั้นจะมีมาตรฐานของตัวเองทำให้เมื่อเปิดเว็บเดียวกันผ่าน Browser ต่างกันแล้ว จะแสดงผลไม่ตรงกัน ซึ่งเราจะเจอปัญหาบ่อย ๆ ใน IE (Internet Explorer) ในเวอร์ชั่นก่อน ๆ ปัจจุบันทางไมโครซอฟท์กำลังเปิดให้ทดสอบ IE9 อยู่

จริง ๆ แล้ว Browser มีมากมายหลักสิบจนถึงเป็นร้อย แต่หลัก ๆ ที่ผมจะกล่าวถึงก็คือ IE, Safari, Firefox เท่านั้น

โดยส่วนใหญ่นักออกแบบเว็บไซต์มันจะเขียนหน้าเว็บโดยใช้ Style Sheet เป็นตัวกำหนดการแสดงผลของหน้าเว็บใดเว็บหนึ่ง ในขณะที่กำลังพัฒนาอยู่นั้น จำเป็นต้องมีตัวทดสอบหรือ Browser ทุกตัวที่สำคัญไว้ในเครื่องของตัวเอง ซึ่งเป็นการยากที่จะลงหลาย ๆ Browser ในเครื่องเดียว แถม Browser เดียวกัน เวอร์ชั่นเดียวกัน แต่ต่างกันแค่ OS ก็ให้ผลลัพธ์ที่แตกต่างกันราวฟ้ากะดิน

ฉะนั้นปัญหานี้ผมได้ค้นพบทางสว่างเมื่อเร็ว ๆ นี้ สืบเนื่องมาเพราะว่า Safari ในเครื่อง PC กับ เครื่อง Mac มันแสดงผลไม่ตรงกัน ผมจึงพบบริการของทาง Adobe ซึ่งเป็นประโยชน์มากมายมหาศาล ผมจึงอยากจะแนะนำบริการให้เพื่อน ๆ นักพัฒนา บริการนั้นก็คือ “Adobe Browser Lab”

1. ก่อนอื่น เข้าไปที่ เว็บผู้ให้บริการ “Adobe Browser Lab”

Adobe Browser Lab | How to Use

Adobe Browser Lab | How to Use

2. เข้าไปสมัครสมาชิกและทำการ Activate จากอีเมล์ที่เขาส่งมาให้เราจากนั้นก็มาหน้า Login ได้เลย

Adobe Browser Lab | Login

Adobe Browser Lab | Login

3. เข้าไปด้านในก็เข้าไปที่ Browser Sets เพื่อทำการตั้งค่า ตัว Browser ที่เราอยากจะทำการ Test และยังสามารถตั้งเป็น Group ของตัวเองเพื่อนำมาให้ได้ในภายภาคหน้าด้วย

Adobe Browser Lab |Browser Sets

Adobe Browser Lab |Browser Sets

4. จากนั้นก็ไปที่เมนู Test แล้วทำการใส่ URL ที่จะทดสอบได้เลย ตอนนี้กำลังรอผล

Adobe Browser Lab | Processing

Adobe Browser Lab | Processing

5. เราสามารถจัดหน้าตาการเปรียบเทียบระหว่าง 2 Browser ได้ โดยไปที่เมนู View ซึ่งค่าปกติจะแสดงเฉพาะ Browser อันเดียว

Adobe Browser Lab | View

Adobe Browser Lab | View

6. อันนี้หน้าต่างแบบเปรียบเทียบ 2 Browser อันนี้คือ Firefox 3.0 ของเครื่องแมค กับของ Windows

Adobe Browser Lab | Browser Test

Adobe Browser Lab | Browser Test

7. อันนี้เป็นแบบดี Onion คือเอามาวางทาบกันดูตำแหน่งเลยจะได้รู้ว่ามีตำแหน่งที่คคลาดเคลื่อนไปกี่ pixel (แต่จริง ๆ ไม่ต้องถึงขนาดนี้ก็ได้ เพี้ยนนิดหน่อยก็ไม่เป็นไร)

Adobe Browser Lab | Onion

Adobe Browser Lab | Onion

8. อันนี้ตั้งให้แสดงไม้บรรทัดแล้วลากเส้นซ้ายขวาเพื่อดูตำแหน่ง จะได้ไปปรับระยะห่างของ Element แต่ละอันได้ถูกต้อง

Adobe Browser Lab | Ruler

Adobe Browser Lab | Ruler

พอทราบข้อบกพร่องของการแสดงผลในแต่ละ Browser แล้วไซร้ ขอให้ท่านจัดการ Hack Browser กันได้ตามอัธยาศัยเลย หุหุ

Peter

ไม่ยอมแพ้ต่อโชคชะตา และเชื่อว่า "เราเลือกเกิดไม่ได้ แต่เราเลือกที่จะทำดีได้" ปัจจุบันทำงานสาย Digital Marketing และ E-commerce ชอบท่องเที่ยวเพื่อหาประสบการณ์และอยากแบ่งปันความรู้ในกะลาของตนเองแก่ชาวโลก ขอบคุณทุกท่านที่เข้ามาเยี่ยมชม Blog เล็ก ๆ แห่งนี้

More Posts - Website