มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (Chrome 71)

Kayce Basques

ฟีเจอร์ใหม่และการเปลี่ยนแปลงที่สำคัญของ Chrome DevTools ใน Chrome 71 ได้แก่

• วางเมาส์เหนือนิพจน์แบบเรียลไทม์เพื่อไฮไลต์โหนด DOM
• จัดเก็บโหนด DOM เป็นตัวแปรร่วม
• ข้อมูลตัวเริ่มและลำดับความสำคัญอยู่ในการนำเข้าและส่งออก HAR แล้ว
• เข้าถึงเมนูคำสั่งจากเมนูหลัก
• เบรกพอยท์ของการแสดงภาพซ้อนภาพ
• (เคล็ดลับพิเศษ) เรียกใช้MonitorEvents() ใน Console เพื่อดูการทำงานของเหตุการณ์ขององค์ประกอบ

อ่านต่อหรือดูวิดีโอเวอร์ชันของหน้าเว็บนี้:

วางเมาส์เหนือนิพจน์ Live เพื่อไฮไลต์โหนด DOM

เมื่อนิพจน์แบบเรียลไทม์ประเมินโหนด DOM ให้วางเมาส์เหนือผลลัพธ์ของนิพจน์แบบเรียลไทม์เพื่อ ไฮไลต์โหนดนั้นในวิวพอร์ต

รูปที่ 1 การวางเมาส์เหนือผลลัพธ์ Expression แบบสดเพื่อไฮไลต์โหนดในวิวพอร์ต

จัดเก็บโหนด DOM เป็นตัวแปรร่วม

หากต้องการจัดเก็บโหนด DOM เป็นตัวแปรร่วม ให้เรียกใช้นิพจน์ในคอนโซลที่ประเมินโหนด คลิกขวาที่ผลลัพธ์ แล้วเลือกจัดเก็บเป็นตัวแปรร่วม

รูปที่ 2 จัดเก็บเป็นตัวแปรร่วมในคอนโซล

หรือคลิกขวาที่โหนดในแผนผัง DOM แล้วเลือกจัดเก็บเป็นตัวแปรร่วม

รูปที่ 3 จัดเก็บเป็นตัวแปรร่วมใน DOM Tree

ขณะนี้ข้อมูลผู้ริเริ่มและลำดับความสำคัญอยู่ในการนำเข้าและส่งออก HAR แล้ว

หากคุณต้องการวิเคราะห์บันทึกเครือข่ายกับเพื่อนร่วมงาน คุณสามารถส่งออกคำขอเครือข่ายไปยัง HAR

รูปที่ 8 การส่งออกคำขอเครือข่ายไปยังไฟล์ HAR

หากต้องการนำเข้าไฟล์กลับไปที่แผงเครือข่าย เพียงลากและวางไฟล์

เมื่อคุณส่งออกไฟล์ HAR เครื่องมือสำหรับนักพัฒนาเว็บจะรวมข้อมูลผู้เริ่มและลำดับความสำคัญใน HAR เมื่อคุณนำเข้าไฟล์ HAR กลับไปยังเครื่องมือสำหรับนักพัฒนาเว็บ คอลัมน์ Initiator และ Priority จะ ป้อนข้อมูลแล้ว

ช่อง _initiator จะให้บริบทเพิ่มเติมเกี่ยวกับสาเหตุที่ทำให้มีการขอทรัพยากร ช่วงเวลานี้ แมปกับคอลัมน์ตัวเริ่มต้นในตารางคำขอ

รูปที่ 9 คอลัมน์ตัวเริ่ม

คุณยังสามารถกด Shift ค้างไว้และวางเมาส์เหนือคำขอเพื่อดูผู้เริ่มและ ทรัพยากร Dependency

รูปที่ 10 การดูตัวเริ่มและทรัพยากร Dependency

ฟิลด์ _priority จะระบุระดับความสำคัญที่เบราว์เซอร์กำหนดให้กับแหล่งข้อมูล ส่วนนี้แมปกับ คอลัมน์ลำดับความสำคัญในตารางคำขอ ซึ่งซ่อนอยู่โดยค่าเริ่มต้น

รูปที่ 11 คอลัมน์ลำดับความสำคัญ

คลิกขวาที่ส่วนหัวของตารางคำขอแล้วเลือกลำดับความสำคัญเพื่อแสดงลำดับความสำคัญ

รูปที่ 12 วิธีแสดงคอลัมน์ลำดับความสำคัญ

