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

Kayce Basques
Kayce Basques

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

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

คอนโซลรองรับโอเปอเรเตอร์ 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 ของแผงองค์ประกอบแล้ว

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวกรอง URL

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59