มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ 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 support in Elements > Styles

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

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

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

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

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

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

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

ปัญหาใน Chromium: 397481040

Direct Sockets ใน Isolated Web App

ในแผงเครือข่าย ตอนนี้คุณสามารถตรวจสอบการรับส่งข้อมูลของ Isolated Web App (IWA) ผ่าน TCPSocket, UDPSocket (ในโหมดขาเข้า), 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)
  • ประสิทธิภาพ: นำคำเตือน "งานที่ใช้เวลานาน" ออกจากเทรดของ Worker เนื่องจากไม่ได้บล็อกเทรดหลัก (crbug.com/40248589)
  • ปัญหา รายงานในตอนนี้
    • หากมีการบล็อกทรัพยากรที่น่าสงสัยว่าติดตามผู้ใช้
    • การลดการติดตามการเข้าออกไม่ว่าเว็บไซต์จะเข้าถึงพื้นที่เก็บข้อมูลในระหว่างการเปลี่ยนเส้นทางหรือไม่ก็ตาม
  • การช่วยเหลือพิเศษ ตอนนี้องค์ประกอบต่อไปนี้ในองค์ประกอบ > สไตล์สามารถโฟกัสด้วยแป้นพิมพ์ได้แล้ว

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

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

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

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

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

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