มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome 133

Sofia Emelianova
Sofia Emelianova
GitHub

ประวัติการแชท AI แบบถาวร

ตอนนี้แผงความช่วยเหลือจาก AI จะเก็บประวัติการแชทไว้ในเครื่องของคุณตลอดเซสชัน เพื่อให้คุณดูการสนทนาก่อนหน้ากับ Gemini ได้แม้ว่าจะโหลด DevTools หรือ Chrome ซ้ำแล้วก็ตาม

การปรับปรุงแผงประสิทธิภาพ

เวอร์ชันนี้มีการปรับปรุงหลายอย่างในแผงประสิทธิภาพ

ข้อมูลเชิงลึกเกี่ยวกับการนำส่งรูปภาพ

ตอนนี้แท็บประสิทธิภาพ > ข้อมูลเชิงลึกจะไฮไลต์รูปภาพที่มีขนาดไฟล์ที่คุณสามารถเพิ่มประสิทธิภาพได้ คลิกรูปภาพในข้อมูลเชิงลึกเพื่อดูรูปภาพที่ไฮไลต์ในแทร็กเครือข่าย

แผงประสิทธิภาพที่ไฮไลต์ข้อมูลเชิงลึกการแสดงรูปภาพ

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเพิ่มประสิทธิภาพการแสดงรูปภาพได้ที่เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ

การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์แบบคลาสสิกและแบบทันสมัย

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

  • คลาสสิก: ซูมด้วยลูกล้อเมาส์ (ทัชแพดขึ้นหรือลง) และเลื่อนแนวตั้งด้วย Shift + ลูกล้อเมาส์
  • สมัยใหม่: เลื่อนขึ้น/ลงด้วยลูกกลิ้งเมาส์ เลื่อนซ้าย/ขวาด้วย Shift + ลูกกลิ้งเมาส์ และซูมด้วย Command/Control + ลูกกลิ้งเมาส์

หากต้องการเลือกสไตล์ที่ต้องการ ให้คลิก แสดงแป้นพิมพ์ลัดที่มุมขวาบนของแผง แล้วเลือกคลาสสิกหรือทันสมัย กล่องโต้ตอบทางลัดยังมีเคล็ดลับเกี่ยวกับทางลัดที่ใช้ได้อีกด้วย

กล่องโต้ตอบแป้นพิมพ์ลัดที่มีแป้นพิมพ์ลัดที่ใช้ได้สําหรับแผงประสิทธิภาพ

ละเว้นสคริปต์ที่ไม่เกี่ยวข้องในผัง Flame

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

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

DevTools จะบันทึกกฎรายการที่ละเว้นที่คุณเพิ่มไว้ใน การตั้งค่า > รายการที่ละเว้น และคุณสามารถเปิดและปิดกฎดังกล่าวได้ในกล่องโต้ตอบ

เครื่องหมายไทม์ไลน์และการไฮไลต์ช่วงเมื่อวางเมาส์เหนือ

ตอนนี้แผงประสิทธิภาพจะทําสิ่งต่อไปนี้เพื่อช่วยให้คุณเข้าใจการติดตามประสิทธิภาพได้ดียิ่งขึ้น

  • แสดงเครื่องหมายแนวตั้งที่ครอบคลุมการติดตามประสิทธิภาพทั้งหมดเมื่อคุณวางเมาส์เหนือไทม์ไลน์
  • ไฮไลต์ช่วงในไทม์ไลน์เมื่อคุณวางเมาส์เหนือรายการในแทร็กหลัก

การตั้งค่าการจำกัดที่แนะนำ

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

ลักษณะก่อนและหลังเพิ่มคําแนะนําการจํากัดความเร็วลงในเมนูการตั้งค่า

การจำกัด CPU ที่แนะนำ (ตอนนี้) คือ 4x slowdown ที่ใช้บ่อยที่สุด และคำแนะนำเกี่ยวกับเครือข่ายจะอิงตามข้อมูลรายงาน UX ของ Chrome หากเปิดใช้ในเมตริกแบบเรียลไทม์

นอกจากนี้ ตอนนี้แผงประสิทธิภาพจะแสดงการตั้งค่าการจำกัดที่คุณใช้ข้างการติดตามแต่ละรายการในเมนูแบบเลื่อนลงเซสชันล่าสุดในแถบการดำเนินการ

เครื่องหมายเวลาในการวางซ้อน

เครื่องหมายเวลาย้ายจากแทร็กเวลาไปที่ด้านล่างของการติดตาม และตอนนี้วางซ้อนอยู่ด้านบนของแทร็กทั้งหมดและมองเห็นได้แม้ว่าแทร็กเวลาจะซ่อนอยู่

ก่อนและหลังย้ายเครื่องหมายไปที่ด้านล่างของการติดตาม

