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

Kayce Basques
Kayce Basques
X GitHub

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

อ่านต่อหรือดูวิดีโอเวอร์ชันของบันทึกประจำรุ่นได้ที่ด้านล่าง

Assistive Console

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

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

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

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

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

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

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

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

คำแนะนำอาร์กิวเมนต์

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

คำแนะนำเกี่ยวกับอาร์กิวเมนต์ใน Console

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

หมายเหตุ:

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

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

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

หลังจากเรียกใช้ document.querySelector('p') แล้ว ตอนนี้ Console จะแสดงพร็อพเพอร์ตี้และฟังก์ชันที่ใช้ได้สำหรับองค์ประกอบนั้น

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

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

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

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

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

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

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

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

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

UI ใหม่

Lighthouse 3.0 ยังมาพร้อม UI ใหม่ด้วย ซึ่งเป็นผลมาจากการทำงานร่วมกันระหว่างทีม Lighthouse และ Chrome UX (Research & Design)

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

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

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

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

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

การรองรับ BigInt

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

ตัวอย่าง BigInt ใน Console

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

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

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

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

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

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

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

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

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

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

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

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

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