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