เดือนนี้ Chrome Canary เปิดตัวฟีเจอร์ใหม่ๆ มากมาย อ่านต่อเพื่อดูสคริปต์ของบุคคลที่สามที่ทำให้เกิดปัญหาด้านประสิทธิภาพในเว็บไซต์ด้วยรายละเอียดแบบรวมในไทม์ไลน์ วิธีเลือกสีที่สอดคล้องกันด้วยจานสีใหม่ วิธีจําลอง Wi-Fi ของการประชุมด้วยโปรไฟล์เครือข่ายที่ปรับแต่งได้ และวิธีใช้ประโยชน์จาก UI ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มากขึ้นด้วยเมนูหลักแบบใหม่และเคล็ดลับเครื่องมือที่ดีขึ้น
ระบุปัญหาด้านประสิทธิภาพได้ดียิ่งขึ้น: รายละเอียดแบบรวมในไทม์ไลน์
ในเว็บไซต์ทุกวันนี้ เราใช้บีคอน บริการวิเคราะห์ โซเชียล โหลดแบบอักษร และโฆษณาจากบุคคลที่สามมากขึ้นเรื่อยๆ ซึ่งบางครั้งก็มีมากเกินไป เราจึงจะเปิดตัวรายละเอียดแบบรวมในไทม์ไลน์เพื่อให้คุณเห็นภาพปัญหาและป้องกันไม่ให้เกิดปัญหานี้ขึ้นอีก
ในแท็บรายละเอียดแบบรวม คุณสามารถมุ่งเน้นที่ฟังก์ชันที่มีต้นทุนสูงหรือลําดับการเรียกใช้ทั้งหมด จากนั้นแจกแจงข้อมูลที่เลือกตามโดเมน โดเมนย่อย หรือ URL ที่ต่างกัน ตัวอย่างเช่น ในไทม์ไลน์การโหลดหน้าเว็บด้านบน ตอนนี้คุณสามารถระบุแหล่งที่มาของความล่าช้าได้อย่างง่ายดายว่ามาจากสคริปต์ของบุคคลที่สามที่มาจากโดเมน เช่น facebook.net หรือ twitter.com
เมนูหลักใหม่สำหรับจัดการเนื้อหา
เราได้ย้ายไอคอนลิ้นชัก การตั้งค่า และการต่อเชื่อมไปยังเมนูหลักใหม่โดยเฉพาะเพื่อไม่ให้แถบเครื่องมือหลักรก
โดยเฉพาะอย่างยิ่งการต่อเชื่อมที่ง่ายขึ้นมาก ตำแหน่งการต่อแต่ละตำแหน่งจะมีไอคอนของตัวเองแทนที่จะต้องกดไอคอนก่อนหน้าค้างไว้
นอกจากการต่อเชื่อมแล้ว เรายังได้เพิ่มการค้นหาไฟล์ แป้นพิมพ์ลัด และความช่วยเหลือในการเข้าถึงด่วน (ซึ่งจะนำไปยังหน้าแรกใหม่)
สำรวจเครื่องมือสำหรับนักพัฒนาเว็บผ่านเคล็ดลับเครื่องมือที่ปรับปรุงใหม่
เรามีปุ่มจำนวนมากในเครื่องมือสำหรับนักพัฒนาเว็บ และเราทราบดีว่าปุ่มบางปุ่มอาจไม่ชัดเจน ตอนนี้เราทำให้การค้นพบการดำเนินการและทางลัดของการดำเนินการนั้นง่ายขึ้นแล้ว โดยแทนที่เคล็ดลับเครื่องมือของระบบด้วยเคล็ดลับเครื่องมือที่กำหนดเองซึ่งสอดคล้องกับแพลตฟอร์ม
เคล็ดลับเครื่องมือใหม่จะปรากฏขึ้นเร็วขึ้นมากและมีแป้นพิมพ์ลัด (หากมี)
สร้างโปรไฟล์การควบคุมเครือข่ายที่กำหนดเอง
หากตัวเลือกเริ่มต้นของเครื่องมือควบคุมปริมาณการใช้เครือข่ายจํากัดการใช้งานมากเกินไป และคุณต้องการตัวเลือก "Wi-Fi สำหรับการประชุม" หรือต้องการย้อนวัยไปจำลองบรรทัด"110 Baud" เรามีข่าวดีมาแจ้งให้ทราบ เราได้เพิ่มแผงการตั้งค่าใหม่ที่ให้คุณดำเนินการดังกล่าวได้
ชุดสีอัตโนมัติ ชุดสี Material และชุดสีที่กำหนดเอง
ไม่ว่าคุณต้องการสร้างสีแห่งเวทมนตร์ขึ้นมาใหม่หรือจะทำงานกับชุดสีที่มีอยู่ เครื่องมือเลือกสีที่ปรับปรุงใหม่จะช่วยให้คุณเลือกชุดสีที่สอดคล้องกันสำหรับเว็บไซต์ได้
เมื่อคลิกไอคอนตัวสลับเล็กๆ ข้างจานสี คุณสามารถเลือกจากตัวเลือกต่อไปนี้ได้
- สีของหน้า — ชุดสีนี้จะสร้างขึ้นโดยอัตโนมัติจากสีที่เราพบใน CSS ของคุณ จึงเหมาะสําหรับขยายเว็บไซต์ที่มีอยู่
- Material Design — ชุดสี Material Design มีสีที่สวยงามพร้อมใช้งานตั้งแต่ต้น และเป็นตัวเลือกที่เหมาะอย่างยิ่งเมื่อเริ่มต้นโปรเจ็กต์ใหม่ ตอนนี้คุณจะเห็นแม่สีทั้งหมด แต่เราจะเพิ่มเฉดสีทั้งหมดในเร็วๆ นี้
- กำหนดเอง — คุณจะกำหนดเองได้ตามต้องการ เพิ่มสีใหม่โดยเลือกสีที่ต้องการในเครื่องมือเลือก แล้วคลิกไอคอน "บวก" ข้างจานสี จัดเรียงใหม่โดยการลากไปรอบๆ แล้วคลิกขวาเพื่อแสดงตัวเลือกเพิ่มเติม เช่น นำออก
บอกเราว่าคุณคิดเห็นอย่างไร และวิธีที่เราอาจขยายเรื่องราวเกี่ยวกับสีต่อไปได้
รายการอื่นๆ ที่น่าสนใจ
- ตอนนี้คำขอที่สร้างขึ้นโดยใช้ fetch() API จะแสดงในแผงเครือข่าย
- การจัดเลย์เอาต์แผงอัตโนมัติช่วยให้มั่นใจได้ว่าเมื่อคุณปรับขนาด DevTools
แผงจะปรับให้เข้ากับข้อจำกัดด้านพื้นที่ใหม่ - ตรวจสอบองค์ประกอบและโหมดอุปกรณ์มีชุดไอคอนใหม่
- ตอนนี้แอตทริบิวต์ในแผง DOM มีสีแตกต่างกันแม้ว่าจะไฮไลต์โหนดไว้ก็ตาม (ก่อนหน้านี้เป็นสีขาวทั้งหมด)
- ตอนนี้องค์ประกอบที่ซ่อนอยู่ (เปิดใช้งานโดยการกด "h" ในโหนด DOM ที่เลือก) จะแสดงตัวบ่งชี้วงกลมสีเทาทางด้านซ้าย และจุดหยุดพัก DOM จะแสดงด้วยวงกลมสีน้ำเงิน (การดำเนินการนี้คล้ายกับตัวบ่งชี้สีส้มที่เรามีอยู่แล้วสำหรับการบังคับใช้สถานะขององค์ประกอบ เช่น :hover)
และเช่นเคย โปรดแจ้งให้เราทราบว่าคุณคิดอย่างไรผ่านทาง Twitter หรือแสดงความคิดเห็นด้านล่าง และส่งข้อบกพร่องไปยัง crbug.com/new
แล้วพบกันใหม่เดือนหน้า
Paul Bakaus และทีม DevTools