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

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

Kayce Basques

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

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

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

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

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

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

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

ส่งความคิดเห็นไปยังปัญหา 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

หมายเหตุ: การอัปเดต navigator.language และ navigator.languages จะไม่ปรากฏทันที แต่จะได้รับการแสดงหลังจากการนำทางครั้งถัดไปหรือการโหลดหน้าเว็บซ้ำแล้วเท่านั้น การเปลี่ยนแปลงส่วนหัว HTTP ของ Accept-Language จะมีผลสำหรับคำขอต่อๆ ไปเท่านั้น

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

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

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

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

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

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

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

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

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

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

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

เบรกพอยท์ จะแสดงเป็นวงกลมสีแดง
เบรกพอยท์แบบมีเงื่อนไข จะแสดงเป็นวงกลมสีขาวครึ่งสีแดงแทน
จุดตรวจสอบ จะแสดงเป็นวงกลมสีแดงพร้อมไอคอน Console

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

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

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

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

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

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

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

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

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

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

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

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

ทีมเครื่องมือสำหรับนักพัฒนาเว็บและ 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 หรือเบต้าเป็นเบราว์เซอร์สำหรับการพัฒนาเริ่มต้น ตัวอย่างช่องทางเหล่านี้จะช่วยให้คุณสามารถเข้าถึงฟีเจอร์ล่าสุดของเครื่องมือสำหรับนักพัฒนาเว็บ ทดสอบ API แพลตฟอร์มเว็บที่ล้ำสมัย และค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะทำงานได้

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

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

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