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

Kayce Basques

ยินดีต้อนรับกลับมา การอัปเดตครั้งล่าสุดของ Chrome 68 ผ่านไปแล้วประมาณ 12 สัปดาห์ เราข้าม Chrome 69 เนื่องจากเราไม่มีฟีเจอร์หรือการเปลี่ยนแปลง UI ใหม่ๆ มากพอที่จะรับประกันการโพสต์

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

• นิพจน์แบบเรียลไทม์ในคอนโซล
• ไฮไลต์โหนด DOM ระหว่าง Eager Evaluation
• การเพิ่มประสิทธิภาพแผงประสิทธิภาพ
• การแก้ไขข้อบกพร่องที่เชื่อถือได้มากขึ้น
• เปิดใช้การควบคุมเครือข่ายจากเมนูคำสั่ง
• เติมเบรกพอยท์แบบมีเงื่อนไขอัตโนมัติ
• ช่วงพักสำหรับ AudioContext กิจกรรม
• แก้ไขข้อบกพร่องแอป Node.js ด้วย ndb
• เคล็ดลับพิเศษ: วัดการโต้ตอบของผู้ใช้ในชีวิตจริงด้วย User Timing API

อ่านต่อ หรือดูวิดีโอของเอกสารนี้

นิพจน์แบบเรียลไทม์ในคอนโซล

ปักหมุดนิพจน์สดไว้ที่ด้านบนของ Console เมื่อต้องการตรวจสอบค่าของนิพจน์แบบเรียลไทม์

1. คลิกสร้างนิพจน์แบบเรียลไทม์ การถ่ายทอดสด UI ของนิพจน์จะเปิดขึ้น

   

   รูปที่ 1 UI นิพจน์สด

2. พิมพ์นิพจน์ที่ต้องการตรวจสอบ

   

   รูปที่ 2 การพิมพ์ Date.now() ใน UI ของ Live Expression

3. คลิกด้านนอก UI ของ Live Expression เพื่อบันทึกการแสดงออกของคุณ

   

   รูปที่ 3 นิพจน์ Live ที่บันทึกไว้

ค่า Expression แบบสดจะอัปเดตทุกๆ 250 มิลลิวินาที

ไฮไลต์โหนด DOM ระหว่างการประเมินที่ตั้งใจ

พิมพ์นิพจน์ที่ประเมินโหนด DOM ใน Console และ Eager Evaluation ตอนนี้ ไฮไลต์โหนดนั้นในวิวพอร์ต

รูปที่ 4 เนื่องจากนิพจน์ปัจจุบันประเมินโหนด โหนดนั้นจึงถูกเน้นสีใน วิวพอร์ต

ลองมาดูนิพจน์บางส่วนที่อาจเป็นประโยชน์กับคุณ

• document.activeElement สำหรับการไฮไลต์โหนดที่โฟกัสอยู่ในปัจจุบัน
• document.querySelector(s) สำหรับการไฮไลต์โหนดที่กำหนดเอง โดยที่ s เป็นตัวเลือก CSS ช่วงเวลานี้ เทียบเท่ากับการวางเมาส์เหนือโหนดในแผนผัง DOM
• $0 เพื่อไฮไลต์โหนดที่เลือกอยู่ในแผนผัง DOM
• $0.parentElement เพื่อไฮไลต์โหนดหลักของโหนดที่เลือกอยู่ในขณะนี้

การเพิ่มประสิทธิภาพแผงประสิทธิภาพ

เมื่อทำโปรไฟล์หน้าเว็บขนาดใหญ่ ก่อนหน้านี้แผงประสิทธิภาพใช้เวลาประมวลผลหลาย 10 วินาทีและ แสดงข้อมูลออกมาเป็นภาพ นอกจากนี้ บางครั้งคลิกกิจกรรมเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับกิจกรรมนั้นในแท็บสรุป ใช้เวลาโหลดหลายวินาที การประมวลผลและการแสดงภาพทำงานได้เร็วขึ้นใน Chrome 70

รูปที่ 5 การประมวลผลและการโหลดข้อมูลประสิทธิภาพ

การแก้ไขข้อบกพร่องที่เชื่อถือได้มากขึ้น

