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

Kayce Basques

จำลองภาวะบกพร่องทางการมองเห็น

เปิดแท็บการแสดงผล และใช้ฟีเจอร์จำลองการมองเห็นที่บกพร่องใหม่เพื่อให้ทราบถึงประสบการณ์การใช้งานเว็บไซต์ของผู้ที่มีปัญหาการมองเห็นประเภทต่างๆ

การจําลองภาวะมองเห็นภาพไม่ชัดเจน

การจําลองภาวะมองเห็นภาพไม่ชัดเจน

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สามารถจำลองภาพเบลอและภาวะบกพร่องในการมองเห็นสีประเภทต่อไปนี้

  • ตาบอดสีแดง: มองไม่เห็นแสงสีแดง
  • ตาบอดสีเขียว: มองไม่เห็นสีเขียว
  • ตาบอดสีน้ำเงิน: มองไม่เห็นแสงสีน้ำเงิน
  • ตาบอดสี: ไม่สามารถรับรู้สีใดๆ เลย ยกเว้นเฉดสีเทา (พบได้น้อยมาก)

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

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

ส่งความคิดเห็นไปยังปัญหา Chromium #1003700 หรืออ่านเพิ่มเติมเกี่ยวกับการใช้งาน

จําลองภาษา

ตอนนี้คุณจําลองภาษาได้แล้วโดยการตั้งค่าตําแหน่งในเซ็นเซอร์ > ตําแหน่ง เปิดเมนูคำสั่ง แล้วพิมพ์ Sensors เพื่อเข้าถึงแท็บเซ็นเซอร์ หลังจากดำเนินการเหล่านี้แล้ว DevTools จะแก้ไขภาษาเริ่มต้นปัจจุบัน ซึ่งจะส่งผลต่อสิ่งต่อไปนี้

  • Intl.* API เช่น new Intl.NumberFormat().resolvedOptions().locale
  • JavaScript API อื่นๆ ที่คำนึงถึงภาษา เช่น String.prototype.localeCompare และ *.prototype.toLocaleString เช่น 123_456..toLocaleString()
  • DOM API เช่น navigator.language และ navigator.languages
  • ส่วนหัวคำขอ HTTP ของ Accept-Language

ดูตัวอย่างโค้ดที่ขึ้นอยู่กับภาษาเพื่อลองใช้ด้วยตนเอง

ส่งความคิดเห็นไปยังปัญหา Chromium #1051822

การแก้ไขข้อบกพร่องนโยบายเครื่องมือฝังแบบข้ามต้นทาง (COEP)

ตอนนี้แผงเครือข่ายมีข้อมูลการแก้ไขข้อบกพร่องของนโยบายเครื่องมือฝังแบบข้ามต้นทาง

ตอนนี้คอลัมน์สถานะจะแสดงคำอธิบายสั้นๆ เกี่ยวกับสาเหตุที่คำขอถูกบล็อก รวมถึงลิงก์สำหรับดูส่วนหัวของคำขอนั้นเพื่อแก้ไขข้อบกพร่องเพิ่มเติม

คำขอที่ถูกบล็อกในคอลัมน์สถานะ

ส่วนส่วนหัวการตอบกลับของแท็บส่วนหัวมีคำแนะนำเพิ่มเติมเกี่ยวกับวิธีแก้ปัญหา

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

ส่งความคิดเห็นไปยังปัญหา Chromium #1051466

ไอคอนใหม่สําหรับเบรกพอยต์ เบรกพอยต์แบบมีเงื่อนไข และจุดบันทึก

แผงแหล่งที่มามีไอคอนใหม่สําหรับจุดหยุดพัก จุดหยุดพักแบบมีเงื่อนไข และจุดบันทึก ดังนี้

เหตุผลที่เราออกแบบไอคอนใหม่คือเพื่อให้ UI สอดคล้องกับเครื่องมือแก้ไขข้อบกพร่อง GUI อื่นๆ มากขึ้น (ซึ่งมักจะใช้สีแดงสำหรับจุดหยุดพัก) และเพื่อให้แยกความแตกต่างระหว่าง 3 ฟีเจอร์นี้ได้ง่ายขึ้น

ส่งความคิดเห็นไปยังปัญหา Chromium #1041830

ใช้คีย์เวิร์ดตัวกรอง cookie-path ใหม่ในแผงเครือข่ายเพื่อมุ่งเน้นที่คำขอเครือข่ายซึ่งตั้งค่าเส้นทางคุกกี้ที่เฉพาะเจาะจง

ดูกรองคำขอตามพร็อพเพอร์ตี้เพื่อดูคีย์เวิร์ดพิเศษอื่นๆ เช่น cookie-path

ยึดกับด้านซ้ายจากเมนูคำสั่ง

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

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

ส่งความคิดเห็นไปยังปัญหา Chromium #1011679

ตัวเลือก Settings ในเมนูหลักได้ย้ายแล้ว

ตอนนี้ตัวเลือกในการเปิดการตั้งค่าจากเมนูหลักจะอยู่ในเครื่องมือเพิ่มเติม

"เมนูหลัก" เปิดขึ้นโดยมี "เครื่องมือเพิ่มเติม" โฟกัสที่ "การตั้งค่า"

ส่งความคิดเห็นไปยังปัญหา Chromium #1050855

แผงการตรวจสอบเปลี่ยนเป็นแผง Lighthouse แล้ว

ทีม DevTools และ Lighthouse ได้รับความคิดเห็นจากนักพัฒนาเว็บอยู่บ่อยครั้งว่าพวกเขาได้ยินมาว่าสามารถเรียกใช้ Lighthouse จาก DevTools ได้ แต่พอลองใช้กลับไม่พบแผง "Lighthouse" ดังนั้นตอนนี้แผงการตรวจสอบจึงเปลี่ยนเป็นแผง Lighthouse

แผง Lighthouse

ลบการลบล้างในเครื่องทั้งหมดในโฟลเดอร์

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

ลบการลบล้างทั้งหมด

ส่งความคิดเห็นไปยังปัญหา Chromium #1016501

UI งานที่ใช้เวลานานที่อัปเดตแล้ว

งานที่ใช้เวลานานคือโค้ด JavaScript ที่ผูกขาดชุดข้อความหลักเป็นเวลานาน ทําให้หน้าเว็บค้าง

คุณสามารถแสดงภาพงานระยะยาวในแผงประสิทธิภาพมาระยะหนึ่งแล้ว แต่ใน Chrome 83 เราได้อัปเดต UI การแสดงภาพงานระยะยาวในแผงประสิทธิภาพ ตอนนี้ส่วนงานระยะยาวของงานจะมีพื้นหลังเป็นสีแดงลายทาง

UI งานที่ใช้เวลานานแบบใหม่

ส่งความคิดเห็นไปยังปัญหา Chromium #1054447

การรองรับไอคอนที่มาสก์ได้ในแผง Manifest

Android Oreo มีไอคอนแบบปรับอัตโนมัติซึ่งแสดงไอคอนแอปในรูปร่างที่หลากหลายในอุปกรณ์รุ่นต่างๆ ไอคอนที่มาสก์ได้เป็นรูปแบบไอคอนใหม่ซึ่งรองรับไอคอนแบบปรับอัตโนมัติ ซึ่งช่วยให้มั่นใจได้ว่าไอคอน PWA จะดูดีในอุปกรณ์ที่รองรับมาตรฐานไอคอนที่มาสก์ได้

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

ช่องทำเครื่องหมาย "แสดงเฉพาะพื้นที่ปลอดภัยขั้นต่ำสำหรับไอคอนที่มาสก์ได้"

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

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

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

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

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

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