สวัสดี ในไดเจสต์เครื่องมือสำหรับนักพัฒนาเว็บฉบับล่าสุด เราได้พูดถึงสแต็กการเรียกแบบอะซิงโครนัสที่มีประสิทธิภาพและอื่นๆ อีกสองสามรายการ ในรุ่นนี้ เราจะเห็นการกรองแผงเครือข่ายที่ปรับปรุงใหม่ (พร้อมการเติมข้อความอัตโนมัติ) ความสามารถในการแก้ไขด้วยเนื้อหา 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+เพื่อจดจ่อกับอินพุต Console และอาจมีประโยชน์สำหรับเวิร์กโฟลว์การทำงานของแป้นพิมพ์เฉพาะในเครื่องมือสำหรับนักพัฒนาเว็บ [crbug.com/144943]คำแนะนำการเติมข้อความอัตโนมัติสำหรับสไตล์เส้นขอบสำหรับค่า (จุดประ จุดประจุด คู่ ร่อง) ได้รับการอัปเดตให้ตรงกับข้อกำหนด [crbug.com/349998]
เราได้เพิ่มปุ่มคืนค่าเริ่มต้นและโหลดซ้ำ **ลงในแผงการตั้งค่า ซึ่งจะทําตามชื่อที่ระบุไว้ [crbug.com/135451]
ขณะนี้ฟีเจอร์นี้ยังอยู่ในขั้นทดลอง คุณจึงลองยึดไว้ทางด้านซ้ายเพื่อดูว่าเหมาะกับเวิร์กโฟลว์ของคุณหรือไม่ โหมดเลย์เอาต์อื่นๆ ได้แก่ ยึดกับหน้าต่างหลัก (ด้านขวาหรือด้านล่าง) และเลิกยึดเป็นหน้าต่างแยก [crbug.com/134282]
ตอนนี้ "wheel" มีให้บริการเป็นจุดหยุดพักของ Listener เหตุการณ์ นอกเหนือจากเหตุการณ์ click, mousemove, mousedown ฯลฯ ปกติ [crbug.com/347562]
เท่านี้เองล่ะ ขอบคุณสำหรับการอ่าน