อีเมลสรุปสำหรับ DevTools - รายละเอียดไทม์ไลน์แบบรวม ชุดสี และอื่นๆ

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


ปัญหาการกล่าวโทษที่ดีกว่า: รายละเอียดโดยรวมในไทม์ไลน์

รายละเอียดรวมในไทม์ไลน์

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

ในแท็บรายละเอียดแบบรวม คุณสามารถเน้นเฉพาะฟังก์ชันที่มีค่าใช้จ่ายสูงหรือโครงสร้างการเรียกทั้งหมด จากนั้นแบ่งข้อมูลที่เลือกตามโดเมน โดเมนย่อย หรือ URL ที่แตกต่างกัน ตัวอย่างเช่น ในไทม์ไลน์ด้านบนของการโหลดหน้าเว็บ ตอนนี้คุณสามารถระบุแหล่งที่มาของการลดช้าลงให้กับสคริปต์ของบุคคลที่สามที่มาจากโดเมน เช่น facebook.net หรือ twitter.com ได้ง่ายๆ

เมนูหลักใหม่เฉพาะ

เมนูหลักใหม่

เพื่อให้แถบเครื่องมือหลักไม่เป็นระเบียบ เราได้ย้ายลิ้นชัก การตั้งค่า และไอคอนเชื่อมต่อไปยังเมนูหลักใหม่เฉพาะ

โดยเฉพาะแท่นชาร์จที่ใช้งานได้ง่ายขึ้นมาก แทนที่จะต้องกดไอคอนก่อนหน้านี้ค้างไว้ ตำแหน่งแท่นชาร์จแต่ละตำแหน่งจะแสดงไอคอนของตัวเอง

นอกเหนือจากแท่นชาร์จแล้ว เราได้เพิ่มการค้นหาไฟล์การเข้าถึงด่วน ทางลัด และความช่วยเหลือ (ซึ่งนำไปสู่หน้าแรกใหม่ของเรา)

สำรวจเครื่องมือสำหรับนักพัฒนาเว็บผ่านเคล็ดลับเครื่องมือที่ได้รับการปรับปรุง

เคล็ดลับเครื่องมือใหม่

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

เคล็ดลับเครื่องมือใหม่จะปรากฏเร็วขึ้นมากและมีแป้นพิมพ์ลัด (หากมี)

สร้างโปรไฟล์การควบคุมเครือข่ายที่กำหนดเอง

โปรไฟล์เครือข่ายที่กำหนดเอง

หากตัวเลือกเริ่มต้นของการควบคุมเครือข่ายจำกัดเกินไปสำหรับกรณีการใช้งานของคุณ และคุณต้องการตัวเลือก "Wi-Fi ของการประชุม" หรือถ้าต้องการย้อนวันวาน คุณสามารถจำลองบรรทัด"110 Baud" เรามีข่าวดีมาบอก เราได้เพิ่มแผงการตั้งค่าใหม่ เพื่อให้คุณทำสิ่งต่างๆ เหล่านี้ได้

อัตโนมัติ แบบวัสดุ และชุดสีแบบกำหนดเอง

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

โดยคลิกไอคอนตัวสลับเล็กๆ ที่อยู่ถัดจากจานสี คุณสามารถเลือกจากตัวเลือกต่อไปนี้

  1. สีของหน้า — จานสีนี้จะสร้างขึ้นโดยอัตโนมัติจากสีที่ เราพบใน CSS ของคุณ จึงเป็นตัวเลือกที่ยอดเยี่ยมหากคุณกำลังขยายเว็บไซต์ที่มีอยู่
  2. Material Designชุดสี Material Design มีสีสันที่สวยงามและเป็นตัวเลือกที่ดีที่สุดเมื่อเริ่มโปรเจ็กต์ใหม่ ตอนนี้คุณจะเห็นสีหลักทั้งหมด แต่เราจะเพิ่มเฉดสีให้ทุกสีในเร็วๆ นี้
  3. กำหนดเอง — สนามเด็กเล่นของคุณเอง เพิ่มสีใหม่โดยเลือกสีใดสีหนึ่ง ในเครื่องมือเลือก จากนั้นคลิกไอคอน "บวก" ถัดจากจานสี จัดลำดับใหม่ด้วยการลากตามต้องการ แล้วคลิกขวาเพื่อแสดงตัวเลือกเพิ่มเติม เช่น นำออก

บอกให้เรารู้ว่าคุณคิดอย่างไร และเราจะขยายเรื่องราวเกี่ยวกับสีนี้ได้อย่างไร

ดีที่สุด

  • ตอนนี้คำขอที่สร้างขึ้นโดยใช้ fetch() API จะแสดงในแผงเครือข่าย
  • การจัดวางแผงอัตโนมัติช่วยให้มั่นใจได้ว่าเมื่อคุณปรับขนาดแผงเครื่องมือสำหรับนักพัฒนาเว็บ
    จะปรับให้เข้ากับข้อจำกัดใหม่ด้านพื้นที่
  • การตรวจสอบองค์ประกอบและโหมดอุปกรณ์มีชุดไอคอนใหม่
  • ตอนนี้แอตทริบิวต์ในแผง DOM จะมีสีแตกต่างกันแม้ว่าจะไฮไลต์โหนดก็ตาม (เป็นสีขาวเมื่อก่อน)
  • ตอนนี้องค์ประกอบที่ซ่อนอยู่ (เปิดใช้งานโดยการกด "h" ในโหนด DOM ที่เลือก) จะแสดงสัญญาณบอกสถานะวงกลมสีเทาทางด้านซ้าย และเบรกพอยท์ DOM จะทำเช่นเดียวกันกับวงกลมสีน้ำเงิน (ซึ่งจะคล้ายกับสัญญาณบอกสถานะสีส้มที่เรามีอยู่แล้วสำหรับ บังคับใช้สถานะขององค์ประกอบ เช่น :hover)

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

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