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

Jecelyn Yeen

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

ตัวเลือกการคัดลอกใหม่ในแผงโปรแกรมอัดเสียง

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

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

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

ก่อนหน้านี้คุณเข้าถึงเมนูขั้นตอนได้ผ่านปุ่ม 3 จุดเท่านั้น ตอนนี้คุณสามารถคลิกขวาที่ใดก็ได้ในขั้นตอนเพื่อเข้าถึงเมนู

ปัญหาเกี่ยวกับ Chromium: 1322313, 1351649, 1322313, 1339767

แสดงชื่อฟังก์ชันจริงในไฟล์บันทึกการแสดง

ตอนนี้แผงประสิทธิภาพจะแสดงชื่อฟังก์ชันจริงและแหล่งที่มาของในการติดตามหากมีการแมปแหล่งที่มา

แสดงการเปรียบเทียบชื่อฟังก์ชันก่อนและหลังจากที่แสดงในแผงประสิทธิภาพ

ในตัวอย่างนี้ ไฟล์ต้นฉบับจะถูกลดขนาดลงระหว่างการใช้งานจริง ตัวอย่างเช่น ระบบจะลดขนาดฟังก์ชัน sayHi เป็น n และจะลดฟังก์ชัน takeABreak เป็น o ในการสาธิตนี้

แสดงไฟล์ก่อนและหลังการย่อขนาด

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

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

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

แป้นพิมพ์ลัดใหม่ในคอนโซลและ แผงแหล่งที่มา

คุณสลับระหว่างแท็บในแผงแหล่งที่มาได้โดยใช้สิ่งต่อไปนี้ ใน MacOS ให้กด Function + Command + ลูกศรขึ้นและลง ใน Windows และ Linux ให้กด Control + Page up หรือ down

นอกจากนี้ คุณยังไปที่คำแนะนำที่เติมข้อความอัตโนมัติได้โดยใช้ Ctrl + N และ Ctrl + P ใน MacOS ซึ่งคล้ายกับ Emacs เช่น คุณสามารถพิมพ์ window. ในช่อง Console แล้วใช้แป้นพิมพ์ลัดเหล่านี้เพื่อไปยังส่วนต่างๆ

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

ปัญหาเกี่ยวกับ Chromium: 1167965, 1172535, 1371585 1369503

ปรับปรุงการดีบัก JavaScript

ต่อไปนี้เป็นการปรับปรุงการแก้ไขข้อบกพร่อง JavaScript บางส่วนในรุ่นนี้

  • new.target คือพร็อพเพอร์ตี้เมตาที่ช่วยให้คุณตรวจหาว่ามีการเรียกฟังก์ชันหรือตัวสร้างโดยใช้โอเปอเรเตอร์ใหม่หรือไม่ ตอนนี้คุณสามารถบันทึก new.target ในคอนโซลเพื่อตรวจสอบค่าระหว่างการแก้ไขข้อบกพร่องได้แล้ว ก่อนหน้านี้ ระบบจะแสดงข้อผิดพลาดเมื่อคุณป้อน new.target แสดงการเปรียบเทียบก่อนและหลังการแก้ไขข้อบกพร่องของการประเมิน new.target
  • ออบเจ็กต์ WeakRef ช่วยให้คุณเก็บการอ้างอิงที่ไม่รัดกุมไปยังออบเจ็กต์อื่นได้โดยไม่ป้องกันไม่ให้ออบเจ็กต์ดังกล่าวถูกรวบรวมเนื้อหาขยะ ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บแสดงตัวอย่างแบบอินไลน์สำหรับค่า และประเมินข้อมูลอ้างอิงที่หละหลวมในคอนโซลโดยตรงระหว่างการแก้ไขข้อบกพร่อง ก่อนหน้านี้คุณต้องเรียก "deref" อย่างชัดแจ้งเพื่อแก้ปัญหา แสดงการเปรียบเทียบก่อนและหลังของการประเมิน WeakRef ระหว่างการแก้ไขข้อบกพร่อง
  • แก้ไขการแสดงตัวอย่างในบรรทัดสำหรับตัวแปรที่ถูกซ้อน ก่อนหน้านี้ค่าการแสดงผลไม่ถูกต้อง แสดงตัวอย่างในบรรทัดของการเปรียบเทียบก่อนและหลังสำหรับตัวแปรที่ถูกซ้อน
  • ถอดรหัสซอร์สโค้ดที่สร้างความสับสนของชื่อตัวแปรในฟังก์ชัน Generator และ async ในแผงขอบเขตในแผงแหล่งที่มา

ปัญหาเกี่ยวกับ Chromium: 1267690, 1246863 1371322, 1311637

ไฮไลต์เบ็ดเตล็ด

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

  • รองรับคำแนะนำเพิ่มเติมสำหรับคุณสมบัติ CSS ที่ไม่ได้ใช้งานในแผงรูปแบบ - คุณสมบัติความสูงและความกว้างในบรรทัด เฟลกซ์ และตาราง (1373597, 1178508, 1178508,1178508)
  • การไฮไลต์ไวยากรณ์ที่แก้ไขแล้ว เครื่องมือนี้ทำงานได้ไม่ถูกต้องนับตั้งแต่การอัปเกรดตัวแก้ไขโค้ดครั้งล่าสุดในเครื่องมือสำหรับนักพัฒนาเว็บ (1290182)
  • บันทึกเหตุการณ์การเปลี่ยนแปลงของอินพุตอย่างถูกต้องหลังจากเกิดเหตุการณ์การเบลอในโปรแกรมอัดเสียง (1378488)
  • อัปเดตสคริปต์การเล่นซ้ำของ Puppeteer ในการส่งออกเพื่อประสบการณ์ในการแก้ไขข้อบกพร่องที่ดียิ่งขึ้นในโปรแกรมอัดเสียง (1351649)
  • รองรับการบันทึกและเล่นซ้ำในโปรแกรมอัดเสียงสำหรับการแก้ไขข้อบกพร่องจากระยะไกล (1185727)
  • แก้ไขการแยกวิเคราะห์ชื่อตัวแปร CSS พิเศษใน var() ก่อนหน้านี้เครื่องมือสำหรับนักพัฒนาเว็บไม่รองรับการแยกวิเคราะห์ตัวแปรที่มีอักขระหลีก เช่น var(--fo\ o) (1378992)

[ทดลอง] UX ที่เพิ่มประสิทธิภาพในการจัดการเบรกพอยท์

แผงเบรกพอยท์ปัจจุบันมีตัวช่วยด้านภาพเล็กน้อยในการดูแลเบรกพอยท์ทั้งหมด นอกจากนี้ การดำเนินการที่ใช้บ่อยจะซ่อนอยู่หลังเมนูตามบริบทด้วย

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

ไฮไลต์บางส่วนมีดังนี้

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

โปรดอ่านการเปลี่ยนแปลงทั้งหมดใน RFC (ปิด) และแสดงความคิดเห็นที่นี่

แสดงแผงเบรกพอยท์ก่อนและหลังการออกแบบใหม่

ปัญหาเกี่ยวกับ Chromium: 1346231, 1324904

[ทดลอง] พิมพ์รูปภาพสวยๆ ในเครื่องโดยอัตโนมัติ

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

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

แสดงไฟล์ที่ลดขนาดก่อนและหลังการพิมพ์ที่จัดวางอัตโนมัติ

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

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

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

ติดต่อทีม Chrome DevTools

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

  • ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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