การทดสอบการซิงค์บนอุปกรณ์เคลื่อนที่ข้ามอุปกรณ์

เกริ่นนำ

หากคุณเป็นนักพัฒนาเว็บที่กำหนดเป้าหมายไปยังเว็บสำหรับอุปกรณ์ที่หลากหลาย คุณอาจต้องทดสอบเว็บไซต์และแอปในอุปกรณ์และการกำหนดค่าต่างๆ จำนวนมาก การทดสอบแบบพร้อมกันจะช่วยในจุดนี้ และเป็นวิธีที่มีประสิทธิภาพในการโต้ตอบแบบเดียวกันในอุปกรณ์และเบราว์เซอร์ต่างๆ พร้อมกันโดยอัตโนมัติ

การทดสอบพร้อมกันจะช่วยแก้ปัญหา 2 อย่างที่ใช้เวลามากเป็นพิเศษได้ ดังนี้

• การทำให้อุปกรณ์ทั้งหมดซิงค์กับ URL ที่คุณต้องการทดสอบ การโหลดความคิดเห็นเหล่านี้ด้วยตนเองในอุปกรณ์แต่ละเครื่องจึงรวดเร็วเหลือเกิน ใช้เวลานานขึ้น และทำให้พลาดการถดถอยได้ง่ายขึ้น
• การซิงค์การโต้ตอบ ความสามารถในการโหลดหน้าเว็บได้เหมาะอย่างยิ่งสำหรับการทดสอบด้วยภาพ แต่หากต้องการทดสอบการโต้ตอบ คุณควรสามารถซิงค์ข้อมูลการเลื่อน การคลิก และพฤติกรรมอื่นๆ ได้ด้วย

โชคดีที่หากคุณมีสิทธิ์เข้าถึงอุปกรณ์เป้าหมายบางรายการ ก็มีเครื่องมือจำนวนมากที่มุ่งเป้าไปที่การปรับปรุงขั้นตอนจากเดสก์ท็อปไปยังอุปกรณ์เคลื่อนที่ ในบทความนี้ เราจะพูดถึง Ghostlab, Remote Preview, Adobe Edge Inspect และ Grunt

เครื่องมือ

GhostLab (Mac)

Ghostlab เป็นแอปพลิเคชัน Mac เชิงพาณิชย์ ($49) ที่ออกแบบมาเพื่อซิงค์การทดสอบเว็บไซต์และเว็บแอปในอุปกรณ์หลายเครื่อง การตั้งค่าขั้นต่ำนี้จะช่วยให้คุณซิงค์สิ่งต่อไปนี้ได้พร้อมกัน

• คลิก
• การนำทาง
• การเลื่อน
• ข้อมูลที่ป้อน (เช่น แบบฟอร์มเข้าสู่ระบบ การลงชื่อสมัครใช้)

ซึ่งทำให้การทดสอบประสบการณ์ของผู้ใช้จากต้นทางถึงปลายทางของเว็บไซต์ในอุปกรณ์หลายชนิดเป็นเรื่องง่ายมาก เมื่อคุณเปิดหน้าเว็บในเบราว์เซอร์ของอุปกรณ์แล้ว การเปลี่ยนแปลงการนำทาง (รวมถึงการรีเฟรช) จะทำให้อุปกรณ์อื่นๆ ที่เชื่อมต่ออยู่รีเฟรชทันที Ghostlab รองรับการดูไดเรกทอรีในเครื่อง การรีเฟรชนี้ก็จะเกิดขึ้นเมื่อคุณบันทึกการแก้ไขไฟล์ในเครื่องด้วย ซึ่งทำให้ทุกอย่างซิงค์กันอยู่เสมอ!

เราพบว่าการตั้งค่า Ghostlab ไม่ยุ่งยาก ในการเริ่มต้น ให้ดาวน์โหลด ติดตั้ง และเรียกใช้เวอร์ชันทดลองใช้ (หรือเวอร์ชันเต็มถ้าคุณกำลังอยากซื้อ) จากนั้นคุณจะต้องเชื่อมต่อ Mac และอุปกรณ์ที่ต้องการทดสอบกับเครือข่าย Wi-Fi เดียวกันเพื่อให้ค้นพบได้

