การพัฒนาสำหรับอุปกรณ์เคลื่อนที่ควรจะง่ายพอๆ กับการพัฒนาสำหรับเดสก์ท็อป เราทำงานกันอย่างหนักในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อทำให้สิ่งต่างๆ ง่ายขึ้นสำหรับคุณ และได้เวลาเปิดตัวฟีเจอร์ใหม่บางอย่างที่จะช่วยปรับปรุงการพัฒนาเว็บบนอุปกรณ์เคลื่อนที่ของคุณให้ดีขึ้นได้อย่างมาก อย่างแรกคือ การแก้ไขข้อบกพร่องจากระยะไกล จากนั้นเราจะเปิดตัวการจำลองอุปกรณ์เคลื่อนที่ที่เหมาะสม
Screencast หน้าจออุปกรณ์ไปยังเดสก์ท็อป
ก่อนหน้านี้ ขณะแก้ไขข้อบกพร่องจากระยะไกล คุณจะต้องเปลี่ยนสายตาไปมาระหว่างอุปกรณ์กับเครื่องมือสำหรับนักพัฒนาเว็บ ตอนนี้ 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 มีอัลกอริทึมการปรับขนาดข้อความอัตโนมัติที่ซับซ้อน และจริงๆ แล้วอุปกรณ์แต่ละเครื่องจะมี "ปัจจัยฟัดจ์" เฉพาะสำหรับการปรับขนาดข้อความอัตโนมัติที่ทำการเปลี่ยนแปลงเพื่อช่วยให้ข้อความอ่านได้ง่าย ในโหมดการจำลอง คุณสามารถยืนยันได้ว่ามีการใช้ลักษณะการทำงานนี้และดูผลลัพธ์
อัตราส่วนพิกเซลของอุปกรณ์
ที่ผ่านมา การดูว่าอุปกรณ์แบบ Hi-DPI แสดงผลในอุปกรณ์ที่มี DPI ต่ำนั้นแทบจะเป็นไปไม่ได้เลย ตอนนี้การจำลอง 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 เพื่อดูเอกสารฉบับเต็มเกี่ยวกับ Mobile Emulation ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ
ข้อมูลประชากร
หากต้องการดูการสาธิตการใช้งานฟีเจอร์เหล่านี้ทั้งหมดในการใช้งานจริง โปรดดูการพูดคุย 23 นาทีของฉันจาก Chrome Dev Summit เกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บสำหรับอุปกรณ์เคลื่อนที่