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

Kayce Basques

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

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

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

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

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

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

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

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

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

  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 ที่ส่งผลต่อองค์ประกอบ ให้วางเมาส์เหนือองค์ประกอบในต้นไม้ 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

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

ฟิลเตอร์เชิงลบ

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

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

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

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

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

ตัวกรองเชิงลบยังทำงานร่วมกับนิพจน์ทั่วไป เช่น -/[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 แท็บพื้นที่เก็บข้อมูลแคชจะอัปเดตแบบเรียลไทม์ทุกครั้งที่คุณสร้าง อัปเดต หรือลบแคชหรือทรัพยากร ดูตัวอย่างได้ที่วิดีโอด้านล่าง

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

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

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

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

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

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

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

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

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

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

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

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

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

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