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

Jecelyn Yeen

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

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

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

นอกจากนี้ คุณยังคลิกขวาที่ขั้นตอนและคัดลอกไปยังคลิปบอร์ดในแผง *เครื่องมือบันทึกแทนการส่งออกทั้ง FLow ของผู้ใช้ได้ และยังทำงานร่วมกับส่วนขยายได้ด้วย เช่น ลองคัดลอกขั้นตอนเป็นสคริปต์ 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
• ออบเจ็กต์ WeakRef ช่วยให้คุณเก็บการอ้างอิงแบบอ่อนไปยังออบเจ็กต์อื่นได้โดยไม่ต้องป้องกันไม่ให้ระบบเก็บขยะออบเจ็กต์นั้น ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงตัวอย่างค่าในบรรทัด และประเมินการอ้างอิงแบบอ่อนในคอนโซลโดยตรงระหว่างการแก้ไขข้อบกพร่อง ก่อนหน้านี้ คุณต้องเรียกใช้ "deref" กับรายการดังกล่าวอย่างชัดเจนเพื่อแก้ไข
• แก้ไขตัวอย่างในบรรทัดสําหรับตัวแปรที่มีเงา ก่อนหน้านี้ค่าที่แสดงไม่ถูกต้อง
• ถอดรหัสชื่อตัวแปรในฟังก์ชัน Generator และ async ในแผงขอบเขตในแผงแหล่งที่มา

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

ไฮไลต์อื่นๆ

การแก้ไขที่น่าสังเกตในรุ่นนี้ ได้แก่

• รองรับคำแนะนำเพิ่มเติมสำหรับพร็อพเพอร์ตี้ CSS ที่ไม่ได้ใช้งานในแผงสไตล์ ได้แก่ ความสูงและความกว้างในบรรทัด พร็อพเพอร์ตี้ Flex และตารางกริด (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 หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

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

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

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

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

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