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

Kayce Basques

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

• การประเมินอย่างตั้งใจ ขณะที่พิมพ์นิพจน์ คอนโซลจะแสดงตัวอย่างผลลัพธ์
• คำแนะนำเกี่ยวกับอาร์กิวเมนต์ ขณะที่คุณพิมพ์ฟังก์ชัน คอนโซลจะแสดงอาร์กิวเมนต์ที่คาดหมายสำหรับฟังก์ชันนั้น
• การเติมฟังก์ชันอัตโนมัติ หลังจากพิมพ์การเรียกใช้ฟังก์ชัน เช่น document.querySelector('p') คอนโซลจะแสดงฟังก์ชันและพร็อพเพอร์ตี้ที่ค่าผลลัพธ์รองรับ
• คีย์เวิร์ด ES2017 ในคอนโซล คีย์เวิร์ด เช่น await พร้อมใช้งานแล้วใน UI ที่เติมข้อความอัตโนมัติ
• Lighthouse 3.0 ในแผงการตรวจสอบ การตรวจสอบที่รวดเร็วขึ้นและสอดคล้องกันมากขึ้น รวมถึงมี UI ใหม่ และการตรวจสอบใหม่
• BigInt ลองใช้จำนวนเต็มใหม่สำหรับความถูกต้องแม่นยำของ JavaScript ในคอนโซล
• การเพิ่มเส้นทางพร็อพเพอร์ตี้ไปยังแผงหน้าปัด เพิ่มคุณสมบัติจากแผงขอบเขตไปยังนาฬิกา แผง
• "แสดงการประทับเวลา" ย้ายไปที่การตั้งค่า

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

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

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

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

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

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

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

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

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

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

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

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

หมายเหตุ:

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

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

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

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

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

ตอนนี้คีย์เวิร์ดใน ES2017 เช่น await พร้อมให้ใช้งานแล้วใน 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 (วิจัยและออกแบบ)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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