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

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

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

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

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

แผงแหล่งที่มามีไอคอนใหม่สำหรับเบรกพอยต์ เบรกพอยต์แบบมีเงื่อนไข และ 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 แล้ว

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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