มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome 138

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

ต้นทางที่เชื่อมต่อไว้ล่วงหน้าในข้อมูลเชิงลึก "แผนผังทรัพยากร Dependency ของเครือข่าย"

ตอนนี้ข้อมูลเชิงลึกประสิทธิภาพ > ข้อมูลเชิงลึก > ต้นไม้ความเกี่ยวข้องของเครือข่ายจะแสดงรายการต้นทางที่เชื่อมต่อล่วงหน้าที่ใช้หรือไม่ใช้และรายการที่อาจใช้เชื่อมต่อล่วงหน้า (หากมี)

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

ข้อมูลเชิงลึก "แผนผังทรัพยากร Dependency ของเครือข่าย" ก่อนและหลังเพิ่มต้นทางที่เชื่อมต่อไว้ล่วงหน้าและรายการที่เป็นไปได้

ดูข้อมูลเพิ่มเติมได้ที่เชื่อมต่อกับต้นทางที่จำเป็นล่วงหน้า

เวลาในการตอบกลับของเซิร์ฟเวอร์และเวลาในการเปลี่ยนเส้นทางในข้อมูลเชิงลึก "เวลาในการตอบสนองต่อคําขอเอกสาร"

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

ข้อมูลเชิงลึก "เวลาในการตอบสนองของคำขอเอกสาร" ก่อนและหลังเพิ่มการเปลี่ยนเส้นทางและเวลาในการตอบสนองของเซิร์ฟเวอร์

การเปลี่ยนเส้นทางในสรุปคําขอเครือข่าย

ตอนนี้แผงประสิทธิภาพจะแสดง URL เปลี่ยนเส้นทางในสรุปของคําขอเครือข่ายและในเคล็ดลับเครื่องมือ

ลักษณะก่อนและหลังเพิ่ม URL เปลี่ยนเส้นทางลงในสรุปและเคล็ดลับเครื่องมือของคําขอเครือข่าย

ปัญหา Chromium: 402353313

ลดสัญญาณรบกวนในร่องรอยประสิทธิภาพ

ตอนนี้แผงประสิทธิภาพจะไม่แสดงเหตุการณ์จากหมวดหมู่ compile ของเครื่องมือรันไทม์ JavaScript v8 ก่อนหน้านี้ เหตุการณ์เหล่านี้ทำให้เกิดค่าใช้จ่ายเพิ่มเติมและข้อมูลที่ไม่จำเป็นจำนวนมาก โดยเฉพาะเหตุการณ์ compile code

การแสดงผลก่อนและหลังนําเหตุการณ์ "คอมไพล์โค้ด" ออกจากการติดตามประสิทธิภาพ

หากสังเกตเห็นว่าเหตุการณ์บางอย่างที่สําคัญกับคุณหายไป โปรดแสดงความคิดเห็นใน crbug.com/414330508

"ปิดใช้ตัวอย่าง JavaScript" ที่เลิกใช้งานแล้ว

เราได้เลิกใช้งานและนําตัวเลือกปิดใช้ตัวอย่าง JavaScript ในประสิทธิภาพ > การตั้งค่าการบันทึกออกแล้ว เนื่องจากไม่ค่อยมีประโยชน์และไม่ค่อยมีคนใช้

ลักษณะก่อนและหลังนำตัวเลือก "ปิดใช้ตัวอย่าง JavaScript" ออกจาก "การตั้งค่าการจับภาพ"

ปัญหา Chromium: 414734883

พารามิเตอร์ความแม่นยำของตำแหน่งทางภูมิศาสตร์ในเซ็นเซอร์

ตอนนี้แผงเซ็นเซอร์ให้คุณตั้งค่าความแม่นยำในการจําลองตําแหน่งทางภูมิศาสตร์ได้แล้ว วิธีนี้จะช่วยให้คุณทดสอบการจัดการความแม่นยำของ GPS ในระดับต่างๆ ได้

ลักษณะก่อนและหลังเพิ่มพารามิเตอร์ "ความแม่นยำ" ในการจําลองตําแหน่งทางภูมิศาสตร์ในแผงเซ็นเซอร์

ปัญหา Chromium: 40074843

