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

Kayce Basques

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

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

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

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

การแสดงผลแบบเรียลไทม์ในคอนโซล

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

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

   

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

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

   

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

3. คลิกนอก UI ของนิพจน์แบบเรียลไทม์เพื่อบันทึกนิพจน์

   

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

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

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

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

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

ตัวอย่างข้อความที่อาจเป็นประโยชน์มีดังนี้

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

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

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

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

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

Chrome 70 แก้ไขปัญหาข้อบกพร่องบางอย่างที่ทำให้จุดหยุดชั่วคราวหายไปหรือไม่ทริกเกอร์

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

ตัวอย่างเช่น สมมติว่าคุณต้องการวัดระยะเวลาที่ผู้ใช้อยู่ในหน้าแรกก่อนที่จะคลิกปุ่มคำกระตุ้นให้ดำเนินการ (Call-To-Action) ก่อนอื่น ให้ทําเครื่องหมายจุดเริ่มต้นของเส้นทางในตัวแฮนเดิลเหตุการณ์ที่เชื่อมโยงกับเหตุการณ์การโหลดหน้าเว็บ เช่น 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 จะทําเครื่องหมายการวัดระยะเวลาที่เจาะจงของผู้ใช้โดยอัตโนมัติในส่วนระยะเวลาที่เจาะจงของผู้ใช้ของไฟล์บันทึกประสิทธิภาพ

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

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

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

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

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

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

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

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

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