สวัสดีทุกคน ในฉบับล่าสุดของ DevTools Digest เราได้ดูสแต็กการเรียกแบบแอซิงโครนัสที่มีประสิทธิภาพและอื่นๆ อีกเล็กน้อย ในรุ่นนี้ เราจะเห็นการกรองแผงเครือข่ายที่ปรับปรุงใหม่ (พร้อมการเติมข้อความอัตโนมัติ) ความสามารถในการแก้ไขด้วยเนื้อหา Shadow DOM การอัปเดต CodeMirror 4 และอื่นๆ
การกรองแผงเครือข่าย
ตอนนี้คุณสามารถกรองทรัพยากรตามช่องต่างๆ เช่น โดเมนได้แล้ว รูปแบบตัวกรองรูปแบบหนึ่งคือ Domain:website.com นอกจากการกรองแล้ว คุณยังจะได้รับคำแนะนำการเติมข้อความอัตโนมัติสำหรับค่าตัวกรองที่ถูกต้องซึ่งอัปเดตแบบเรียลไทม์ขณะที่คุณพิมพ์ข้อความค้นหา คุณอาจพบว่าการค้นหานี้มีประโยชน์เมื่อต้องการค้นหาแหล่งข้อมูลทั้งหมดที่แสดงโดยโดเมนหนึ่งๆ [crbubg.com/258421]
แก้ไขเนื้อหา Shadow DOM
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แก้ไข HTML ปกติในแผงองค์ประกอบได้เสมอ ตอนนี้ความสามารถเหล่านี้ครอบคลุมถึงองค์ประกอบที่อยู่ใน Shadow DOM ด้วย [crbug.com/348991]
อัปเกรดเป็น CodeMirror 4.0
CodeMirror ซึ่งเป็นเครื่องมือแก้ไขข้อความที่ใช้ JavaScript และเป็นส่วนหนึ่งของแผงแหล่งที่มาได้รับการอัปเกรดเป็นเวอร์ชัน 4 แล้ว ด้วยเหตุนี้ เราจึงเพิ่มฟังก์ชันการทำงานใหม่ๆ เข้ามามากมาย crbug.com/356878]
การค้นหาพร็อพเพอร์ตี้ CSS อย่างรวดเร็ว
ตอนนี้คุณสามารถค้นหาชื่อพร็อพเพอร์ตี้ ค่า หรือตัวเลือกกฎจากช่องค้นหาใหม่ในแผงรูปแบบได้แล้ว ระบบจะไฮไลต์ผลการค้นหาแบบเรียลไทม์ขณะที่คุณพิมพ์ข้อความค้นหา [crbug.com/278852]
การประทับเวลาข้างข้อความในคอนโซล
เมื่อบันทึกข้อความติดต่อกันอย่างรวดเร็ว คุณอาจต้องการดูเวลาที่บันทึกข้อความ คุณเปิดใช้ฟีเจอร์นี้ได้ผ่านการทดสอบในเครื่องมือสำหรับนักพัฒนาเว็บ [crbug.com/131714]
รายละเอียดสถิติหน่วยความจําสําหรับสแนปชอตฮีป
เมื่อดูสแนปชอตกองข้อมูลที่บันทึกไว้ ให้สังเกตแผนภูมิวงกลมสถิติซึ่งแสดงภาพรวมที่แยกแยะด้วยสีว่าแง่มุมใดของ JavaScript ที่ใช้หน่วยความจํามากที่สุด ปัจจุบันเป็นฟีเจอร์ทดลอง ให้เปิดใช้ "สถิติภาพรวมของ Heap" เพื่อลองใช้ [crbug.com/346335]
ดูแหล่งที่มาต้นฉบับของ console.log ไม่ใช่เวอร์ชันที่ตัดขึ้นใหม่
คุณอาจมีฟังก์ชัน Wrapper ของ console.log แต่น่าเสียดายที่ข้อความทั้งหมดในคอนโซลมาจาก util.js:46 ตอนนี้คุณก็ให้เครื่องมือสำหรับนักพัฒนาเว็บแก้ไขตำแหน่งเดิมได้แล้ว ป้อนไฟล์ที่ตัดข้อความบันทึกคอนโซลลงในช่องป้อนข้อมูล "ข้ามการไปยังแหล่งที่มาที่มีชื่อเฉพาะ" เพื่อให้ DevTools ทำการทดสอบแบบไม่แสดงผล แล้วแสดงแหล่งที่มาจริงของคำสั่งบันทึก [crbug.com/231007]
ฟีเจอร์เล็กๆ น้อยๆ เพิ่มเติมที่มีประสิทธิภาพ
รีเฟรชแผง Listener เหตุการณ์ในแผงองค์ประกอบหลังจากเพิ่มหรือนำ Listener เหตุการณ์ JavaScript ออกแบบไดนามิก [crbug.com/341044]
คุณสามารถใช้
Ctrl+เพื่อรับโฟกัสที่อินพุตคอนโซล ซึ่งอาจมีประโยชน์สำหรับเวิร์กโฟลว์ที่ใช้แป้นพิมพ์เท่านั้นในเครื่องมือสำหรับนักพัฒนาเว็บ [crbug.com/144943]คำแนะนำการเติมข้อความอัตโนมัติสำหรับสไตล์เส้นขอบสำหรับค่า (จุดประ จุดประจุด คู่ ร่อง) ได้รับการอัปเดตให้ตรงกับข้อกำหนด [crbug.com/349998]
เราได้เพิ่มปุ่มคืนค่าเริ่มต้นและโหลดซ้ำ **ลงในแผงการตั้งค่า ซึ่งจะทําตามชื่อที่ระบุไว้ [crbug.com/135451]
ขณะนี้ฟีเจอร์นี้ยังอยู่ในขั้นทดลอง คุณจึงลองยึดไว้ทางด้านซ้ายเพื่อดูว่าเหมาะกับเวิร์กโฟลว์ของคุณหรือไม่ โหมดเลย์เอาต์อื่นๆ ได้แก่ ยึดกับหน้าต่างหลัก (ด้านขวาหรือด้านล่าง) และเลิกยึดเป็นหน้าต่างแยก [crbug.com/134282]
ตอนนี้ "wheel" มีให้บริการเป็นจุดหยุดพักของ Listener เหตุการณ์ นอกเหนือจากเหตุการณ์ click, mousemove, mousedown ฯลฯ ปกติ [crbug.com/347562]
เท่านี้ก่อน ขอขอบคุณที่อ่าน