การปรับปรุงแผงองค์ประกอบ

เวอร์ชันนี้มีการปรับปรุงหลายอย่างในแผงองค์ประกอบ

แก้ไขข้อบกพร่องค่า CSS ที่ซับซ้อนได้ง่ายขึ้น

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

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

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

ลักษณะก่อนและหลังเพิ่มเคล็ดลับเครื่องมือที่มีเชนคำจำกัดความและการคำนวณที่ซับซ้อนซึ่งขยายได้

ปัญหา Chromium: 396080529

รองรับ @function ในองค์ประกอบ > สไตล์

ขณะนี้แท็บองค์ประกอบ > สไตล์จะลิงก์ชื่อฟังก์ชันที่กำหนดเองกับคำจำกัดความของฟังก์ชันนั้นๆ ในส่วนเฉพาะเพื่อเตรียมพร้อมรองรับ @function ใน Chrome

ลักษณะก่อนและหลังการลิงก์ชื่อฟังก์ชันที่กําหนดเองกับส่วนที่เกี่ยวข้อง

การปรับปรุงแผงเครือข่าย

เวอร์ชันนี้มีการปรับปรุงแผงเครือข่ายหลายอย่าง

has-request-header ตัวกรอง

ตอนนี้แผงเครือข่ายรองรับตัวกรอง has-request-header ซึ่งให้คุณกรองตามชื่อส่วนหัวคำขอที่เฉพาะเจาะจงได้

ลักษณะก่อนและหลังเพิ่มตัวกรอง "has-request-header" ลงในแผงเครือข่าย

ปัญหา Chromium: 397481040

Direct Sockets ใน Isolated Web App

ในแผงเครือข่าย ตอนนี้คุณสามารถตรวจสอบการรับส่งข้อมูลของ Isolated Web Apps (IWAs) ผ่าน TCPSocket, UDPSocket (ในโหมด Bound) และ UDPSocket (ในโหมดเชื่อมต่อ)

โดยเลือกการเชื่อมต่อ directscoket ข้างคําขอปกติในตาราง แล้วเลือกข้อความในแท็บข้อความ

ลักษณะก่อนและหลังการเพิ่มการรองรับ Direct Sockets ใน IWA ไปยังแผงเครือข่าย

Isolated Web App (IWA) มีโมเดลการรักษาความปลอดภัยที่เชื่อถือได้สูงสำหรับเว็บแอปพลิเคชัน ดูข้อมูลเพิ่มเติมได้ที่การเริ่มต้นใช้งาน Isolated Web App และดูแอปเดโมที่ใช้ Direct Sockets API

ไฮไลต์อื่นๆ

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

  • แอปพลิเคชัน > พื้นที่เก็บข้อมูล: นำตัวเลือก Web SQL ที่เลิกใช้งานแล้วออก (crbug.com/412707590)
  • องค์ประกอบ:
  • เครือข่าย: นำส่วนหัว HTTP Referrer-Policy ออกจากตัวเลือกคัดลอกเป็นการดึงข้อมูลเนื่องจากเป็นส่วนหัวการตอบกลับเพื่อควบคุมลักษณะการทำงานของเบราว์เซอร์ ไม่ใช่คำสั่งฝั่งไคลเอ็นต์ (crbug.com/413904896)
  • ประสิทธิภาพ: นำคำเตือน "งานที่ใช้เวลานาน" ออกจากเธรดผู้ปฏิบัติงานเนื่องจากไม่ได้บล็อกเธรดหลัก (crbug.com/40248589)
  • ปัญหา รายงานจะมีลักษณะดังนี้
    • หากมีการบล็อกทรัพยากรที่น่าสงสัยว่ามีการติดตามผู้ใช้
    • การลดการติดตามการเข้าชม ไม่ว่าผู้ใช้จะเข้าถึงพื้นที่เก็บข้อมูลระหว่างการเปลี่ยนเส้นทางหรือไม่ก็ตาม
  • การช่วยเหลือพิเศษ ตอนนี้องค์ประกอบต่อไปนี้ในองค์ประกอบ > สไตล์สามารถโฟกัสด้วยแป้นพิมพ์ได้

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

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

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

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

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

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