เราได้เพิ่มฟีเจอร์ที่อัปเดตแล้วจำนวนหนึ่งลงในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เมื่อเร็วๆ นี้ ซึ่งมีทั้งฟีเจอร์เล็กๆ และฟีเจอร์ใหญ่ๆ เราจะเริ่มต้นด้วยการอัปเดตของแผงองค์ประกอบ แล้วไปต่อด้วยการพูดถึงคอนโซล ไทม์ไลน์ และอื่นๆ
คัดลอกกฎรูปแบบที่ปิดใช้โดยใส่เครื่องหมายกำกับ
ตอนนี้การคัดลอกกฎ CSS ทั้งหมดในแผงรูปแบบจะรวมรูปแบบที่คุณปิดไว้ด้วย โดยรูปแบบดังกล่าวจะอยู่ในคลิปบอร์ดของคุณโดยมีการใส่ความคิดเห็น [crbug.com/316532]
คัดลอกเป็นเส้นทาง CSS
ตอนนี้ "คัดลอกเป็นเส้นทาง CSS" พร้อมใช้งานเป็นรายการเมนูสำหรับโหนด DOM ในแผงองค์ประกอบแล้ว (คล้ายกับรายการเมนู "คัดลอก XPath")
การสร้างตัวเลือก CSS ไม่ได้จํากัดอยู่ที่สไตล์ชีต/JavaScript เท่านั้น แต่ยังเป็นทางเลือกสําหรับกลยุทธ์ตัวระบุในการทดสอบ WebDriver ได้ด้วย [crbug.com/277286]
ดูสไตล์องค์ประกอบ Shadow DOM
ตอนนี้คุณสามารถตรวจสอบสไตล์ขององค์ประกอบย่อยของ shadow root ได้แล้ว [crbug.com/279390]
copy() ของคอนโซลใช้ได้กับออบเจ็กต์
ตอนนี้เมธอด copy() จาก Command Line API ใช้ได้กับออบเจ็กต์แล้ว ลองป้อน copy({foo:'bar'}) ลงในแผงคอนโซล แล้วดูว่าตอนนี้ออบเจ็กต์เวอร์ชันสตริงและเวอร์ชันที่มีการจัดรูปแบบอยู่ในคลิปบอร์ดของคุณแล้ว [crbug.com/289348]
ตัวกรองนิพจน์ทั่วไปสําหรับคอนโซล
กรองข้อความคอนโซลโดยใช้นิพจน์ทั่วไปในแผงคอนโซล crbug.com/318308]
นำ Listener เหตุการณ์ออกได้ง่ายๆ
ลองใช้ getEventListeners(document).mousewheel[0]; ในแผงคอนโซลเพื่อเรียกข้อมูล Listener เหตุการณ์ของเม้าส์วีลรายการแรกในเอกสาร จากนี้ไป ให้ลองใช้ $_.remove(); เพื่อนำโปรแกรมรับฟังเหตุการณ์นั้นออก ($_ = ค่าของนิพจน์ที่ประเมินล่าสุด) crbug.com/309524]
การนำคำเตือน CSS ออก
เราได้นําคําเตือนสไตล์ "ค่าพร็อพเพอร์ตี้ CSS ไม่ถูกต้อง" ที่คุณอาจเห็นออกแล้ว เราพยายามอย่างต่อเนื่องที่จะทำให้การใช้งาน CSS ในชีวิตจริงมีประสิทธิภาพมากขึ้น รวมถึงการแฮ็กเบราว์เซอร์ crbug.com/309982]
การดำเนินการในไทม์ไลน์ที่สรุปไว้ในแผนภูมิวงกลม
ตอนนี้แผงไทม์ไลน์มีแผนภูมิวงกลมในแผงรายละเอียดซึ่งแสดงแหล่งที่มาของต้นทุนการแสดงผลเป็นภาพ ซึ่งจะช่วยให้คุณระบุจุดคอขวดได้อย่างรวดเร็ว
คุณจะเห็นข้อมูลส่วนใหญ่ที่เคยแสดงในป๊อปอัปได้รับการเลื่อนไปแสดงในแผงของตัวเอง หากต้องการดู ให้เริ่มบันทึกไทม์ไลน์และเลือกเฟรม จากนั้นสังเกตแผงรายละเอียดใหม่ที่มีแผนภูมิวงกลม เมื่ออยู่ในมุมมองเฟรม คุณจะเห็นสถิติที่น่าสนใจ เช่น FPS (1000ms/frame duration) เฉลี่ยของเฟรมที่เลือก [crbug.com/247786]
รายละเอียดเหตุการณ์การปรับขนาดรูปภาพ
ตอนนี้เหตุการณ์การปรับขนาดรูปภาพและการถอดรหัสในแผงไทม์ไลน์จะมีลิงก์ไปยังโหนด DOM ในแผงองค์ประกอบ
ลิงก์ URL ของรูปภาพจะนำคุณไปยังแหล่งข้อมูลที่เกี่ยวข้องในแผงแหล่งข้อมูล crbug.com/244159]
เฟรม GPU
ตอนนี้เฟรมที่เกิดขึ้นใน GPU จะแสดงที่ด้านบนเหนือเฟรมในเธรดหลัก crbug.com/305863]
หยุดพักที่ Listener ของ popstate
ตอนนี้ 'popstate' พร้อมใช้งานเป็นจุดหยุดพักของ Listener เหตุการณ์ในแถบด้านข้างของแผงแหล่งที่มา [crbug.com/88112]
การตั้งค่าการแสดงผลที่มีให้ใช้งานในลิ้นชัก
ตอนนี้การเปิดลิ้นชักจะแสดงแผงต่างๆ ซึ่งหนึ่งในนั้นคือแผงการแสดงผล ใช้เพื่อแสดงสี่เหลี่ยมผืนผ้าการวาด เครื่องวัด FPS ฯลฯ ซึ่งจะเปิดใช้โดยค่าเริ่มต้นที่การตั้งค่า > "แสดงมุมมอง "การแสดงผล" ในลิ้นชักคอนโซล"
คัดลอกรูปภาพเป็น URL ของข้อมูล
ตอนนี้คุณคัดลอกเนื้อหาของชิ้นงานรูปภาพในแผงทรัพยากรเป็น URI ของข้อมูล (data:image/png;base64,iVBO...) ได้แล้ว
หากต้องการลองใช้ ให้ค้นหาแหล่งข้อมูลรูปภาพภายในเฟรม > [ทรัพยากร] > รูปภาพ แล้วคลิกขวาที่ตัวอย่างรูปภาพเพื่อเข้าถึงเมนูบริบท จากนั้นเลือก "คัดลอกรูปภาพเป็น URL ของข้อมูล" crbug.com/321132]
การกรอง URI ของข้อมูล
ตอนนี้คุณสามารถกรอง URI ข้อมูลออกจากแท็บเครือข่ายได้หากไม่ต้องการให้แสดง เลือกไอคอนตัวกรอง
แก้ไขข้อบกพร่องเกี่ยวกับการกำหนดเวลาของเครือข่าย
ขออภัยหากคุณเห็นว่ารูปภาพใช้เวลาดาวน์โหลดนานถึง 300,000 ปี ;) ตอนนี้เราแก้ไขการกำหนดเวลาที่ไม่ถูกต้องสำหรับทรัพยากรเครือข่ายแล้ว crbug.com/309570]
ควบคุมลักษณะการบันทึกเครือข่ายได้มากขึ้น
ลักษณะการบันทึกเครือข่ายจะแตกต่างออกไปเล็กน้อย ประการแรก ปุ่มบันทึกจะทำงานเหมือนกับที่คุณคาดหวังจากไทม์ไลน์หรือโปรไฟล์ CPU และเนื่องจากคุณคาดหวังไว้แล้ว หากคุณโหลดหน้าเว็บซ้ำขณะที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่ การบันทึกเครือข่ายจะเริ่มขึ้นโดยอัตโนมัติ จากนั้นระบบจะปิดฟีเจอร์นี้ ดังนั้นหากต้องการบันทึกกิจกรรมเครือข่ายหลังจากโหลดหน้าเว็บ ให้เปิดฟีเจอร์นี้ วิธีนี้ช่วยให้คุณเห็นภาพการแสดงโฆษณาสื่อกลางตามลำดับขั้นได้ง่ายขึ้นโดยไม่ต้องคำนึงถึงคำขอเครือข่ายที่เกิดขึ้นในช่วงท้ายซึ่งอาจทำให้ผลลัพธ์บิดเบือน crbug.com/325878]
ธีมของเครื่องมือสำหรับนักพัฒนาเว็บพร้อมใช้งานผ่านส่วนขยายแล้ว
ตอนนี้สไตล์ชีตของผู้ใช้พร้อมใช้งานผ่านเวอร์ชันทดลองของเครื่องมือสำหรับนักพัฒนาเว็บ (ช่องทําเครื่องหมาย: "อนุญาตธีม UI ที่กําหนดเอง") ซึ่งช่วยให้ส่วนขยาย Chrome ใช้การจัดรูปแบบที่กําหนดเองกับเครื่องมือสําหรับนักพัฒนาเว็บได้ ดูตัวอย่างได้ที่ส่วนขยายธีมเครื่องมือสำหรับนักพัฒนาเว็บตัวอย่าง crbug.com/318566]
จบกันไปแล้วสำหรับฉบับนี้ของสรุป DevTools หากยังไม่ได้อ่าน โปรดดูฉบับเดือนพฤศจิกายน