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

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

Kayce Basques

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

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

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

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

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

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

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

รูปที่ 1 UI นิพจน์สด
พิมพ์นิพจน์ที่ต้องการตรวจสอบ

รูปที่ 2 การพิมพ์ Date.now() ใน UI ของ Live Expression
คลิกด้านนอก UI ของ Live Expression เพื่อบันทึกการแสดงออกของคุณ

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

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

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

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

หมายเหตุ: โหนดที่ไฮไลต์จะอัปเดตเมื่อคุณพิมพ์เท่านั้น ไม่อัปเดตตามรอบเวลา เช่น หากคุณพิมพ์ "document.activeElement" ซึ่งจะติดตามองค์ประกอบที่โฟกัสอยู่และกด Tab ในหน้าดังกล่าว เครื่องมือสำหรับนักพัฒนาเว็บจะยังคงไฮไลต์โหนดที่ใช้งานอยู่เมื่อคุณพิมพ์นิพจน์ในตอนแรก

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

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

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

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

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

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