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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

ไม่สนใจสคริปต์ที่ไม่เกี่ยวข้องในแผนภูมิเปลวไฟ

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

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

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

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

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

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

การตั้งค่าการควบคุมที่แนะนำ

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

ภาพก่อนและหลังเพิ่มคำแนะนำในการจำกัดอัตราการส่งไปยังเมนูการตั้งค่า

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

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

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

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

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

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

การติดตามสแต็กของการเรียกใช้ JavaScript ในข้อมูลสรุป

ตอนนี้แท็บประสิทธิภาพ > ข้อมูลสรุปจะแสดง Stack Trace ของการเรียก JavaScript รวมถึงการเรียกแบบไม่พร้อมกัน

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

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

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

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

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

แผงมีอะไรใหม่ได้รับการปรับโฉมใหม่ให้สอดคล้องกับการออกแบบของ Chrome มากขึ้น

รูปลักษณ์เก่าและใหม่ของแผง "มีอะไรใหม่"

ปัญหาใน Chromium: 325441858

Lighthouse 12.3.0

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

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

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

ปัญหาใน Chromium: 40543651

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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