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

Kayce Basques
Kayce Basques
X GitHub

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

ตัวดำเนินการ await ระดับบนสุดในคอนโซล

ตอนนี้ Console รองรับโอเปอเรเตอร์ระดับบนสุดของ await แล้ว

การใช้โอเปอเรเตอร์ await ระดับบนสุดในคอนโซล

รูปที่ 1 การใช้โอเปอเรเตอร์ระดับบนสุดในคอนโซลawait

เวิร์กโฟลว์ภาพหน้าจอใหม่

ตอนนี้คุณสามารถถ่ายภาพหน้าจอของบางส่วนของ Viewport หรือของโหนด HTML ที่เฉพาะเจาะจงได้แล้ว

ภาพหน้าจอของบางส่วนของ Viewport

วิธีถ่ายภาพหน้าจอของวิวพอร์ตบางส่วน

  1. คลิกตรวจสอบ ตรวจสอบ หรือกด Command+Shift+C (Mac) หรือ Control+Shift+C (Windows, Linux) เพื่อเข้าสู่โหมดตรวจสอบองค์ประกอบ
  2. กด Command (Mac) หรือ Control (Windows, Linux) ค้างไว้ แล้วเลือกส่วนของ วิวพอร์ตที่ต้องการถ่ายภาพหน้าจอ
  3. ปล่อยเมาส์ DevTools จะดาวน์โหลดภาพหน้าจอของส่วนที่คุณเลือก

การถ่ายภาพหน้าจอบางส่วนของวิวพอร์ต

รูปที่ 2 การถ่ายภาพหน้าจอบางส่วนของวิวพอร์ต

ภาพหน้าจอของโหนด HTML ที่เฉพาะเจาะจง

วิธีถ่ายภาพหน้าจอของโหนด HTML ที่เฉพาะเจาะจง

  1. เลือกองค์ประกอบในแผงองค์ประกอบ

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

    รูปที่ 3 ในตัวอย่างนี้ เป้าหมายคือการถ่ายภาพหน้าจอของส่วนหัวสีน้ำเงินที่มีข้อความ Tools โปรดทราบว่าโหนดนี้เลือกไว้แล้วในแผนผัง DOM ของแผงองค์ประกอบ

  2. เปิดเมนูคำสั่ง

  3. เริ่มพิมพ์ node แล้วเลือก Capture node screenshot DevTools จะดาวน์โหลดภาพหน้าจอของ โหนดที่เลือก

    ผลลัพธ์ของคำสั่ง "จับภาพหน้าจอของโหนด"

    รูปที่ 4 ผลลัพธ์ของคำสั่ง Capture node screenshot

การไฮไลต์ตารางกริด CSS

หากต้องการดู CSS Grid ที่มีผลต่อองค์ประกอบ ให้วางเมาส์เหนือองค์ประกอบในแผนผัง DOM ของแผงองค์ประกอบ เส้นขอบที่เป็นเส้นประจะปรากฏรอบๆ รายการแต่ละรายการในตารางกริด ฟีเจอร์นี้จะใช้ได้เฉพาะเมื่อรายการที่เลือกหรือรายการระดับบนสุดของรายการที่เลือกมีdisplay:grid

การไฮไลต์ตารางกริด CSS

รูปที่ 5 การไฮไลต์ตารางกริด CSS

ดูข้อมูลพื้นฐานเกี่ยวกับ CSS Grid ได้ในวิดีโอด้านล่างนี้ภายในเวลาไม่ถึง 2 นาที

API ใหม่สำหรับการค้นหาออบเจ็กต์ฮีป

เรียกใช้ queryObjects(Constructor) จากคอนโซลเพื่อแสดงผลอาร์เรย์ของออบเจ็กต์ที่สร้างด้วยตัวสร้างที่ระบุ เช่น

  • queryObjects(Promise) ส่งคืน Promise ทั้งหมด
  • queryObjects(HTMLElement). แสดงผลองค์ประกอบ HTML ทั้งหมด
  • queryObjects(foo) โดยที่ foo คือชื่อฟังก์ชัน แสดงผลออบเจ็กต์ทั้งหมดที่สร้างอินสแตนซ์ ผ่าน new foo()

ขอบเขตของ queryObjects() คือบริบทการดำเนินการที่เลือกอยู่ในปัจจุบันในคอนโซล ดูการเลือกบริบทการดำเนินการ

ตัวกรอง Console ใหม่

ตอนนี้ Console รองรับตัวกรองเชิงลบและตัวกรอง URL แล้ว