แทร็กการกำหนดเวลาจะเก็บการเรียกใช้ mark() และ measure() ที่กำหนดเองไว้

สแต็กเทรซของการเรียกใช้ JavaScript ใน "สรุป"

ตอนนี้แท็บประสิทธิภาพ > สรุปจะแสดงสแต็กเทรซของการเรียกใช้ JavaScript รวมถึงการเรียกใช้แบบแอ็กซิงคิวทีฟ

ก่อนและหลังเพิ่มสแต็กเทรซลงในแท็บสรุป

ย้ายการตั้งค่าป้ายไปยังเมนูในองค์ประกอบ

การตั้งค่าป้ายในแผงองค์ประกอบย้ายจากแถบการดำเนินการที่ซ่อนอยู่โดยค่าเริ่มต้นไปยังเมนูคลิกขวาที่เกี่ยวข้อง

ก่อนและหลังย้ายการตั้งค่าป้ายไปยังเมนู

แผง "มีอะไรใหม่" ใหม่

แผงมีอะไรใหม่มีรูปลักษณ์ใหม่ซึ่งสอดคล้องกับการออกแบบของ Chrome มากขึ้น

แผง "มีอะไรใหม่" เวอร์ชันเก่าและเวอร์ชันใหม่

ปัญหาเกี่ยวกับ Chromium: 325441858

Lighthouse 12.3.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 12.3.0 แล้ว

การอัปเดตนี้เพิ่มการตรวจสอบใหม่ที่จะตรวจสอบการแยกแหล่งที่มาอย่างเหมาะสมด้วย COOP และนโยบาย HSTS ที่รัดกุม ดูรายการการเปลี่ยนแปลงทั้งหมด

ดูข้อมูลเบื้องต้นเกี่ยวกับการใช้แผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วของเว็บไซต์

ปัญหา Chromium: 40543651

ไฮไลต์อื่นๆ

การแก้ไขและการปรับปรุงที่สำคัญในรุ่นนี้ ได้แก่

  • แหล่งที่มา: ตอนนี้เมื่อหยุดชั่วคราว โปรแกรมแก้ไขข้อบกพร่องจะไม่เปลี่ยนไปใช้บริบท Service Worker อย่างกะทันหันหากมีการสร้างบริบทดังกล่าวหลังจากหยุดชั่วคราว (373893057)
  • ประสิทธิภาพ
    • เมื่อวางเมาส์เหนือสคริปต์ ตอนนี้เคล็ดลับเครื่องมือในแผนภูมิเปลวไฟจะแสดง URL (หากมี) (368541957)
    • สรุป: แทนที่แผนภูมิวงกลมด้วยการแสดงแผนภูมิแท่ง
    • ช่องทําเครื่องหมายข้อมูลส่วนขยายในการตั้งค่าการบันทึกเปลี่ยนชื่อเป็นแสดงแทร็กที่กำหนดเอง
    • ตอนนี้แท็บข้อมูลเชิงลึกมีส่วนข้อมูลเชิงลึกที่ส่งผ่าน (N) ซึ่งจะยุบอยู่โดยค่าเริ่มต้น
  • แอปพลิเคชัน > พื้นที่เก็บข้อมูล: คุณสร้างรายการพื้นที่เก็บข้อมูลด้วยคีย์ว่างได้เนื่องจากคีย์ดังกล่าวถูกต้องทางเทคนิค (373703285)
  • ตอนนี้ระบบปิดใช้โหมดอุปกรณ์สำหรับหน้า chrome:// แล้ว (40186276)
  • เครือข่าย:
    • เมื่อเปิดการตั้งค่าที่เกี่ยวข้องแล้ว การคลิกส่งออก HAR 1 ครั้งจะเปิดเมนูที่มี 2 ตัวเลือก (แบบตรวจสอบความถูกต้องแล้วและพร้อมข้อมูลที่ละเอียดอ่อน) ก่อนหน้านี้ เมนูจะเปิดขึ้นด้วยการคลิกค้างไว้ (378076279)
    • ตอนนี้ คัดลอกเป็น cURL ใช้แอตทริบิวต์ -b เพื่อข้ามคุกกี้และอ่านได้ง่ายขึ้นแทน -H 'cookie:...' (40791742)
  • การช่วยเหลือพิเศษ: ตอนนี้คุณสามารถย้ายแท็บภายในแผงไปทางซ้ายหรือขวาด้วยเมนูตามบริบทได้แล้ว (383164782)
  • การบล็อกคําขอจากเครือข่าย: ตอนนี้การตั้งค่าเมนูคําสั่งนี้ซิงค์กับช่องทําเครื่องหมายที่เกี่ยวข้องแล้ว (378058733)

ดาวน์โหลดแชแนลตัวอย่าง

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

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools