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