ฟิลเตอร์เนกาทีฟ

พิมพ์ -<text> ในช่องตัวกรองเพื่อกรองข้อความ Console ที่มี <text> ออก

ตัวอย่างข้อความ 3 รายการที่จะถูกกรองออก

รูปที่ 6 คำสั่งแรกจะบันทึก one, two, three และ four ไปยังคอนโซล two ซ่อนอยู่เนื่องจากมีการป้อน -two ในช่องตัวกรอง

เครื่องมือสำหรับนักพัฒนาเว็บจะกรองข้อความออกหากพบ <text>

  • ในข้อความ
  • ในชื่อไฟล์ที่ข้อความมาจาก
  • ในข้อความ Stack Trace

ตัวกรองเชิงลบยังใช้ได้กับนิพจน์ทั่วไป เช่น -/[4-5]*ms/

ตัวกรอง URL

พิมพ์ url:<text> ในช่องตัวกรองเพื่อแสดงเฉพาะข้อความที่มาจากสคริปต์ซึ่งมี URL ที่มี <text>

ตัวกรองใช้การจับคู่แบบคร่าวๆ หาก <text> ปรากฏที่ใดก็ตามใน URL เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงข้อความ

ตัวอย่างการกรอง URL

รูปที่ 7 การใช้การกรอง URL เพื่อแสดงเฉพาะข้อความที่มาจากสคริปต์ซึ่งมี URL ที่รวม hymn เมื่อวางเมาส์เหนือชื่อสคริปต์ คุณจะเห็นว่าชื่อโฮสต์มีข้อความนี้

การนำเข้า HAR ในแผงเครือข่าย

ลากและวางไฟล์ HAR ลงในแผงเครือข่ายเพื่อนำเข้า

การนำเข้าไฟล์ HAR

รูปที่ 8 การนำเข้าไฟล์ HAR

ทรัพยากรแคชที่แสดงตัวอย่างได้ในแผงแอปพลิเคชัน

คลิกแถวในตารางที่เก็บข้อมูลแคชเพื่อดูตัวอย่างของทรัพยากรนั้นที่ด้านล่างตาราง

การแสดงตัวอย่างทรัพยากรแคช

รูปที่ 9 การแสดงตัวอย่างทรัพยากรแคช

การแก้ไขข้อบกพร่องของแคชที่ตอบสนองดียิ่งขึ้น

ใน Chrome 61 และรุ่นก่อนหน้า การแก้ไขข้อบกพร่องของแคชที่สร้างด้วย Cache API นั้นค่อนข้างยาก เช่น เมื่อหน้าเว็บสร้างแคชใหม่ คุณต้องรีเฟรชหน้าเว็บหรือเครื่องมือสำหรับนักพัฒนาเว็บด้วยตนเองเพื่อดูแคชใหม่

ใน Chrome 62 ตอนนี้แท็บ Cache Storage จะอัปเดตแบบเรียลไทม์ทุกครั้งที่คุณสร้าง อัปเดต หรือ ลบแคชหรือทรัพยากร ดูตัวอย่างได้ที่วิดีโอด้านล่าง

ดูการสาธิตพื้นที่เก็บข้อมูลแคชเพื่อลองใช้ด้วยตัวคุณเอง

การครอบคลุมของโค้ดระดับบล็อก

ใน Chrome 61 และเวอร์ชันก่อนหน้า แท็บการครอบคลุมจะทำเครื่องหมายโค้ดทั้งหมดภายในฟังก์ชันว่ามีการใช้งาน ตราบใดที่มีการเรียกใช้ฟังก์ชัน

ตัวอย่างแท็บความครอบคลุมใน Chrome 61

รูปที่ 10 ตัวอย่างแท็บความครอบคลุมใน Chrome 61 ระบบจะทำเครื่องหมายบรรทัดที่ 4 ว่าใช้แล้ว แม้ว่าจะไม่เคยมีการดำเนินการก็ตาม

ตั้งแต่ Chrome 62 เป็นต้นไป แท็บความครอบคลุมจะบอกให้คุณทราบว่าโค้ดใดภายในฟังก์ชันที่เรียกใช้

ตัวอย่างแท็บความครอบคลุมใน Chrome 62

รูปที่ 11 ตัวอย่างแท็บความครอบคลุมใน Chrome 62 ระบบจะทำเครื่องหมายบรรทัดที่ 4 ว่าไม่ได้ใช้

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

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

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

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

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

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