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

Kayce Basques

ฟีเจอร์ใหม่สำหรับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 68:

อ่านต่อหรือดูบันทึกประจำรุ่นที่ด้านล่าง

คอนโซลความช่วยเหลือ

Chrome 68 มาพร้อมกับฟีเจอร์ใหม่ๆ ของ Console บางรายการที่เกี่ยวข้องกับการเติมข้อความอัตโนมัติและการแสดงตัวอย่าง

การประเมินที่ตั้งใจ

เมื่อคุณพิมพ์นิพจน์ในคอนโซล ทางคอนโซลจะแสดงตัวอย่างของผลลัพธ์ของนิพจน์ดังกล่าวใต้เคอร์เซอร์ได้

คอนโซลกำลังพิมพ์ผลลัพธ์ของการดำเนินการ Sort() ก่อนที่จะดำเนินการอย่างชัดเจน

รูปที่ 1 คอนโซลกำลังพิมพ์ผลลัพธ์ของการดำเนินการ sort() ก่อนที่จะมีการเรียกใช้อย่างชัดแจ้ง

วิธีเปิดใช้การประเมินอย่างตั้งใจ

  1. เปิดคอนโซล
  2. เปิดการตั้งค่าคอนโซล ปุ่มการตั้งค่าคอนโซล
  3. เปิดใช้ช่องทำเครื่องหมายการประเมินอย่างตั้งใจ

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

คำแนะนำสำหรับอาร์กิวเมนต์

ขณะที่คุณพิมพ์ฟังก์ชัน Console จะแสดงอาร์กิวเมนต์ที่ฟังก์ชันคาดหวัง

คำแนะนำสำหรับอาร์กิวเมนต์ในคอนโซล

รูปที่ 2 ตัวอย่างต่างๆ ของคำแนะนำอาร์กิวเมนต์ในคอนโซล

หมายเหตุ

  • เครื่องหมายคำถามที่อยู่ก่อนอาร์กิวเมนต์ เช่น ?options จะใช้แทนอาร์กิวเมนต์ไม่บังคับ
  • จุดไข่ปลาก่อนอาร์กิวเมนต์ เช่น ...items จะหมายถึงการกระจาย
  • ฟังก์ชันบางอย่าง เช่น CSS.supports() ยอมรับลายเซ็นอาร์กิวเมนต์หลายรายการ

เติมข้อความอัตโนมัติหลังดำเนินการฟังก์ชัน

หลังจากเปิดใช้ Eager Evaluation แล้ว ตอนนี้คอนโซลจะแสดงคุณสมบัติและฟังก์ชันที่ใช้ได้หลังจากที่คุณพิมพ์ฟังก์ชันแล้ว

หลังจากเรียกใช้ document.querySelector('p') คอนโซลจะสามารถแสดงคุณสมบัติและฟังก์ชันที่ใช้ได้สำหรับองค์ประกอบนั้น

รูปที่ 3 ภาพหน้าจอด้านบนแสดงลักษณะการทำงานแบบเก่า และภาพหน้าจอด้านล่างแสดงลักษณะการทำงานใหม่ที่รองรับการเติมฟังก์ชันอัตโนมัติ

เติมข้อความอัตโนมัติของคีย์เวิร์ด ES2017

คีย์เวิร์ด ES2017 เช่น await พร้อมใช้งานแล้วใน UI การเติมข้อความอัตโนมัติของคอนโซล

ตอนนี้คอนโซลจะแนะนำ "รอ" ใน UI การเติมข้อความอัตโนมัติ

รูปที่ 4 ตอนนี้คอนโซลจะแนะนำ await ใน UI การเติมข้อความอัตโนมัติ

การตรวจสอบที่รวดเร็วและน่าเชื่อถือยิ่งขึ้น รวมถึง UI ใหม่และการตรวจสอบใหม่

Chrome 68 จะมาพร้อม Lighthouse 3.0 ส่วนถัดไปจะเป็นข้อมูลสรุปเกี่ยวกับการเปลี่ยนแปลงที่ยิ่งใหญ่ที่สุด ดูเรื่องราวทั้งหมดได้ในการประกาศ Lighthouse 3.0

การตรวจสอบที่รวดเร็วและน่าเชื่อถือมากขึ้น

Lighthouse 3.0 มีเครื่องมือตรวจสอบภายในตัวใหม่ ชื่อว่า Lantern ซึ่งมีรหัสกำกับ ซึ่งทำให้ดำเนินการตรวจสอบได้เร็วขึ้นและมีความแปรปรวนระหว่างการเรียกใช้น้อยลง

UI ใหม่

Lighthouse 3.0 ยังมาพร้อมกับ UI ใหม่ด้วยการทำงานร่วมกันระหว่างทีม Lighthouse และทีม UX ของ Chrome (ฝ่ายวิจัยและออกแบบ)

UI รายงานใหม่ใน Lighthouse 3.0

รูปที่ 5 UI รายงานใหม่ใน Lighthouse 3.0

การตรวจสอบใหม่

Lighthouse 3.0 ยังมาพร้อมกับการตรวจสอบใหม่ 4 รายการดังนี้

  • การแสดงผลที่มีเนื้อหาเต็มครั้งแรก
  • robots.txt ไม่ถูกต้อง
  • ใช้รูปแบบวิดีโอสำหรับเนื้อหาภาพเคลื่อนไหว
  • หลีกเลี่ยงการเดินทางไป-กลับที่มีค่าใช้จ่ายสูงหลายครั้งไปยังต้นทางต่างๆ

ฝ่ายสนับสนุน BigInt

Chrome 68 รองรับตัวเลขดั้งเดิมใหม่ที่ชื่อ BigInt BigInt ช่วยให้คุณแสดงจำนวนเต็มได้แม่นยํา ลองใช้งานใน Console

ตัวอย่างของ BigInt ในคอนโซล

รูปที่ 6 ตัวอย่างของ BigInt ในคอนโซล

เพิ่มเส้นทางพร็อพเพอร์ตี้ไปยังการดู

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

ตัวอย่าง "เพิ่มเส้นทางพร็อพเพอร์ตี้เพื่อดู"

รูปที่ 7 ตัวอย่างเพิ่มเส้นทางพร็อพเพอร์ตี้เพื่อดู

ย้าย "แสดงการประทับเวลา" ไปที่การตั้งค่าแล้ว

ช่องทำเครื่องหมายแสดงการประทับเวลาซึ่งก่อนหน้านี้อยู่ในการตั้งค่าคอนโซล ปุ่มการตั้งค่าคอนโซล ได้ย้ายไปที่การตั้งค่า

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

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

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

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

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

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

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

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