โหมดอุปกรณ์แบบใหม่สําหรับยุคที่เน้นอุปกรณ์เคลื่อนที่เป็นหลัก
เราเปิดตัวโหมดอุปกรณ์ ซึ่งเป็นวิธีจำลองอุปกรณ์และทำงานร่วมกับการออกแบบที่ตอบสนองตามอุปกรณ์เมื่อประมาณ 1 ปีที่ผ่านมา ตอนนี้ถึงเวลาอัปเกรดครั้งใหญ่ครั้งแรกแล้ว โดยจะเริ่มตั้งแต่ Chrome 49 มีอะไรใหม่บ้าง
อุปกรณ์เคลื่อนที่กำลังกลายเป็นจุดเริ่มต้นในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แม้ว่าก่อนหน้านี้เราจะเสนอวิธีจําลองอุปกรณ์เคลื่อนที่ แต่ค่าเริ่มต้นของการพัฒนาคือเดสก์ท็อป และต้องเปิดการจําลองอุปกรณ์เคลื่อนที่ไว้เสมอ เมื่อการใช้งานเว็บไซต์ในอุปกรณ์เคลื่อนที่มีการใช้งานมากกว่าเดสก์ท็อปในหลายพื้นที่ เราจึงเปลี่ยนตำแหน่งในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ด้วย
มีอะไรใหม่
สิ่งแรกที่สำคัญที่สุดคือ UI ได้รับการปรับปรุงให้มีประสิทธิภาพมากขึ้นและใช้พื้นที่น้อยลงมาก เราคาดว่าโหมดอุปกรณ์แบบใหม่จะกลายเป็นโหมดการพัฒนาหลักสำหรับผู้ใช้ส่วนใหญ่ ดังนั้นการออกแบบที่เรียบง่ายและสะอาดตาซึ่งขยายแถบนําทางหลักของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จึงเป็นสิ่งจําเป็น
ไม้บรรทัดอุปกรณ์การข้ามอย่างรวดเร็วใหม่เหนือการค้นหาสื่อ
นอกจากนี้ เรายังจัดวางวิวพอร์ตไว้ตรงกลางและเพิ่มไม้บรรทัดอุปกรณ์แบบข้ามไปยังส่วนต่างๆ อย่างรวดเร็วที่ด้านบน ซึ่งมีประโยชน์อย่างยิ่งเมื่อออกแบบแบบปรับเปลี่ยนตามพื้นที่โฆษณา โดยจะแสดงขนาดอุปกรณ์ที่พบบ่อยที่สุด
และสุดท้าย ตัวเลือกจํานวนมากจะรวมไว้ด้วยกันหรือซ่อนไว้เบื้องหลังปุ่มเปิด/ปิดเมื่อเป็นไปได้ ตัวเลือกคอมโพสิตใหม่เหล่านี้ช่วยให้คุณสลับระหว่างโหมดต่างๆ ได้ง่ายขึ้นมาก หากต้องการสลับการควบคุมบางอย่างหรือปรับแต่งประสบการณ์การใช้งานแถบเครื่องมือ ให้กดไอคอนเมนู 3 จุดเล็กๆ
ตอบสนองโดยค่าเริ่มต้น
ตอนนี้แถบเครื่องมือ DevTools หลักจะขยายไปทางด้านซ้ายของหน้าต่างเบราว์เซอร์ และมีเครื่องมือที่สำคัญที่สุดในการจําลองอุปกรณ์เคลื่อนที่และเดสก์ท็อปที่หลากหลาย คุณเลือกโหมดการพัฒนาได้ 2 โหมด ดังนี้
- ปรับเปลี่ยนตามอุปกรณ์
- อุปกรณ์ที่เฉพาะเจาะจง
ในทั้ง 2 โหมด วิดเจ็ตดังกล่าวจะอยู่ในหน้าต่างที่ปรับขนาดได้ของตัวเองภายใน Chrome ซึ่งมีข้อดีอย่างมากตรงที่คุณสามารถขยายหน้าต่างเบราว์เซอร์และ DevTools ได้ตามต้องการ และไม่ต้องย้ายหน้าต่างไปมาเมื่อทดสอบหน้าเว็บหลายขนาดและกลับไปกลับมา
อุปกรณ์ที่หลากหลายคือโหมดที่คุณต้องการใช้ในระหว่างการทำซ้ำแบบใช้งานอยู่เพื่อให้มั่นใจว่าเว็บไซต์จะทำงานได้บนอุปกรณ์ทุกประเภท ไม่ใช่แค่อุปกรณ์บางประเภท ในโหมดนี้ แฮนเดิลข้างวิวพอร์ตจะปรับขนาดได้อย่างอิสระ
อุปกรณ์ที่เฉพาะเจาะจงหมายถึงเมื่อคุณเลือกอุปกรณ์ที่เฉพาะเจาะจงและล็อกวิวพอร์ตให้มีขนาดเท่ากับอุปกรณ์นั้น ซึ่งจะมีประโยชน์เมื่อคุณต้องการทำการแก้ไขและปรับแต่งขั้นสุดท้ายสำหรับอุปกรณ์ยอดนิยมบางรุ่นในช่วงใกล้ถึงเวลาเปิดตัว ด้วยเหตุนี้ เราจึงไม่ได้แสดงรายการอุปกรณ์ทุกประเภทในเมนูแบบเลื่อนลง แต่แสดงอุปกรณ์ที่ได้รับความนิยมสูงสุดในปัจจุบัน หากเลือกอุปกรณ์ เราจะพยายามทำให้อุปกรณ์ทำงานใกล้เคียงกับอุปกรณ์จริงมากที่สุด โดยระบบจะจำลองเหตุการณ์การสัมผัส, User Agent, Viewport, แถบเครื่องมือของอุปกรณ์ และ UI (หากมี)
การแก้ไขข้อบกพร่องระยะไกลแบบรวม
การจําลอง แม้จะเป็นวิธีที่ดีที่สุดเท่าที่มี แต่ก็มีขีดจํากัด มีหลายอย่างที่การจําลองทําไม่ได้ในปัจจุบัน เช่น
- ตรวจสอบว่าปุ่มมีขนาดใหญ่พอสำหรับนิ้วโป้งของคุณหรือไม่
- ทดสอบประสิทธิภาพของเว็บไซต์ในโทรศัพท์ที่ช้ากว่า
- แก้ไขข้อบกพร่องและข้อจำกัดแบบสุ่มของอุปกรณ์บางรุ่น
หากต้องการทดสอบสถานการณ์เหล่านี้ทั้งหมดอย่างเพียงพอ คุณต้องทดสอบ ทำงาน และแก้ไขข้อบกพร่องโดยใช้อุปกรณ์จริง
ก่อนหน้านี้ คุณสามารถไปที่ chrome://inspect, เชื่อมต่ออุปกรณ์ผ่าน USB และเปิดเซสชันการแก้ไขข้อบกพร่องจากระยะไกลผ่านเครื่องมือสำหรับนักพัฒนาเว็บ แต่ตอนนี้เราพัฒนาไปอีกขั้นโดยปรับโฉมลักษณะและลักษณะการทํางานของการแก้ไขข้อบกพร่องจากระยะไกล และฝังไว้ในส่วนสําคัญของเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ ตอนนี้คุณสามารถตรวจสอบอุปกรณ์เป็นกล่องโต้ตอบได้โดยตรงในเมนูหลักใหม่แทนที่จะต้องไปยังหน้าอื่น วิธีนี้ทำให้การแก้ไขข้อบกพร่องบนอุปกรณ์จริงเป็นส่วนหนึ่งของเวิร์กโฟลว์ได้ง่ายขึ้นมาก เพียงเสียบโทรศัพท์ก็ไม่ต้องออกจากเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
บ้านหลังใหม่สำหรับการควบคุมการจําลองที่เหลือ
เนื่องจากตอนนี้อุปกรณ์เคลื่อนที่เป็นอุปกรณ์เริ่มต้นในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ฟีเจอร์ต่างๆ เช่น การควบคุมปริมาณเครือข่ายจึงย้ายไปอยู่ในแผงที่เหมาะสม ซึ่งในกรณีนี้คือแผงเครือข่าย
เราได้ย้ายฟีเจอร์บางอย่าง เช่น การจําลองเซ็นเซอร์หรือการตั้งค่าการแสดงผล เช่น การจําลองสื่อสิ่งพิมพ์ ไปยังตําแหน่งที่สอดคล้องกันในลิ้นชัก ฟีเจอร์เพิ่มเติมทั้งหมดจะอยู่ในเมนูหลักใหม่ในส่วน "เครื่องมือเพิ่มเติม"
เราทราบดีว่านี่เป็นการเปลี่ยนแปลงที่สำคัญซึ่งเราทุกคนจะต้องปรับตัว คุณจะดูข้อมูลทั้งหมดเกี่ยวกับโหมดนี้ได้ในเอกสารโหมดอุปกรณ์ที่เพิ่งอัปเดต เรายินดีรับฟังความคิดเห็นจากคุณทาง Twitter หรือหากต้องการใช้ข้อความมากกว่า 140 อักขระ โปรดไปที่เครื่องมือติดตามข้อบกพร่อง (ใช่แล้ว แม้แต่คำขอฟีเจอร์)