อีเมลสรุปสำหรับ DevTools (รุ่น CDS): ภาพรวมเกี่ยวกับอนาคตและการจัดทำ RAIL

พอล บากาอุส
พอล บากาอุส

เรียนรู้วิธีที่เครื่องมือสำหรับนักพัฒนาเว็บจะเข้าสู่อุปกรณ์เคลื่อนที่เป็นอันดับแรกด้วยโหมดอุปกรณ์ใหม่ที่มีประสิทธิภาพมากขึ้นซึ่งเปิดใช้อยู่เสมอ ใช้ปุ่มสีเพื่อเพิ่มสีลงในตัวเลือกอย่างรวดเร็วและดูสิ่งที่จะมีในเครื่องมือสำหรับนักพัฒนาเว็บในเร็วๆ นี้

ภาพรวมในอนาคตของการเขียน

เราเพิ่งกลับมาจากงาน Chrome Dev Summit ที่ฉันได้แสดงให้เห็นว่าการทำงานกับเครื่องมือสำหรับนักพัฒนาเว็บมีลักษณะเป็นอย่างไรทั้งในปัจจุบันและอนาคต ปกติแล้วฉันจะไม่กล่าวถึงฟีเจอร์ที่ยังอยู่ในช่วงทดลองหรือความคืบหน้าที่หนักในสรุปนี้ แต่ครั้งนี้ฉันจะยกเว้นให้ หากไม่มีเวลาดูการบรรยายทั้งหมด ให้อ่านประเด็นสำคัญต่อไปนี้

โหมดอุปกรณ์ เวอร์ชัน 2

เรายังคงพยายามปรับปรุงโหมดอุปกรณ์ใหม่ซึ่งมีความโดดเด่นและชัดเจน แต่อยากเปิดโอกาสให้ทุกคนได้ทดลองใช้ เราจึงเปิดใช้งานใน Canary ของคุณในวันนี้ การเปลี่ยนแปลงนี้ทำให้เครื่องมือสำหรับนักพัฒนาเว็บกลายเป็นอนาคตที่อุปกรณ์เคลื่อนที่ต้องมาก่อน โดยมีการพัฒนาอุปกรณ์เคลื่อนที่เป็นค่าเริ่มต้น ส่วนการพัฒนาเดสก์ท็อปคือ "ส่วนเสริม" โปรดรอให้เกิดการปรับปรุงเพิ่มเติมในอีก 2-3 สัปดาห์ข้างหน้า โดยในบล็อกโพสต์แบบขยาย เราจะเผยแพร่บล็อกโพสต์เพิ่มเติม

การตรวจสอบภาพเคลื่อนไหวที่มีประสิทธิภาพ

การตรวจสอบภาพเคลื่อนไหวที่อยู่ระหว่างดำเนินการจะแสดงภาพที่สมบูรณ์และละเอียดของสิ่งที่เกิดขึ้นกับสิ่งใดก็ตามที่เคลื่อนไหว เราได้เพิ่มวิธีการเรียนรู้ที่จัดกลุ่มภาพเคลื่อนไหวที่ซับซ้อนเพื่อให้คุณมุ่งเน้นสิ่งที่เห็นอยู่ แทนที่จะแสดงให้เห็นการเปลี่ยนองค์ประกอบทีละองค์ประกอบ ดูวิดีโอ เราจะนำเสนอบล็อกโพสต์แบบสแตนด์อโลนที่ใหญ่กว่าเดิมเมื่อเปิดตัวอย่างเต็มรูปแบบแล้ว

โหมดเลย์เอาต์ (ดูตัวอย่าง)

ยังไม่พร้อมสำหรับเวลาที่มีคนเข้ามามากที่สุด แต่สิ่งที่น่าสนใจมากคือโหมดเลย์เอาต์ใหม่ซึ่งเป็นฟีเจอร์ที่ผมอยากเห็นการสร้างอย่างเต็มรูปแบบ โหมดเลย์เอาต์จะเพิ่มความสามารถในการแก้ไขแบบ WYSIWYG ให้กับเครื่องมือสำหรับนักพัฒนาเว็บสำหรับองค์ประกอบต่างๆ ในหน้า ในปัจจุบัน คุณสามารถแก้ไขความสูง ความกว้าง ระยะห่างจากขอบ และระยะขอบในบริบทได้ อาจใช้เวลาอีกเล็กน้อยจนกว่าเราจะพร้อมให้คุณลอง แต่เราจะแจ้งข้อมูลอัปเดตให้คุณทราบ

