คุณลักษณะที่อัปเดตมากมายได้ทำให้เครื่องมือนี้กลายเป็นเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ทั้งขนาดเล็กและขนาดใหญ่ เราจะเริ่มจากการอัปเดตของแผงองค์ประกอบก่อน และไปต่อกันที่เรื่องคอนโซล ไทม์ไลน์ และอื่นๆ
มีการปิดใช้การคัดลอกกฎของรูปแบบเป็นความคิดเห็น
ตอนนี้การคัดลอกกฎ CSS ทั้งหมดในแผง "รูปแบบ" จะรวมรูปแบบที่คุณปิดไว้ด้วย โดยกฎเหล่านั้นจะอยู่ในคลิปบอร์ดเมื่อแสดงความคิดเห็นไว้ [crbug.com/316532]
คัดลอกเป็นเส้นทาง CSS
ตอนนี้ "คัดลอกเป็นเส้นทาง CSS" พร้อมให้ใช้งานเป็นรายการเมนูสำหรับโหนด DOM ในแผงองค์ประกอบแล้ว (คล้ายกับรายการเมนูคัดลอก XPath)
การสร้างตัวเลือก CSS ไม่จำเป็นต้องจำกัดอยู่เพียงสไตล์ชีต/JavaScript เท่านั้น ตัวเลือกดังกล่าวยังเป็นทางเลือกสำหรับกลยุทธ์ตัวระบุตำแหน่งในการทดสอบ WebDriver [crbug.com/277286]
ดูรูปแบบองค์ประกอบ Shadow DOM
ในตอนนี้ องค์ประกอบย่อยของรูทเงาจะตรวจสอบรูปแบบของตัวเองได้แล้ว [crbug.com/279390]
copy() ของคอนโซลใช้งานได้กับออบเจ็กต์
ตอนนี้เมธอด copy() จาก Command Line API จะใช้ได้กับออบเจ็กต์แล้ว ลองใช้ copy({foo:'bar'}) ในแผงคอนโซล แล้วสังเกตดูว่าออบเจ็กต์เวอร์ชันสตริงและจัดรูปแบบอยู่ในคลิปบอร์ดแล้วอย่างไร [crbug.com/289348]
ตัวกรองนิพจน์ทั่วไปสำหรับคอนโซล
กรองข้อความในคอนโซลโดยใช้นิพจน์ทั่วไปในแผงคอนโซล crbug.com/318308]
นำ Listener เหตุการณ์ออกได้อย่างง่ายดาย
ลองใช้ getEventListeners(document).mousewheel[0]; ในแผงคอนโซลเพื่อเรียก Listener เหตุการณ์ลูกกลิ้งเมาส์แรกในเอกสาร จากนั้นลองใช้ $_.remove() เพื่อนำ Listener เหตุการณ์นั้นออก ($_ = ค่าของนิพจน์ที่ได้รับการประเมินล่าสุด) 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]
หยุดผู้ฟังป๊อปสเตต
ตอนนี้ '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 และเนื่องจากเป็นไปตามที่คาดไว้ หากคุณโหลดหน้าเว็บซ้ำขณะที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่ การบันทึกเครือข่ายจะเริ่มขึ้นโดยอัตโนมัติ จากนั้นระบบจะปิดไป ดังนั้นหากคุณต้องการบันทึกกิจกรรมเครือข่ายหลังจากหน้าเว็บโหลด ให้เปิดฟีเจอร์นี้ วิธีนี้ช่วยให้เห็นภาพ Waterfall ได้ง่ายขึ้นโดยไม่ต้องมีคำขอเครือข่ายที่ล่าช้าจะทำให้ผลลัพธ์บิดเบือน crbug.com/325878]
ธีมเครื่องมือสำหรับนักพัฒนาเว็บพร้อมใช้งานแล้วผ่านส่วนขยาย
สไตล์ชีตของผู้ใช้พร้อมใช้งานผ่านการทดสอบเครื่องมือสำหรับนักพัฒนาเว็บแล้ว (ช่องทําเครื่องหมาย "อนุญาตธีม UI ที่กำหนดเอง") ซึ่งจะช่วยให้ส่วนขยาย Chrome สามารถใช้การจัดรูปแบบที่กำหนดเองกับเครื่องมือสำหรับนักพัฒนาเว็บ ดูตัวอย่างได้ที่ตัวอย่างส่วนขยายธีมสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ crbug.com/318566]
และนี่คือเนื้อหาโดยรวมของเครื่องมือสำหรับนักพัฒนาเว็บ หากคุณยังไม่เคยเข้าร่วม อย่าลืมดูฉบับพฤศจิกายน