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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

จำลองภาษา

ตอนนี้คุณสามารถจำลองภาษาได้โดยการตั้งค่าตำแหน่งในเซ็นเซอร์ > ตำแหน่ง เปิดเมนูคำสั่ง แล้วพิมพ์ 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

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

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

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

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

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

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

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

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

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

ไอคอนใหม่สำหรับเบรกพอยท์ เบรกพอยท์แบบมีเงื่อนไข และ Logpoint

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

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

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

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

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

ย้ายไปทางซ้ายจากเมนูคำสั่ง

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

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

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

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

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

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

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

ตอนนี้แผงการตรวจสอบคือแผง Lighthouse

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

แผง Lighthouse

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

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

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

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

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

งานที่ใช้เวลานานคือโค้ด JavaScript ที่ใช้เทรดหลักเป็นเวลานาน ซึ่งทำให้หน้าเว็บค้าง

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

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

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

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

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

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

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

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

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

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

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

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

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