เดือนนี้ 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 และทีมเครื่องมือสำหรับนักพัฒนาเว็บ