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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ:

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

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

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

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

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

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

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

ขณะนี้ Console จะเสนอแนะ "รอ" ใน UI การเติมข้อความอัตโนมัติ

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

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

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

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

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

UI ใหม่

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

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

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

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

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

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

การสนับสนุน BigInt

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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