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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

การแสดงอารมณ์แบบสดในคอนโซล

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

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

    UI ของการแสดงออกแบบเรียลไทม์

    รูปที่ 1 UI ของการแสดงออกแบบเรียลไทม์

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

    การพิมพ์ Date.now() ใน UI ของนิพจน์แบบเรียลไทม์

    รูปที่ 2 การพิมพ์ Date.now() ใน UI ของนิพจน์แบบเรียลไทม์

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

    นิพจน์แบบเรียลไทม์ที่บันทึกไว้

    รูปที่ 3 นิพจน์แบบเรียลไทม์ที่บันทึกไว้

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

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

พิมพ์นิพจน์ที่ประเมินเป็นโหนด DOM ใน Console และตอนนี้การประเมินแบบกระตือรือร้นจะไฮไลต์โหนดนั้นใน Viewport

หลังจากพิมพ์ document.activeElement ในคอนโซล ระบบจะไฮไลต์โหนดในวิวพอร์ต

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

ตัวอย่างวลีที่คุณอาจพบว่ามีประโยชน์มีดังนี้

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

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

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

กำลังประมวลผลและโหลดข้อมูลประสิทธิภาพ

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

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

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

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

DevTools จะมาร์กอัปการวัด User Timing โดยอัตโนมัติในส่วน User Timing ของ การบันทึกประสิทธิภาพ

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

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

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

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

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

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

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

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

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