สวัสดีทุกคน ในไดเจสต์สำหรับนักพัฒนาเว็บฉบับล่าสุด เราได้พูดถึงสแต็กการเรียกใช้แบบอะซิงโครนัสที่มีประสิทธิภาพและอีกมากมาย ในฉบับนี้ เราจะได้เห็นการกรองแผงเครือข่ายที่ปรับปรุงใหม่ (พร้อมการเติมข้อความอัตโนมัติ), ความสามารถในการแก้ไขด้วยเนื้อหา Shadow DOM, การอัปเดต CodeMirror 4 และอีกมากมาย
การกรองแผงเครือข่าย
ตอนนี้คุณกรองทรัพยากรตามช่องบางช่อง เช่น โดเมนได้แล้ว รูปแบบตัวกรอง 1 รูปแบบคือ 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 แง่มุมใดใช้หน่วยความจำมากที่สุด ปัจจุบันเป็นฟีเจอร์ทดลอง ให้เปิดใช้งาน "สถิติสแนปชอตฮีป" เพื่อทดลองใช้ [crbug.com/346335]
ดูแหล่งที่มาเดิมของconsole.log ไม่ใช่เวอร์ชันที่รวมไว้
คุณอาจมีฟังก์ชันconsole.log Wrapper แต่ข้อความทั้งหมดในคอนโซลต้องมาจาก 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 เหตุการณ์ ซึ่งเป็นนอกเหนือจากเหตุการณ์การคลิกปกติ การเลื่อนเมาส์ เมาส์ดาวน์ ฯลฯ [crbug.com/347562]
เท่านี้ก็เรียบร้อย ขอบคุณที่อ่านนะ