เมื่อ Ghostlab ทำงาน คุณสามารถคลิก "+" เพื่อเพิ่ม URL สำหรับการทดสอบหรือลาก URL จากแถบที่อยู่ของเบราว์เซอร์ หรือลากโฟลเดอร์ในเครื่องที่คุณต้องการทดสอบไปไว้ในหน้าต่างหลักแล้วระบบจะสร้างรายการเว็บไซต์ใหม่ขึ้นมา สำหรับบทความนี้ ฉันกำลังทดสอบเวอร์ชันจริงของ http://html5rocks.com ; )

จากนั้นคุณสามารถเริ่มต้นเซิร์ฟเวอร์ Ghostlab ใหม่โดยคลิกปุ่ม ">" เล่นข้างชื่อเว็บไซต์ การดำเนินการนี้จะเริ่มต้นเซิร์ฟเวอร์ใหม่ ซึ่งพร้อมใช้งานในที่อยู่ IP เฉพาะสำหรับเครือข่ายของคุณ (เช่น http://192.168.21.43:8080)

ตรงนี้ ฉันได้เชื่อมต่อ Nexus 4 และให้ Chrome สำหรับ Android ไปยังที่อยู่ IP ที่ Ghostlab ให้มา เท่านี้ก็เรียบร้อย Ghostlab ไม่จำเป็นต้องติดตั้ง ไคลเอ็นต์เฉพาะสำหรับแต่ละอุปกรณ์เหมือนโซลูชันอื่นๆ และหมายความว่าคุณสามารถเริ่มการทดสอบได้เร็วยิ่งขึ้น

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

Ghostlab ยังสามารถแสดงสถิติบางอย่างเกี่ยวกับอุปกรณ์ที่เชื่อมต่อ เช่น สตริง UA, ความกว้างและความสูงของวิวพอร์ต, ความหนาแน่นพิกเซลของอุปกรณ์, สัดส่วนภาพ และอื่นๆ คุณสามารถเปลี่ยน URL ฐานที่กําลังตรวจสอบด้วยตนเองได้ทุกเมื่อโดยคลิกเฟืองการตั้งค่าข้างรายการ ซึ่งจะเปิดหน้าต่างการกำหนดค่า ที่มีลักษณะดังต่อไปนี้

ตอนนี้ผมสามารถเลือกอุปกรณ์ที่เชื่อมต่ออื่นๆ ของฉันได้ คลิกลิงก์อื่นรอบๆ HTML5Rocks และการนำทางจะซิงค์กันทั้งบน Chrome บนเดสก์ท็อป (ที่ฉันป้อนใน URL ของ Ghostlab เดียวกัน) และอุปกรณ์ทั้งหมดของฉัน

แต่ที่ดีไปกว่านั้นคือ Ghostlab มีตัวเลือกที่ให้คุณทำพร็อกซีลิงก์ทั้งหมดที่ดำเนินการผ่านเครือข่ายได้ แทนที่จะต้องคลิกบน http://192.168.21.43:8080/www.html5rocks.com ไปยัง www.html5rocks.com/en/performance (ตัวอย่างเช่น) การไปยังโซลูชัน my/link.html อัตโนมัติทั้งหมดจะรีเฟรชโซลูชันอัตโนมัติแบบข้าม

ในการเปิดใช้ ให้เลือก "โหลดเนื้อหาทั้งหมดผ่าน Ghostlab" ในแท็บ "การโหลดเนื้อหา"

ดูตัวอย่างการใช้งานจริง

Ghostlab สามารถโหลดเว็บไซต์หรือหน้าต่างจำนวนเท่าใดก็ได้ในเบราว์เซอร์ที่รองรับ วิธีนี้ไม่เพียงช่วยให้คุณทดสอบเว็บไซต์ที่ความละเอียดต่างกันได้ แต่ยังทดสอบลักษณะการทำงานของโค้ดในเบราว์เซอร์และแพลตฟอร์มต่างๆ ด้วย ไชโย

Ghostlab ช่วยให้คุณกำหนดการตั้งค่าพื้นที่ทำงานของโปรเจ็กต์ที่กำลังแสดงตัวอย่างได้ และระบุได้ว่าต้องการให้ดูและรีเฟรชการเปลี่ยนแปลงไดเรกทอรีหรือไม่เมื่อตรวจพบ ซึ่งหมายความว่าการเปลี่ยนแปลงจะทำให้ ไคลเอ็นต์ที่เชื่อมต่อทั้งหมดรีเฟรช ไม่ต้องรีเฟรชด้วยตนเองอีกต่อไป

คุณอาจสงสัยว่า Ghostlab ช่วยอะไรได้อีกบ้าง แม้จะไม่ใช่มีดสวิสกองทัพ แต่ก็รองรับการตรวจสอบโค้ดจากระยะไกลในอุปกรณ์ที่เชื่อมต่อด้วย การดับเบิลคลิกชื่ออุปกรณ์ผ่านทางอินเทอร์เฟซหลักจะแสดงตัวเลือก "แก้ไขข้อบกพร่อง" ซึ่งจะเปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เวอร์ชันหนึ่งให้คุณลองใช้

ซึ่ง Ghostlab ดำเนินการดังกล่าวได้โดยใช้เครื่องมือตรวจสอบเว็บระยะไกลของ Weinre ที่ให้คุณแก้ไขข้อบกพร่องของสคริปต์และปรับแต่งรูปแบบในอุปกรณ์ที่เชื่อมต่อ คุณเลือกองค์ประกอบ เรียกใช้การสร้างโปรไฟล์ประสิทธิภาพ และสคริปต์การแก้ไขข้อบกพร่องได้เช่นเดียวกับประสบการณ์การแก้ไขข้อบกพร่องระยะไกลใน Chrome สำหรับ Android

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

Adobe Edge Inspect CC (Mac, Windows)

Adobe Edge Inspect เป็นส่วนหนึ่งของแพ็กเกจการสมัครใช้บริการ Adobe Creative Cloud แต่ก็มีช่วงทดลองใช้ฟรีด้วยเช่นกัน ซึ่งช่วยให้คุณขับเคลื่อนอุปกรณ์ iOS และ Android หลายเครื่องได้ด้วย Chrome (ผ่านส่วนขยาย Edge Inspector ของ Chrome) ดังนั้นหากคุณเรียกดู URL หนึ่ง อุปกรณ์ที่เชื่อมต่อทั้งหมดก็จะซิงค์กันอยู่เสมอ

หากต้องการตั้งค่า ก่อนอื่นให้ลงชื่อสมัครใช้บัญชี Adobe Creative Cloud หรือเข้าสู่ระบบบัญชีที่มีอยู่หากมีอยู่แล้ว ต่อไป ให้ดาวน์โหลดและติดตั้ง Edge Inspect จาก Adobe.com (ใช้งานได้สำหรับ Mac และ Windows ในขณะนี้แต่ยังใช้งานบน Linux ไม่ได้ ขออภัย!) โปรดทราบว่าdocsสำหรับ Edge Inspect มีประโยชน์สำหรับไว้ให้พร้อม

เมื่อติดตั้งแล้ว คุณจะต้องรับส่วนขยายการตรวจสอบ Edge สำหรับ Chrome เพื่อซิงค์ข้อมูลการท่องเว็บระหว่างอุปกรณ์ที่เชื่อมต่อ

นอกจากนี้คุณจะต้องติดตั้งไคลเอ็นต์ Edge Inspect ในอุปกรณ์แต่ละเครื่องที่ต้องการซิงค์การทำงานด้วย โชคดีที่เรามีไคลเอ็นต์สำหรับ iOS, Android และ Kindle

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

เริ่มเปิดใช้งาน Edge Inspect บนเดสก์ท็อป, ส่วนขยาย Edge Inspect ใน Chrome จากนั้นจึงเปิดแอปบนอุปกรณ์ของคุณ (ดูด้านล่าง) ดังนี้

ตอนนี้เราสามารถไปยังเว็บไซต์อย่าง HTML5Rocks.com บนเดสก์ท็อป และอุปกรณ์เคลื่อนที่ของเราจะไปยังหน้าเดียวกันโดยอัตโนมัติ

นอกจากนี้ คุณจะเห็นอุปกรณ์ในรายการโดยมีสัญลักษณ์ <> อยู่ข้างๆ ในส่วนขยายตามที่แสดงในภาพหน้าจอด้านล่าง การคลิกนี้จะเปิดอินสแตนซ์ของ Wein ที่ให้คุณตรวจสอบและแก้ไขข้อบกพร่องของหน้าเว็บได้

สัญลักษณ์อยู่ข้างๆ ซึ่งใช้เปิดโปรแกรมแก้ไขข้อบกพร่อง Weinre ได้" width="800" height="549">

Weinre เป็นโปรแกรมดูและคอนโซล DOM และไม่มีฟีเจอร์จากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เช่น การแก้ไขข้อบกพร่อง JavaScript, การทําโปรไฟล์ และ Waterfall เครือข่าย แม้ว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะเป็นเครื่องมือขั้นต่ำเพียงน้อยนิด แต่เครื่องมือนี้มีประโยชน์สำหรับการตรวจสอบความถูกต้องของสถานะ DOM และ JavaScript

นอกจากนี้ ส่วนขยาย Edge Inspect ยังรองรับการสร้างภาพหน้าจอจากอุปกรณ์ที่เชื่อมต่อได้อย่างง่ายดายอีกด้วย มีประโยชน์สำหรับการทดสอบเลย์เอาต์หรือแค่การจับภาพหน้าเว็บของคุณเพื่อแชร์กับผู้อื่น

สำหรับนักพัฒนาแอปที่จ่ายเงินซื้อ CC แล้ว Edge Inspect เป็นโซลูชันที่ยอดเยี่ยม แต่ก็มีคำเตือนบางอย่าง เช่น อุปกรณ์แต่ละเครื่องต้องติดตั้งไคลเอ็นต์เฉพาะ และการดำเนินการตั้งค่าเพิ่มเติมเล็กน้อยที่คุณอาจไม่พบเมื่อใช้ทางเลือกอื่นอย่าง Ghostlab

การแสดงตัวอย่างระยะไกล (Mac, Windows, Linux)

การแสดงตัวอย่างจากระยะไกลเป็นเครื่องมือโอเพนซอร์สที่ฝากหน้า HTML และเนื้อหาซึ่งแสดงในอุปกรณ์หลายเครื่องได้

การแสดงตัวอย่างระยะไกลจะเรียกใช้ XHR ทุกๆ 1100 มิลลิวินาทีเพื่อตรวจสอบว่า URL ในไฟล์การกำหนดค่ามีการเปลี่ยนแปลงหรือไม่ หากพบข้อมูล สคริปต์จะอัปเดตแอตทริบิวต์ src ของ iframe ที่โหลดในหน้าสำหรับอุปกรณ์แต่ละเครื่องและโหลดหน้าเว็บ หากตรวจไม่พบการเปลี่ยนแปลง สคริปต์จะทำโพลต่อไปจนกว่าจะมีการเปลี่ยนแปลง

วิธีนี้เหมาะสำหรับการต่ออุปกรณ์ต่างๆ เข้าด้วยกันและเปลี่ยน URL ให้กับทุกอุปกรณ์ได้อย่างง่ายดาย โดยทำดังนี้

1. ดาวน์โหลดตัวอย่างระยะไกล และย้ายไฟล์ทั้งหมดไปที่เซิร์ฟเวอร์ที่เข้าถึงได้ในเครื่อง ซึ่งอาจเป็น Dropbox เซิร์ฟเวอร์นักพัฒนาซอฟต์แวร์หรือเซิร์ฟเวอร์อื่นๆ
2. โหลด "index.html" จากการดาวน์โหลดนี้ลงในอุปกรณ์เป้าหมายทั้งหมดของคุณ หน้านี้จะใช้เป็นตัวขับและจะโหลดหน้าเว็บที่คุณต้องการทดสอบโดยใช้ iframe
3. แก้ไข "url.txt" (รวมอยู่ในการดาวน์โหลดและตอนนี้แสดงบนเซิร์ฟเวอร์ของคุณแล้ว) ด้วย URL ที่คุณต้องการดูตัวอย่าง บันทึกไฟล์นี้
4. การแสดงตัวอย่างระยะไกลจะสังเกตเห็นว่าไฟล์ url.txt มีการเปลี่ยนแปลงและจะรีเฟรชอุปกรณ์ที่เชื่อมต่อทั้งหมดเพื่อโหลด URL ของคุณ

แม้จะเป็นโซลูชันแนวโลไฟ แต่ Remote Preview เป็นโซลูชันที่ใช้งานได้ฟรีและใช้งานได้จริง

Grunt + การโหลดซ้ำแบบสด (Mac, Windows, Linux)

Grunt (และ Yeoman) เป็นเครื่องมือบรรทัดคำสั่งที่ใช้สำหรับนั่งร้านและสร้างโปรเจ็กต์ส่วนหน้า หากใช้เครื่องมือเหล่านี้อยู่แล้วและตั้งค่าโหลดซ้ำแบบสด คุณจะอัปเดตเวิร์กโฟลว์เพื่อเปิดใช้การทดสอบจากหลายอุปกรณ์ได้ง่ายๆ โดยการเปลี่ยนแปลงแต่ละรายการที่คุณทำในตัวแก้ไขจะทำให้เกิดการโหลดซ้ำในอุปกรณ์ใดก็ตามที่คุณเปิดในเครื่องไว้

คุณอาจคุ้นเคยกับการใช้ grunt server เมื่อเรียกใช้จากไดเรกทอรีรากของโปรเจ็กต์ ระบบจะตรวจสอบการเปลี่ยนแปลงในไฟล์ต้นฉบับและรีเฟรชหน้าต่างเบราว์เซอร์โดยอัตโนมัติ ต้องขอขอบคุณงาน การดูลูกเล่นนี้ที่เราทำในฐานะส่วนหนึ่งของเซิร์ฟเวอร์

หากคุณเคยใช้ Yeoman ร่างโปรเจ็กต์ของคุณมาก่อน โปรเจ็กต์จะสร้าง Gruntfile ซึ่งมีข้อมูลทุกอย่างที่จำเป็นสำหรับการโหลดซ้ำแบบสดบนเดสก์ท็อป คุณเพียงแค่ต้องเปลี่ยนพร็อพเพอร์ตี้ 1 รายการ ซึ่งก็คือ hostname (บนเดสก์ท็อป) เพื่อให้ทำงานได้ในหลายอุปกรณ์ ซึ่งควรระบุไว้ใน connect หากคุณสังเกตเห็นว่าตั้งค่า hostname เป็น localhost ให้เปลี่ยนเป็น 0.0.0.0 จากนั้นเรียกใช้ grunt server และตามปกติ หน้าต่างใหม่ควรจะเปิดขึ้นเพื่อแสดงตัวอย่างหน้าเว็บของคุณ URL อาจมีลักษณะเป็น http://localhost:9000 (9000 คือพอร์ต)

เริ่มการทำงานของแท็บหรือเทอร์มินัลใหม่ แล้วใช้ ipconfig | grep inet เพื่อค้นหา IP ภายในของระบบ ซึ่งอาจดูเหมือน 192.168.32.20 ขั้นตอนสุดท้ายคือการเปิดเบราว์เซอร์ เช่น Chrome บนอุปกรณ์ที่คุณต้องการซิงค์ข้อมูล Livereload นี้และพิมพ์ที่อยู่ IP แล้วตามด้วยหมายเลขพอร์ตจากก่อนหน้านี้ ซึ่งได้แก่ 192.169.32.20:9000

เท่านี้ก็เรียบร้อย ในตอนนี้ การโหลดซ้ำแบบสดจะทำให้การแก้ไขที่คุณทำกับไฟล์ต้นฉบับบนเดสก์ท็อปทริกเกอร์การโหลดซ้ำทั้งในเบราว์เซอร์บนเดสก์ท็อปและเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ยอดเยี่ยม

Yeoman ยังมีโปรแกรมสร้างสำหรับอุปกรณ์เคลื่อนที่ซึ่งช่วยให้ตั้งค่าเวิร์กโฟลว์นี้ได้อย่างง่ายดาย

เอ็มเม็ตไลฟ์สไตล์

Emmet LiveStyle เป็นปลั๊กอินเบราว์เซอร์และปลั๊กอินสำหรับแก้ไขที่นำการแก้ไข CSS แบบสดมาใช้กับเวิร์กโฟลว์การพัฒนา ขณะนี้โปรแกรมนี้ใช้งานได้กับ Chrome, Safari และ Sublime Text และรองรับการแก้ไขแบบ 2 ทิศทาง (เครื่องมือแก้ไขเบราว์เซอร์และกลับกัน)

Emmet LiveStyle ไม่บังคับให้รีเฟรชเบราว์เซอร์โดยสมบูรณ์เมื่อคุณทำการเปลี่ยนแปลง แต่จะพุชการแก้ไข CSS ผ่านโปรโตคอลการแก้ไขข้อบกพร่องระยะไกลของ DevTools แทน ซึ่งหมายความว่าคุณสามารถดูการเปลี่ยนแปลงที่ทำในเครื่องมือแก้ไขเดสก์ท็อปใน Chrome เวอร์ชันใดก็ได้ที่เชื่อมต่อ ไม่ว่าจะเป็น Chrome บนเดสก์ท็อปหรือ Chrome สำหรับ Android

LiveStyle มีสิ่งที่เรียกว่า "โหมดหลายมุมมอง" ซึ่งเหมาะสำหรับการทดสอบและปรับแต่งการออกแบบที่ตอบสนองตามอุปกรณ์ในหน้าต่างและอุปกรณ์ ในโหมดหลายมุมมอง การอัปเดตเครื่องมือแก้ไขทั้งหมดจะมีผลกับหน้าต่างทั้งหมด เช่นเดียวกับการอัปเดตเครื่องมือสำหรับนักพัฒนาเว็บในหน้าเดียวกัน

เมื่อติดตั้งแพ็กเกจ LiveStyle แล้ว หากต้องการเริ่มต้นแก้ไข CSS แบบเรียลไทม์ ให้ทำดังนี้

1. เริ่มใช้ Sublime Text และเปิดไฟล์ CSS ในโปรเจ็กต์
2. เปิด Chrome และไปที่หน้าที่มี CSS ที่ต้องการแก้ไข
3. เปิดเครื่องมือสำหรับนักพัฒนาเว็บและไปที่แผง LiveStyle เลือกตัวเลือก "เปิดใช้ LiveStyle" หมายเหตุ: คุณต้องเปิดเครื่องมือสำหรับนักพัฒนาเว็บไว้ระหว่างเซสชันการแก้ไขแบบเรียลไทม์สำหรับแต่ละหน้าต่างเพื่อให้การอัปเดตสไตล์มีผล
4. เมื่อเปิดใช้ตัวเลือกนี้ รายการสไตล์ชีตจะปรากฏทางด้านซ้าย และแสดงรายการไฟล์ตัวแก้ไขทางด้านขวา เลือกไฟล์ตัวแก้ไขที่ จะเชื่อมโยงกับเบราว์เซอร์ เท่านี้ก็เรียบร้อย บูม

ตอนนี้รายการไฟล์ตัวแก้ไขจะได้รับการอัปเดตโดยอัตโนมัติเมื่อคุณแก้ไข สร้าง เปิด หรือปิดไฟล์

บทสรุป

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

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

ปัญหา

ปัญหาใหญ่ที่สุดที่ผมพบระหว่างการทดสอบด้วยเครื่องมือเหล่านี้อาจเป็นปัญหา ของอุปกรณ์ที่เข้าสู่โหมดสลีปเป็นประจำ นี่ไม่ใช่การทำลายข้อตกลง แต่เมื่อผ่านไปสักระยะ จะน่ารำคาญ คุณควรตั้งค่าอุปกรณ์ให้เป็นวิธีแก้ปัญหาชั่วคราวทุกครั้งที่เป็นไปได้ แต่โปรดทราบว่าวิธีนี้อาจทำให้แบตเตอรี่หมดเร็ว เว้นแต่คุณจะเสียบปลั๊กไว้ตลอดเวลา

โดยส่วนตัวแล้วผมไม่พบปัญหาใหญ่ใดๆ กับ GhostLab ด้วยราคา $49 บางคนอาจเห็นว่าราคาสูงไปหน่อย อย่างไรก็ตาม โปรดทราบว่าหากคุณใช้ราคานี้เป็นประจำอยู่แล้ว ราคานั้นอาจแพงมากหรือน้อยต่างกันไป สิ่งหนึ่งที่ยอดเยี่ยมที่สุดเกี่ยวกับการตั้งค่าคือไม่ต้องกังวลเกี่ยวกับการติดตั้งและการจัดการไคลเอ็นต์ตามอุปกรณ์เป้าหมาย URL เดียวกันใช้งานได้ในทุกที่

Adobe Edge Inspect ทำให้ผมพบว่าต้องติดตั้งและใช้ไคลเอ็นต์เฉพาะบนแต่ละอุปกรณ์จนน่าเบื่อหน่าย และผมพบว่าระบบไม่ได้รีเฟรชไคลเอ็นต์ทั้งหมดที่เชื่อมต่ออยู่อย่างสม่ำเสมอ ซึ่งหมายความว่าผมต้องดำเนินการจากส่วนขยาย Chrome ด้วยตนเอง นอกจากนี้ยังต้องมีการสมัครใช้บริการ Creative Cloud และมีการจำกัดให้โหลดเว็บไซต์ในไคลเอ็นต์แทนที่จะโหลดในเบราว์เซอร์ที่เลือกไว้ในอุปกรณ์ สิ่งนี้อาจจำกัดความสามารถในการทดสอบอย่างแม่นยำ

การแสดงตัวอย่างระยะไกลทำงานเหมือนกับที่โฆษณาไว้ แต่มีน้ำหนักเบามาก ซึ่งหมายความว่าสำหรับสิ่งอื่นๆ ที่นอกเหนือจากการรีเฟรชเว็บไซต์ในอุปกรณ์ต่างๆ คุณจะต้องใช้ตัวเลือกเครื่องมือขั้นสูงกว่านั้น เช่น การซิงค์การคลิกหรือการเลื่อน

การแนะนำวิดีโอ

หากคุณกำลังมองหาโซลูชันข้ามแพลตฟอร์มฟรีเพื่อเริ่มต้น เราขอแนะนำให้ใช้การแสดงตัวอย่างจากระยะไกล สำหรับผู้ที่ทำงานในบริษัทที่กำลังมองหาโซลูชันแบบเสียเงิน GhostLab เป็นโซลูชันที่ยอดเยี่ยมตลอดมา แต่สำหรับ Mac เท่านั้น สำหรับผู้ใช้ Windows Adobe Edge Inspect เป็นโปรแกรมที่ดีที่สุดและการลบแปลกๆ บางอย่างก็ช่วยได้มาก

นอกจากนี้ Grunt และ LiveStyle ยังช่วยเพิ่มประสิทธิภาพให้กับการถ่ายทอดสด ของคุณในช่วงการพัฒนาได้ด้วย