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

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

• รองรับโอเปอเรเตอร์ await ระดับบนสุดในคอนโซล
• ภาพหน้าจอของส่วนหนึ่งของวิวพอร์ต และภาพหน้าจอของโหนด HTML ที่เฉพาะเจาะจง
• การไฮไลต์ตารางกริด CSS
• API ใหม่ Console สำหรับการค้นหาออบเจ็กต์
• ตัวกรองเชิงลบและตัวกรอง URL ในคอนโซล
• การนำเข้า HAR ในแผงเครือข่าย
• ทรัพยากรแคชที่ดูตัวอย่างได้
• การแก้ไขข้อบกพร่องของแคชที่คาดคะเนได้มากขึ้น
• การครอบคลุมของโค้ดระดับการบล็อก

ระดับบนสุดรอโอเปอเรเตอร์ในคอนโซล

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

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

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

ตอนนี้คุณถ่ายภาพหน้าจอส่วนใดส่วนหนึ่งของวิวพอร์ตหรือโหนด HTML ที่ต้องการได้แล้ว

ภาพหน้าจอของส่วนหนึ่งของวิวพอร์ต

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

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

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

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

วิธีถ่ายภาพหน้าจอของโหนด HTML ที่ต้องการ

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

   

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

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

3. เริ่มพิมพ์ node แล้วเลือก Capture node screenshot เครื่องมือสำหรับนักพัฒนาเว็บจะดาวน์โหลดภาพหน้าจอของ โหนดที่เลือก

   

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

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

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

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

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

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

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

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

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

ตัวกรองคอนโซลใหม่

ขณะนี้คอนโซลรองรับตัวกรองเชิงลบและตัวกรอง URL แล้ว

ตัวกรองเชิงลบ

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

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

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

• ในข้อความ
• ในชื่อไฟล์ที่เป็นต้นกำเนิดของข้อความ
• ในข้อความสแต็กเทรซ

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

ตัวกรอง URL

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

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

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

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

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

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

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

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

รูปที่ 9 การแสดงตัวอย่างแหล่งข้อมูลแคช

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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