Chrome 70 แก้ไขข้อบกพร่องที่ทำให้เบรกพอยท์หายไปหรือไม่ทำงาน

ทั้งยังแก้ไขข้อบกพร่องที่เกี่ยวข้องกับแผนที่แหล่งที่มาด้วย ผู้ใช้ TypeScript บางรายจะสั่งให้ DevTools ละเว้น ไฟล์ TypeScript บางไฟล์ขณะดําเนินการตามโค้ด แต่ DevTools จะไม่สนใจ ไฟล์ JavaScript ชุดที่สมบูรณ์ การแก้ไขเหล่านี้ยังช่วยแก้ปัญหาที่ทำให้แผงแหล่งที่มา (แหล่งที่มา) ได้อีกด้วย ให้ทำงานอย่างช้าๆ ได้

เปิดใช้การควบคุมเครือข่ายจากเมนูคำสั่ง

คุณสามารถตั้งค่าการควบคุมเครือข่ายเป็น 3G แบบเร็วหรือ 3G ช้าได้จากเมนูคำสั่ง

รูปที่ 6 คำสั่งการควบคุมเครือข่ายในเมนูคำสั่ง

เติมเบรกพอยท์แบบมีเงื่อนไขที่เติมข้อความอัตโนมัติ

ใช้ UI การเติมข้อความอัตโนมัติเพื่อพิมพ์นิพจน์เบรกพอยท์แบบมีเงื่อนไขได้เร็วขึ้น

รูปที่ 7 UI การเติมข้อความอัตโนมัติ

รู้หรือไม่ UI การเติมข้อความอัตโนมัติสามารถใช้ได้ด้วย CodeMirror ซึ่งเป็นตัวขับเคลื่อน คอนโซล

เหตุการณ์เกี่ยวกับ AudioContext ขัดข้อง

ใช้แผงเบรกพอยท์ของ Listener เหตุการณ์เพื่อหยุดชั่วคราวในบรรทัดแรกของ AudioContext เครื่องจัดการเหตุการณ์วงจร

AudioContext เป็นส่วนหนึ่งของ Web Audio API ซึ่งคุณสามารถใช้เพื่อประมวลผลและสังเคราะห์เสียงได้

รูปที่ 8 เหตุการณ์ AudioContext ในแผงเบรกพอยท์ของ Listener เหตุการณ์

แก้ไขข้อบกพร่องแอป Node.js ด้วย ndb

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

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

รูปที่ 9 UI ของ ndb

ดูข้อมูลเพิ่มเติมได้ที่ README ของ ndb

เคล็ดลับพิเศษ: วัดการโต้ตอบของผู้ใช้ในชีวิตจริงด้วย User Timing API

หากต้องการวัดระยะเวลาที่ผู้ใช้จริงใช้ในเส้นทางสำคัญจนเสร็จสมบูรณ์ในหน้าเว็บ พิจารณา การวัดคุมโค้ดของคุณด้วย User Timing API

ตัวอย่างเช่น สมมติว่าคุณต้องการวัดระยะเวลาที่ผู้ใช้ใช้ในหน้าแรกก่อนที่จะคลิก ปุ่มคำกระตุ้นให้ดำเนินการ (CTA) ขั้นตอนแรก คุณจะต้องทำเครื่องหมายจุดเริ่มต้นของการเดินทางใน เครื่องจัดการเหตุการณ์ที่เชื่อมโยงกับเหตุการณ์การโหลดหน้าเว็บ เช่น DOMContentLoaded

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

จากนั้นจึงทำเครื่องหมายจุดสิ้นสุดของเส้นทางและคำนวณระยะเวลาเมื่อคลิกปุ่ม

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

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

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

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

รูปที่ 10 ส่วนระยะเวลาของผู้ใช้

และยังมีประโยชน์ในการแก้ไขข้อบกพร่องหรือเพิ่มประสิทธิภาพโค้ด เช่น ถ้าต้องการเพิ่มประสิทธิภาพ บางระยะในวงจรของคุณ ให้โทรหา window.performance.mark() เมื่อเริ่มต้นและสิ้นสุดบริการ ของวงจร React ทำแบบนี้ในโหมดการพัฒนา

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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