การทำโปรไฟล์ประสิทธิภาพด้วยแผงไทม์ไลน์ที่อัปเดตใหม่

ในฐานะที่เป็นส่วนหนึ่งของการผลักดันที่ดียิ่งขึ้นจากการเปิดตัวโมเดลประสิทธิภาพ RAIL ใหม่ เราได้ทำการเปลี่ยนแปลงเล็กๆ น้อยๆ ครั้งใหญ่กว่าหลายร้อยรายการในแผงไทม์ไลน์ และร่วมกันเปลี่ยนแปลงและปรับปรุงเรื่องราวการสร้างโปรไฟล์ประสิทธิภาพขึ้นอีกเล็กน้อย คุณพอล ไอริชของเราแสดงการเปลี่ยนแปลงแต่ละรายการแยกออกมาต่างหาก จึงแสดงให้เราเห็นถึงวิธีแก้ไขข้อบกพร่องด้านประสิทธิภาพของเว็บไซต์อย่างเหมาะสม ซึ่งในกรณีนี้คือเว็บไซต์ในอุปกรณ์เคลื่อนที่ของ Hotel Tonight ที่เปิดให้แสดงสดบนเวที ฟีเจอร์ที่เปิดตัวใหม่ ได้แก่ แถบฟิล์มที่โหลดและประสิทธิภาพ Waterfall ของเครือข่ายที่รวมอยู่ในเครือข่าย สรุปข้อมูลพร็อพเพอร์ตี้ และความสามารถในการดูต้นทุนการแสดงผลตามโดเมนและไฟล์

เพิ่มสีพื้นหน้าและสีพื้นหลังให้กับองค์ประกอบต่างๆ ได้อย่างง่ายดาย

เมื่อใดก็ตามที่คุณต้องการเพิ่มคุณสมบัติสีพื้นหลังหรือสีให้กับองค์ประกอบ คุณจะเปิดตัวเลือกสีไม่ได้ แต่ส่วนใหญ่คุณจะพิมพ์บางอย่าง เช่น "พื้นหลัง: แดง" ทุกครั้งเพื่อให้ไอคอนตัวเลือกสีปรากฏขึ้น แล้วจึงเลือกสีจริงที่คุณต้องการ

เราคิดว่าควรทำให้ง่ายขึ้น เราได้เพิ่มปุ่มเก๋ๆ สองปุ่มที่ปรากฏเมื่อวางเมาส์ที่มุมล่างขวาของตัวเลือก ซึ่งช่วยให้คุณสามารถเพิ่มสี และเปิดเครื่องมือเลือกได้ด้วยคลิกเดียว:

ดีที่สุด

  • เราสูญเสียพื้นที่ก่อนหน้านี้ไปมากในแผงรูปแบบโดยการแสดงประเภทสื่อทั่วไป ตอนนี้เราจะซ่อนสิ่งดังกล่าวก่อนเครื่องมือเลือกของคุณหากมีสิ่งผิดปกติ
  • ตอนนี้คุณสามารถวางเมาส์เหนือตัวเลือก CSS ค้างไว้ในแผง "รูปแบบ" เพื่อดูจํานวนองค์ประกอบในหน้าที่ใช้ตัวเลือกดังกล่าวได้แล้ว
  • ถ้ายังไม่หยุดพิมพ์ การจำลองสื่อสิ่งพิมพ์ยังอยู่ครบเพื่อดูว่าหน้าจะมีลักษณะอย่างไรเมื่อพิมพ์ออกมา เราเพิ่งย้ายหน้าดังกล่าวไปยังการตั้งค่าการแสดงผล
  • เมื่อเลือกองค์ประกอบที่จะตรวจสอบ ตอนนี้เราจะขยายและปิดโครงสร้างย่อย DOM ที่เกี่ยวข้องโดยอัตโนมัติ อธิบายยากจริงๆ การมองเห็นคือความเชื่อ

และเช่นเคย โปรดบอกให้เราทราบว่าคุณคิดอย่างไรผ่าน Twitter หรือแสดงความคิดเห็นด้านล่าง และส่งข้อบกพร่องไปที่ crbug.com/new

แล้วพบกันอีกเดือนหน้า!
Paul Bakaus และทีมเครื่องมือสำหรับนักพัฒนาเว็บ