มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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 จากเมนูคำสั่ง

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

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

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

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

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

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

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

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

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

แผง Lighthouse

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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