เข้าถึงเมนูคำสั่งจากเมนูหลัก

ใช้เมนูคำสั่งเพื่อเข้าถึงแผง แท็บ และฟีเจอร์ต่างๆ ในเครื่องมือสำหรับนักพัฒนาเว็บได้อย่างรวดเร็ว

รูปที่ 13 เมนูคำสั่ง

ตอนนี้คุณจะเปิดเมนูคำสั่งจากเมนูหลักได้แล้ว คลิกเมนูหลัก และเลือกเรียกใช้คำสั่ง

รูปที่ 14 การเปิดเมนูคำสั่งจากเมนูหลัก

เบรกพอยท์ของการแสดงภาพซ้อนภาพ

การแสดงภาพซ้อนภาพเป็น API ทดลองใหม่ที่ช่วยให้หน้าเว็บสร้างวิดีโอแบบลอยได้ เหนือเดสก์ท็อป

เปิดใช้ช่องทำเครื่องหมาย enterpictureinpicture, leavepictureinpicture และ resize ในเหตุการณ์ แผงเบรกพอยท์ของ Listener เพื่อหยุดชั่วคราวเมื่อเหตุการณ์การแสดงภาพซ้อนภาพรายการใดรายการหนึ่งเหล่านี้เริ่มทำงาน เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวในบรรทัดแรกของเครื่องจัดการ

รูปที่ 16 เหตุการณ์การแสดงภาพซ้อนภาพในแผงเบรกพอยท์ของ Listener เหตุการณ์

(เคล็ดลับพิเศษ) เรียกใช้ MonitoringEvents() ในคอนโซลเพื่อดูการทำงานของเหตุการณ์ขององค์ประกอบ

สมมติว่าคุณต้องการเพิ่มขอบสีแดงรอบปุ่มหลังจากโฟกัสและกด R, E, D แต่คุณไม่รู้ว่าจะเพิ่ม Listener ไว้ในเหตุการณ์ใด ใช้ monitorEvents() เพื่อบันทึก ของเอลิเมนต์ไปยังคอนโซล

1. รับการอ้างอิงโหนด

   

   รูปที่ 17 การใช้จัดเก็บเป็นตัวแปรร่วมเพื่อรับการอ้างอิงไปยังโหนด

2. ส่งต่อโหนดเป็นอาร์กิวเมนต์แรกไปยัง monitorEvents()

   

   รูปที่ 18 กำลังส่งโหนดไปยัง monitorEvents()

3. โต้ตอบกับโหนด เครื่องมือสำหรับนักพัฒนาเว็บจะบันทึกเหตุการณ์ทั้งหมดของโหนดไปยังคอนโซล

   

   รูปที่ 19 กิจกรรมของโหนดในคอนโซล

เรียกใช้ unmonitorEvents() เพื่อหยุดบันทึกเหตุการณ์ลงในคอนโซล

unmonitorEvents(temp1);

ส่งต่ออาร์เรย์เป็นอาร์กิวเมนต์ที่ 2 ไปยัง monitorEvents() หากคุณต้องการตรวจสอบเฉพาะบางเหตุการณ์ หรือประเภทเหตุการณ์

monitorEvents(temp1, ['mouse', 'focus']);

ประเภท mouse จะบอกให้เครื่องมือสำหรับนักพัฒนาเว็บบันทึกเหตุการณ์ที่เกี่ยวข้องกับเมาส์ทั้งหมด เช่น mousedown และ click ประเภทอื่นๆ ที่รองรับ ได้แก่ key, touch และ control

โปรดดูการอ้างอิงบรรทัดคำสั่งเพื่อดูฟังก์ชันอื่นๆ ที่มีประโยชน์ซึ่งเรียกใช้จากคอนโซลได้

ดาวน์โหลดเวอร์ชันตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือ เบต้า เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องทางพรีวิวเหล่านี้จะทำให้คุณเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และพบปัญหาในเว็บไซต์ก่อนผู้ใช้

ติดต่อทีม Chrome DevTools

ใช้ตัวเลือกต่อไปนี้เพื่อพูดคุยเกี่ยวกับฟีเจอร์ใหม่และการเปลี่ยนแปลงในโพสต์ หรืออื่นๆ ที่เกี่ยวข้องกับเครื่องมือสำหรับนักพัฒนาเว็บ

• ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
• รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
• ทวีตที่ @ChromeDevTools
• แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

รายการข้อมูลทั้งหมดที่ครอบคลุมในซีรีส์มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