ดูวิธีที่เครื่องมือสำหรับนักพัฒนาเว็บก้าวเข้าสู่โลกอุปกรณ์เคลื่อนที่เป็นอันดับแรกด้วยโหมดอุปกรณ์ใหม่ที่มีประสิทธิภาพยิ่งขึ้นซึ่งเปิดใช้อยู่เสมอ ใช้ปุ่มสีเพื่อเพิ่มสีลงในตัวเลือกอย่างรวดเร็วและดูสิ่งที่จะมีใน DevTools เร็วๆ นี้
ภาพรวมในอนาคตของการเขียน
เราเพิ่งกลับมาจากงาน Chrome Dev Summit ซึ่งได้บอกให้คุณเห็นว่าการทำงานกับเครื่องมือสำหรับนักพัฒนาเว็บเป็นอย่างไรในปัจจุบันและอนาคต ปกติแล้วฉันจะไม่ได้พูดถึงฟีเจอร์ใดๆ ที่ยังอยู่ระหว่างการทดสอบหรือพัฒนาอย่างมากในสรุปเนื้อหาฉบับนี้ แต่ในครั้งนี้ฉันจะมีข้อยกเว้น หากคุณไม่มีเวลาดูการสนทนาทั้งหมด สรุปได้ดังนี้
โหมดอุปกรณ์เวอร์ชัน 2
เรากำลังพัฒนาโหมดอุปกรณ์ใหม่ที่มีความโดดเด่นอย่างต่อเนื่อง แต่ต้องการให้ทุกคนมีโอกาสได้ลองใช้ เราจึงเปิดใช้ใน Canary ของคุณในวันนี้ การเปลี่ยนแปลงนี้เป็นการผลักดันเครื่องมือสำหรับนักพัฒนาเว็บให้มุ่งสู่อนาคตที่อุปกรณ์เคลื่อนที่เป็นหลักโดยที่การพัฒนาบนอุปกรณ์เคลื่อนที่เป็นค่าเริ่มต้น และการพัฒนาบนเดสก์ท็อปเป็น "ส่วนเสริม" ในอีก 2-3 สัปดาห์ข้างหน้า เราจะขยายบล็อกโพสต์เมื่อพัฒนาเสร็จเรียบร้อยแล้ว
การตรวจสอบภาพเคลื่อนไหวที่มีประสิทธิภาพ
การตรวจสอบภาพเคลื่อนไหวที่อยู่ระหว่างดำเนินการจะแสดงภาพรวมโดยละเอียดว่าเกิดอะไรขึ้นกับสิ่งใดก็ตามที่เคลื่อนไหว แทนที่จะแสดงการเปลี่ยนทีละองค์ประกอบ เราจึงเพิ่มการเรียนรู้ที่จัดกลุ่มภาพเคลื่อนไหวที่ซับซ้อนเพื่อให้คุณโฟกัสกับสิ่งที่เห็นได้ทั้งหมด ดูวิดีโอ เราจะนำเสนอบล็อกโพสต์แบบเดี่ยวๆ ที่มีขนาดใหญ่ขึ้นเมื่อเปิดตัวอย่างเต็มรูปแบบ
โหมดเลย์เอาต์ (ดูตัวอย่าง)
โหมดนี้ยังไม่พร้อมเปิดตัว แต่ที่น่าสนใจมากๆ คือ โหมดเลย์เอาต์ใหม่ ฟีเจอร์ที่ผมอยากเห็นอย่างเต็มรูปแบบ โหมดเลย์เอาต์จะเพิ่มความสามารถในการแก้ไขแบบ WYSIWYG ไปยังเครื่องมือสำหรับนักพัฒนาเว็บสำหรับองค์ประกอบใดก็ตามบนหน้า ปัจจุบันคุณสามารถแก้ไขความสูง ความกว้าง ระยะห่างจากขอบ และระยะขอบในบริบทได้ อาจใช้เวลานานกว่าเล็กน้อยจนกว่าเราจะพร้อมให้คุณลองใช้ แต่เราจะคอยอัปเดตให้คุณทราบอยู่เสมอ
การปรับโปรไฟล์ประสิทธิภาพด้วยแผงไทม์ไลน์ที่อัปเดตใหม่
ในการผลักดันครั้งใหญ่ให้เปิดตัวโมเดลประสิทธิภาพของ RAIL รูปแบบใหม่ เราได้ทำการเปลี่ยนแปลงที่เล็กน้อยและสำคัญขึ้นอีกหลายร้อยรายการในแผงไทม์ไลน์ จึงได้ร่วมกันเปลี่ยนแปลงและปรับปรุงเรื่องราวในโปรไฟล์ประสิทธิภาพไปบ้างเล็กน้อย ดังนั้น แทนที่จะแสดงการเปลี่ยนแปลงทุกอย่างแยกทีละส่วน คุณพอล ไอริช ของเราเองก็แสดงวิธีแก้ไขข้อบกพร่องประสิทธิภาพของเว็บไซต์อย่างเหมาะสม ซึ่งในกรณีนี้เว็บไซต์ในอุปกรณ์เคลื่อนที่อย่าง Hotel Tonight ได้แสดงบนเวที ฟีเจอร์ที่ประกาศใหม่อย่างเร็วๆ นี้ ได้แก่ แถบโหลดและแถบฟิล์มการแสดง Waterfall ของเครือข่ายที่รวม สรุปมุมมองต้นไม้ และความสามารถในการดูต้นทุนการแสดงผลตามโดเมนและไฟล์
เพิ่มสีพื้นหน้าและสีพื้นหลังให้องค์ประกอบใดก็ได้อย่างง่ายดาย
เมื่อใดก็ตามที่คุณต้องการเพิ่มคุณสมบัติสีพื้นหลังหรือสีให้กับองค์ประกอบของคุณ คุณไม่สามารถเปิดตัวเลือกสีได้ แต่คนส่วนใหญ่มักจะพิมพ์อะไรบางอย่าง เช่น "พื้นหลัง: สีแดง" ทุกครั้งเพื่อให้ไอคอนตัวเลือกสีปรากฏขึ้น จากนั้นเลือกสีจริงที่ต้องการ
เราคิดว่าเราน่าจะทำให้เรื่องนี้ง่ายขึ้น เราได้เพิ่มปุ่มที่น่าสนใจ 2 ปุ่มซึ่งจะปรากฏขึ้นเมื่อวางเมาส์เหนือมุมขวาล่างของตัวเลือก ซึ่งช่วยให้คุณเพิ่มสีและเรียกเครื่องมือเลือกได้ด้วยการคลิกเพียงครั้งเดียว ดังนี้
เยี่ยมยอดที่สุด
- เราสูญเสียทรัพย์สินเก่าไปมากมายในแผง "รูปแบบ" โดยการแสดงประเภทสื่อทั่วไป ตอนนี้เราซ่อนสิ่งเหล่านั้นไว้หน้าตัวเลือกของคุณหากเห็นว่าไม่ปกติ
- ตอนนี้คุณวางเมาส์เหนือตัวเลือก CSS ค้างไว้ในแผงรูปแบบเพื่อดูจำนวนองค์ประกอบในหน้าเว็บที่ใช้กับตัวเลือกนั้นได้
- ยังไม่ต้องหยุดพิมพ์ใช่ไหม โปรแกรมจำลองสื่อสิ่งพิมพ์ยังคงอยู่เพื่อดูว่าหน้าจะมีลักษณะอย่างไรเมื่อพิมพ์ เราแค่ย้ายหน้านั้นไปยังการตั้งค่าการแสดงผล
- เมื่อเลือกองค์ประกอบที่จะตรวจสอบ ตอนนี้เราจะขยายและปิดแผนผังย่อย DOM ที่เกี่ยวข้องโดยอัตโนมัติ อธิบายได้ยากว่า การมองเห็นคือจะเชื่อ
และเช่นเคย แจ้งให้เราทราบว่าคุณคิดอย่างไรผ่าน Twitter หรือความคิดเห็นด้านล่าง และส่งข้อบกพร่องไปที่ crbug.com/new
แล้วพบกันอีกเดือนหน้า
Paul Bakaus และทีมเครื่องมือสำหรับนักพัฒนาเว็บ