หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Kayce Basques

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

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

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

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

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

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

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

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

จำลองภาษา

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

หมายเหตุ: การอัปเดต 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

แผง Lighthouse

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

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

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

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

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

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

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

UI งานแบบยาวใหม่

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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