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

Kayce Basques

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

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

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

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

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

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

เรารับประกันได้ว่าเว็บแอปของคุณจะได้รับ ผู้ที่เป็นโรคตาบอดสีแดง ตาบอดสีแดง ตาบอดสีแดง และตาบอดสีแดง

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

จำลองภาษา

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

• 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 แล้ว

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

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

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

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

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

งานแบบยาวคือโค้ด JavaScript ที่ผูกขาดเทรดหลักเป็นเวลานาน ทำให้เกิดเว็บ เพื่อตรึงหน้าเว็บ

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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