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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

เมื่อ Live Expression ประเมินเป็นโหนด DOM ให้วางเมาส์เหนือผลลัพธ์ของ Live Expression เพื่อ ไฮไลต์โหนดนั้นในวิวพอร์ต

การวางเมาส์เหนือผลลัพธ์ของ Live Expression เพื่อไฮไลต์โหนดในวิวพอร์ต

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คอลัมน์ผู้เริ่ม

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

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

ดูผู้เริ่มและทรัพยากร Dependency

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

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

คอลัมน์ลำดับความสำคัญ

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

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

วิธีแสดงคอลัมน์ลำดับความสำคัญ

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

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

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

เมนูคำสั่ง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ส่งโหนดไปยัง monitorEvents()

    รูปที่ 18 ส่งผ่านโหนดไปยัง monitorEvents()

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

    เหตุการณ์ของโหนดในคอนโซล

    รูปที่ 19 เหตุการณ์ของโหนดในคอนโซล

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

unmonitorEvents(temp1);

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

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

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

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

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

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

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

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

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

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