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

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

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

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

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

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

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

    UI นิพจน์แบบเรียลไทม์

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

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

    พิมพ์ Date.now() ใน UI ของ Live Expression

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

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

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

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

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

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

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

หลังจากพิมพ์ document.activeElement ใน Console แล้วจะมีการไฮไลต์โหนดในวิวพอร์ต

รูปที่ 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 การเติมข้อความอัตโนมัติเพื่อพิมพ์นิพจน์เบรกพอยท์แบบมีเงื่อนไขได้เร็วขึ้น

UI การเติมข้อความอัตโนมัติ

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

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

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

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

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

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

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

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

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

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

UI ของ ndb

รูปที่ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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