การพัฒนาสำหรับมือถือควรทำได้ง่ายพอๆ กับการพัฒนาสำหรับเดสก์ท็อป เราทำงานอย่างหนักในเครื่องมือสำหรับนักพัฒนาเว็บใน 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 จะรักษาอัลกอริทึมการปรับขนาดข้อความอัตโนมัติที่ซับซ้อน และอันที่จริงแล้ว อุปกรณ์แต่ละเครื่องมี "ปัจจัยที่ทำให้เกิดการเหวี่ยง" เฉพาะสำหรับการปรับขนาดข้อความอัตโนมัติ ซึ่งการเปลี่ยนแปลงนั้นช่วยให้ข้อความอ่านออกได้ง่าย ในโหมดการจำลอง คุณจะยืนยันได้ว่ามีการใช้ลักษณะการทํางานนี้และดูผลลัพธ์
อัตราส่วนพิกเซลของอุปกรณ์
ปัจจุบันนี้ แทบจะเป็นไปไม่ได้เลยที่อุปกรณ์ 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+เลื่อนเพื่อซูมเนื้อหา คุณจะเห็นมุมมองที่ยอดเยี่ยมของการปรับขนาดเนื้อหานอกวิวพอร์ต
สุดท้าย การสแตนด์บายเกี่ยวกับการปลอมแปลง Useragent (ทั้งในระดับส่วนหัวของคำขอและระดับ window.navigator), การจำลองตำแหน่งทางภูมิศาสตร์ และการวางแนวจะช่วยให้คุณสำรวจฟังก์ชันการทำงานทั้งหมดของอุปกรณ์ได้
ค่าที่กำหนดล่วงหน้าของอุปกรณ์
ค่าที่กำหนดล่วงหน้าของการจำลองช่วยให้คุณเลือกโทรศัพท์หรือแท็บเล็ต และรับขนาดหน้าจอที่ถูกต้อง dPR, UA ที่ใช้กับอุปกรณ์นั้น รวมถึงเหตุการณ์การสัมผัสแบบเต็มและการจำลองวิวพอร์ตด้วย คุณสามารถลองใช้ค่าที่กำหนดล่วงหน้าหรือปรับเปลี่ยนลักษณะเหล่านี้ทีละรายการได้อย่างง่ายดาย
โปรดไปที่ devtools.chrome.com เพื่อดูเอกสารฉบับเต็มเกี่ยวกับการจำลองอุปกรณ์เคลื่อนที่ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ
ข้อมูลประชากร
หากต้องการดูการสาธิตการใช้งานฟีเจอร์เหล่านี้ทั้งหมดอย่างเต็มรูปแบบ โปรดดูการบรรยาย 23 นาทีของฉันจาก Chrome Dev Summit เกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บสำหรับอุปกรณ์เคลื่อนที่