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

Kayce Basques

ฟีเจอร์ใหม่ใน DevTools ของ Chrome 68

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

Assistive Console

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

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ:

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

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

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

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

รูปที่ 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 และทีม UX (การวิจัยและการออกแบบ) ของ Chrome

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

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

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

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

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

การรองรับ BigInt

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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