การพัฒนาสำหรับอุปกรณ์เคลื่อนที่ควรทำได้ง่ายไม่แพ้การพัฒนาสำหรับเดสก์ท็อป เราทํางานอย่างหนักในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome เพื่อให้คุณทําสิ่งต่างๆ ได้ง่ายขึ้น และตอนนี้ถึงเวลาเปิดตัวฟีเจอร์ใหม่ๆ ที่จะช่วยพัฒนาเว็บบนอุปกรณ์เคลื่อนที่ของคุณให้ดียิ่งขึ้นอย่างเห็นได้ชัด ขั้นแรกคือการแก้ไขข้อบกพร่องจากระยะไกล จากนั้นเราจะเปิดตัวการจําลองอุปกรณ์เคลื่อนที่ที่เหมาะสม
สตรีมหน้าจออุปกรณ์ไปยังเดสก์ท็อป
ก่อนหน้านี้ ขณะแก้ไขข้อบกพร่องจากระยะไกล คุณต้องสลับไปมาระหว่างอุปกรณ์กับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ตอนนี้ Screencast จะแสดงหน้าจอของอุปกรณ์ควบคู่ไปกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ การได้เห็นข้อมูลก็ดีแล้ว แต่การโต้ตอบกับข้อมูลนั้นยิ่งดีไปกว่านั้น
- การคลิกใน Screencast จะเปลี่ยนเป็นการแตะ และระบบจะเรียกเหตุการณ์การแตะที่เหมาะสมในอุปกรณ์
- ตรวจสอบองค์ประกอบในอุปกรณ์ด้วยเคอร์เซอร์บนเดสก์ท็อป
- พิมพ์บนแป้นพิมพ์เดสก์ท็อป โดยระบบจะส่งการกดแป้นพิมพ์ทั้งหมดไปยังอุปกรณ์ ช่วยประหยัดเวลาได้อย่างมากเมื่อเทียบกับการพิมพ์ด้วยนิ้วโป้ง
- เลื่อนหน้าเว็บโดยการปัดด้วยเคอร์เซอร์หรือเพียงแค่เลื่อนบนแทร็กแพดของแล็ปท็อป
เอกสารประกอบฉบับเต็มเกี่ยวกับการแคสต์หน้าจอจะอธิบายข้อมูลทั้งหมดนี้และอีกมากมาย เช่น การส่งท่าทางสัมผัสการซูม ต้องมี Chrome บน Android เบต้า (m32)
การแก้ไขข้อบกพร่องจากระยะไกลที่ง่ายดาย
เมื่อ 18 เดือนที่ผ่านมา Chrome ได้เปิดตัวการแก้ไขข้อบกพร่องระยะไกลที่เหมาะสมสำหรับเบราว์เซอร์ WebKit แต่หากคุณลองใช้เมื่อตอนนั้น คุณจะต้องดาวน์โหลด Android SDK ขนาด 400 MB, เพิ่มไบนารี adb ลงใน $PATH และท่องคาถาบรรทัดคำสั่งอันศักดิ์สิทธิ์
ตอนนี้เรายินดีที่จะแจ้งให้ทราบว่าคุณไม่ต้องกังวลเกี่ยวกับเรื่องเหล่านั้นอีกต่อไป ตอนนี้ Chrome สามารถค้นพบและสื่อสารกับอุปกรณ์ที่เชื่อมต่อ USB ได้โดยกำเนิด เราได้ติดตั้งใช้งานโปรโตคอล adb ผ่าน USB ใน Chrome โดยตรงแล้ว คุณจึงไปที่ Menu > Tools > Inspect Devices และเริ่มเซสชันการแก้ไขข้อบกพร่องระยะไกลได้ทันที
วิธีนี้ใช้ได้กับทุกแพลตฟอร์ม รวมถึง Chrome OS แต่โปรดทราบว่าใน Windows คุณจะต้องติดตั้งไดรเวอร์ USB ที่เหมาะสมก่อนเพื่อสื่อสารกับอุปกรณ์ หากไม่เคยลองใช้มาก่อน คุณจะต้องเปิดใช้การแก้ไขข้อบกพร่องผ่าน USB ในอุปกรณ์และยืนยันว่าใช้ Chrome สำหรับ Android รุ่นเบต้า อ่านเอกสารฉบับเต็ม
การกําหนดค่าการโอนพอร์ตสําหรับโปรเจ็กต์ในเครื่อง
คุณกําลังพัฒนาใน localhost:8000 แต่โทรศัพท์เข้าถึงไม่ได้ เราจึงเพิ่มการส่งต่อพอร์ตลงในเวิร์กโฟลว์การแก้ไขข้อบกพร่องระยะไกลโดยตรง ตอนนี้คุณทำงานกับโปรเจ็กต์ทั้งหมดได้ง่ายๆ โดยไม่ต้องใช้วิธีแก้ปัญหาการเจาะอุโมงค์ ใน about:inspect ให้คลิก "การส่งต่อพอร์ต" เพื่อตั้งค่าพอร์ตที่ต้องการให้พร้อมใช้งาน พอร์ตจะสว่างเป็นสีเขียวหากพร้อมใช้งาน
การจําลองอุปกรณ์เคลื่อนที่
คุณอาจไม่มีอุปกรณ์ที่ต้องการทดสอบความเข้ากันได้เสมอไป แม้ว่าการแก้ไขข้อบกพร่องระยะไกลบนอุปกรณ์จริงจะให้ความรู้สึกที่ดีที่สุดเกี่ยวกับประสิทธิภาพและการสัมผัส แต่ตอนนี้คุณสามารถจําลองลักษณะของอุปกรณ์จํานวนมากบนเดสก์ท็อปได้อย่างสมจริง ซึ่งจะช่วยประหยัดเวลาและทําให้ลูปการทําซ้ำเร็วขึ้นมาก
จําลองขนาดหน้าจอ, devicePixelRatio และ <meta viewport> ด้วยการจําลองเหตุการณ์การสัมผัสแบบเต็ม
หากคุณเคยเห็นฟีเจอร์เมตริกอุปกรณ์เวอร์ชันเก่า ฟีเจอร์ที่พร้อมใช้งานในตอนนี้ถือเป็นการอัปเกรดครั้งใหญ่ ทีมทํางานอย่างหนักเพื่อให้การจําลองอุปกรณ์เคลื่อนที่แบบใหม่แสดงภาพที่คุณจะเห็นในอุปกรณ์จริงได้อย่างใกล้เคียงกับความเป็นจริง ตัวอย่างเช่น เบราว์เซอร์ WebKit มีอัลกอริทึมการปรับขนาดข้อความอัตโนมัติที่ซับซ้อน และอุปกรณ์แต่ละเครื่องมี "ปัจจัยการปรับเปลี่ยน" ที่เฉพาะเจาะจงสำหรับการปรับขนาดข้อความอัตโนมัติที่เปลี่ยนแปลงไปเพื่อช่วยให้ข้อความอ่านได้ง่าย ในโหมดการจําลอง คุณสามารถยืนยันได้ว่ามีการใช้ลักษณะการทํางานนี้อยู่และดูผลลัพธ์
อัตราส่วนพิกเซลของอุปกรณ์
ก่อนหน้านี้ แทบจะดูไม่ได้เลยว่าอุปกรณ์ที่มีความละเอียดสูงแสดงผลอย่างไรบนอุปกรณ์ที่มีความละเอียดต่ำ ตอนนี้การจําลอง dPR ในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์จะปรับมุมมองเพื่อให้คุณซูมไปยังสถานการณ์ DPI แบบละเอียดได้ นอกจากนี้ window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) และอื่นๆ จะแสดงการตั้งค่าของคุณ ซึ่งจะช่วยให้คุณดูวิธีที่แอปปรับตัว รวมถึงการโหลดชิ้นงานสำหรับ dpi ที่ต่างกันได้
การจําลองอุปกรณ์ไม่ได้ครอบคลุมถึงฟีเจอร์หรือข้อบกพร่องของเบราว์เซอร์ ดังนั้นขณะที่จำลอง iOS อยู่ WebGL จะยังคงทำงานและคุณจะไม่พบข้อบกพร่องการซูมการวางแนวของ iOS 5 หากต้องการสัมผัสประสบการณ์ความหลากหลายดังกล่าว ให้ไปที่อุปกรณ์
การจําลอง <meta viewport> (และ @viewport) อย่างเหมาะสม
การทดสอบลักษณะการทํางานของ width=device-width และ minimum-scale:1.0 ก่อนหน้านี้เป็นเกมในอุปกรณ์เท่านั้น ตอนนี้คุณสามารถลองใช้วิวพอร์ตต่างๆ ได้อย่างรวดเร็วและดูวิธีแสดงผลของวิวพอร์ตเหล่านั้น
การจําลองเหตุการณ์การสัมผัส
การตั้งค่าจําลองหน้าจอสัมผัสจะช่วยให้ระบบตีความการคลิกของคุณเป็น touchstart และอื่นๆ นอกจากนี้ เหตุการณ์สังเคราะห์ เช่น การซูม เลื่อน และเลื่อนดู จะใช้ได้ หากต้องการซูมเข้า ให้ใช้ shift+ลากหรือ shift+เลื่อนเพื่อซูมเข้าเนื้อหา คุณจะเห็นมุมมองที่ยอดเยี่ยมของการปรับขนาดเนื้อหาที่เกินขอบเขตวิวพอร์ต
สุดท้าย การสแปม User Agent (ทั้งในส่วนหัวของคำขอและระดับ window.navigator) ตำแหน่งทางภูมิศาสตร์ และการจําลองการวางแนวช่วยให้คุณสำรวจฟังก์ชันการทํางานทั้งหมดของอุปกรณ์ได้
การตั้งค่าล่วงหน้าของอุปกรณ์
การตั้งค่าการจําลองล่วงหน้าช่วยให้คุณเลือกโทรศัพท์หรือแท็บเล็ตและรับขนาดหน้าจอที่ถูกต้อง, dPR, UA ที่นําไปใช้กับอุปกรณ์นั้น รวมถึงเหตุการณ์การแตะแบบเต็มและวิดเจ็ตที่จำลองด้วย คุณสามารถลองใช้ค่าที่กำหนดล่วงหน้าหรือปรับแต่งลักษณะเหล่านี้ทีละรายการได้อย่างง่ายดาย
ไปที่ devtools.chrome.com เพื่อดูเอกสารฉบับเต็มเกี่ยวกับการจําลองอุปกรณ์เคลื่อนที่ด้วย DevTools
สาธิต
หากต้องการดูการสาธิตฟีเจอร์ทั้งหมดเหล่านี้ในการใช้งานจริง โปรดดูการบรรยายความยาว 23 นาทีจาก Chrome Dev Summit เกี่ยวกับ DevTools สําหรับอุปกรณ์เคลื่อนที่