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

Kayce Basques

ฟีเจอร์ใหม่และการเปลี่ยนแปลงที่สำคัญที่กำลังจะมาถึงในเครื่องมือสำหรับนักพัฒนาเว็บของ Chrome ใน Chrome 71 มีดังนี้

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

อ่านต่อหรือดูหน้านี้ในเวอร์ชันวิดีโอ

วางเมาส์เหนือนิพจน์แบบเรียลไทม์เพื่อไฮไลต์โหนด DOM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

นอกจากนี้ คุณยังกด Shift ค้างไว้และวางเมาส์เหนือคําขอเพื่อดูเงื่อนไขเริ่มต้นและข้อกําหนดที่เกี่ยวข้องได้ด้วย

รูปที่ 10 การดูเงื่อนไขเริ่มต้นและทรัพยากร Dependency

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

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

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

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

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

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

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

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

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

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

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

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

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

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

สมมติว่าคุณต้องการเพิ่มเส้นขอบสีแดงรอบปุ่มหลังจากโฟกัสปุ่มนั้นและกด 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 หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ได้ก่อนที่ผู้ใช้จะพบ

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools