อีเมลสรุปเกี่ยวกับ DevTools ธันวาคม 2013

คุณลักษณะที่อัปเดตมากมายได้ทำให้เครื่องมือนี้กลายเป็นเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ทั้งขนาดเล็กและขนาดใหญ่ เราจะเริ่มจากการอัปเดตของแผงองค์ประกอบก่อน และไปต่อกันที่เรื่องคอนโซล ไทม์ไลน์ และอื่นๆ

มีการปิดใช้การคัดลอกกฎของรูปแบบเป็นความคิดเห็น

ตอนนี้การคัดลอกกฎ CSS ทั้งหมดในแผง "รูปแบบ" จะรวมรูปแบบที่คุณปิดไว้ด้วย โดยกฎเหล่านั้นจะอยู่ในคลิปบอร์ดเมื่อแสดงความคิดเห็นไว้ [crbug.com/316532]

คัดลอกเป็นเส้นทาง CSS

ตอนนี้ "คัดลอกเป็นเส้นทาง CSS" พร้อมให้ใช้งานเป็นรายการเมนูสำหรับโหนด DOM ในแผงองค์ประกอบแล้ว (คล้ายกับรายการเมนูคัดลอก XPath)

คัดลอกเส้นทาง CSS

การสร้างตัวเลือก 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 ข้อมูล

คัดลอกรูปภาพเป็น URL ข้อมูล

ตอนนี้ชิ้นงานรูปภาพในแผงแหล่งข้อมูลสามารถคัดลอกเนื้อหาเป็น URI ข้อมูล (data:image/png;base64,iVBO...) ได้แล้ว

หากต้องการลองใช้ ให้ค้นหาแหล่งข้อมูลรูปภาพภายในเฟรม > [ทรัพยากร] > รูปภาพ และคลิกขวาที่ตัวอย่างรูปภาพเพื่อเข้าถึงเมนูตามบริบท จากนั้นเลือก "คัดลอกรูปภาพเป็น URL ข้อมูล" crbug.com/321132]

การกรอง URI ข้อมูล

คุณกรอง URI ข้อมูลออกจากแท็บ "เครือข่าย" ได้หากคุณไม่เคยคิดว่าข้อมูลเหล่านั้นมาก่อน เลือกไอคอนตัวกรอง

ไอคอนตัวกรอง
เพื่อดูตัวกรองทรัพยากรประเภทอื่นๆ crbug.com/313845]

การกรอง URI ข้อมูล

แก้ไขข้อบกพร่องของการจับเวลาเครือข่ายแล้ว

เราต้องขออภัยหากคุณเห็นภาพว่าใช้เวลาดาวน์โหลดถึง 300,000 ปี ;) เวลาที่ไม่ถูกต้องสำหรับทรัพยากรเครือข่ายได้รับการแก้ไขแล้ว crbug.com/309570]

ลักษณะการบันทึกของเครือข่ายสามารถควบคุมได้มากขึ้น

ลักษณะการทำงานของเครือข่ายการบันทึกจะแตกต่างกันเล็กน้อย ก่อนอื่น ปุ่มบันทึกจะทำงานในลักษณะเดียวกับที่คุณคาดหวังจากไทม์ไลน์หรือโปรไฟล์ CPU และเนื่องจากเป็นไปตามที่คาดไว้ หากคุณโหลดหน้าเว็บซ้ำขณะที่เครื่องมือสำหรับนักพัฒนาเว็บเปิดอยู่ การบันทึกเครือข่ายจะเริ่มขึ้นโดยอัตโนมัติ จากนั้นระบบจะปิดไป ดังนั้นหากคุณต้องการบันทึกกิจกรรมเครือข่ายหลังจากหน้าเว็บโหลด ให้เปิดฟีเจอร์นี้ วิธีนี้ช่วยให้เห็นภาพ Waterfall ได้ง่ายขึ้นโดยไม่ต้องมีคำขอเครือข่ายที่ล่าช้าจะทำให้ผลลัพธ์บิดเบือน crbug.com/325878]

ธีมเครื่องมือสำหรับนักพัฒนาเว็บพร้อมใช้งานแล้วผ่านส่วนขยาย

สไตล์ชีตของผู้ใช้พร้อมใช้งานผ่านการทดสอบเครื่องมือสำหรับนักพัฒนาเว็บแล้ว (ช่องทําเครื่องหมาย "อนุญาตธีม UI ที่กำหนดเอง") ซึ่งจะช่วยให้ส่วนขยาย Chrome สามารถใช้การจัดรูปแบบที่กำหนดเองกับเครื่องมือสำหรับนักพัฒนาเว็บ ดูตัวอย่างได้ที่ตัวอย่างส่วนขยายธีมสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ crbug.com/318566]

และนี่คือเนื้อหาโดยรวมของเครื่องมือสำหรับนักพัฒนาเว็บ หากคุณยังไม่เคยเข้าร่วม อย่าลืมดูฉบับพฤศจิกายน