BrowserSync ความเหนือชั้นอีกหนึ่งขั้นสำหรับเหล่านักพัฒนาเว็บไซต์

มาทำความรู้จักกับ BrowserSync เครื่องมือสำหรับนักพัฒนาเว็บไซต์ที่ต้องมีติดไว้ ด้วยฟีเจอร์ที่จะทำให้การพัฒนาเว็บไซต์ของเพื่อนๆ เร็วขึ้นอีกหนึ่งขั้น ใครที่กำลังสร้างเว็บไซต์ responsive อยู่ต้องนำไปใช้ให้ไวครับ ประหยัดเวลาของเราไปได้เยอะเลย ^^

BrowserSync เป็น Open Source (Apache 2.0 License) ที่พัฒนาบน Node.js ทำให้สามารถทำงานได้บน Windows, Mac OS และ Linux และสามารถทำงานร่วมกับ Task runner อย่าง Gulp, Grunt หรือโปรเจ็คที่พัฒนาด้วย Node.js อื่นๆ ได้

browser-sync-screen-shot

ฟังก์ชันเด่น

browsersync-features

Network Throttle สามารถปรับความเร็วของอินเทอร์เน็ตได้ ที่ทำให้เราได้เห็นลักษณะการทำงานของเว็บไซต์ในช่วงความเร็วระดับต่างๆ (เน็ตเร็ว เน็ตช้า จะมีผลยังไง)

Interaction Sync ไม่ว่าจะเป็นการคลิก, เลื่อน scroll, กรอกฟอร์ม, refresh หน้าเว็บที่เกิดขึ้นจะถูก sync ไปทุก browser ที่เปิดอยู่ ฟังก์ชันนี้จะช่วยให้ประหยัดเวลาของเราในการเทส cross-browsers ได้เป็นอย่างดี ไม่ต้องเสียเวลาคลิกหรือกรอกข้อมูลทีละ device เปิดขึ้นมาให้หมดแล้วก็เทสพร้อมๆ กันไปเลย

File Sync จะช่วยอัพเดทไฟล์ที่มีการแก้ไขให้โดยอัตโนมัติ คล้ายกับ livereload แต่ที่แตกต่างออกไปคือ ไฟล์ที่เป็น images, css จะถูกพ้นเข้าไปใน browser ใหม่ ไม่ต้องมีการ refresh หน้าเว็บใหม่

UI or CLI control สามารถตั้งค่าคอนฟิกต่างๆ ได้ผ่าน UI หรือถ้าใครสะดวกที่จะตั้งค่าผ่าน command-line ก็มีให้นะ ^^

Sync customisation สามารถเลือกที่จะ sync อะไรบ้าง (click, scroll, form action) เพื่อให้เหมาะกับลักษณะของ environment

URL history เก็บประวัติของแต่ละ url เพื่อให้เข้าเทสได้ใหม่อีกครั้งได้ง่ายขึ้น

ขอให้มีความสุขกับการพัฒนาเว็บไซต์ด้วยเครื่องมือดีๆ อย่างนี้ครับ ^^