หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คุณสลับระหว่างแท็บในแผงแหล่งที่มาได้โดยใช้ฟีเจอร์ต่อไปนี้ ใน MacOS ฟังก์ชัน + 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 ใหม่ในช่วงทดลองนี้สร้างโครงสร้างในแผงเบรกพอยท์ และช่วยให้นักพัฒนาซอฟต์แวร์เข้าถึงฟีเจอร์ที่ใช้กันทั่วไปได้อย่างรวดเร็ว เช่น การแก้ไขและนำเบรกพอยท์ออก

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

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

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

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

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

[ทดลอง] สิ่งพิมพ์ที่สวยโดยอัตโนมัติ

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

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

แสดงไฟล์ที่ลดขนาดรูปภาพก่อนและหลังการพิมพ์ที่สวยสะดุดตาแบบอัตโนมัติ

ปัญหา Chromium: 1164184

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

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

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

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

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