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

Jecelyn Yeen

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

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

การอัปเดตล่าสุดทำให้เครื่องบันทึกแสดงขั้นตอนการนำทางแยกกัน คุณคลิกขวาแล้วนำออกเพื่อเล่นซ้ำในหน้าได้

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

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1364601, 1364601

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

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

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

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

ปัญหาใน Chromium: 1167965, 1172535, 1371585 1369503

การแก้ไขข้อบกพร่องของ JavaScript ที่ดียิ่งขึ้น

การปรับปรุงการแก้ไขข้อบกพร่องของ JavaScript ในรุ่นนี้มีดังนี้

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

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

ไฮไลต์อื่นๆ

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

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

[ทดลอง] UX ที่ดียิ่งขึ้นในการจัดการเบรกพอยท์

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

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

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

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

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

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

[ทดลอง] การจัดรูปแบบในที่อัตโนมัติ

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

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

ปัญหาใน Chromium: 1164184

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

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

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

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

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

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

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