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

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

Kayce Basques

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

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

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

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

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

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

คลิก Create Live Expression UI ของ Live Expression จะเปิดขึ้น

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

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

รูปที่ 3 Live Expression ที่บันทึกไว้

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

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

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

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

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

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

ต่อไปนี้เป็นนิพจน์บางส่วนที่อาจเป็นประโยชน์สำหรับคุณ

document.activeElement เพื่อไฮไลต์โหนดที่โฟกัสอยู่
document.querySelector(s) เพื่อไฮไลต์โหนดที่กำหนดเอง โดยมี s เป็นตัวเลือก CSS ซึ่งเทียบเท่ากับการวางเมาส์เหนือโหนดในแผนผัง DOM
$0 เพื่อไฮไลต์โหนดใดก็ตามที่เลือกไว้ใน DOM Tree
$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 นอกเหนือจากฟีเจอร์การแก้ไขข้อบกพร่องปกติที่คุณได้รับผ่านเครื่องมือสำหรับนักพัฒนาเว็บแล้ว NB ยังนำเสนอสิ่งต่อไปนี้ด้วย

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

UI ของ ndb

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

ดูข้อมูลเพิ่มเติมได้ที่ 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

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

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