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

Kayce Basques

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

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

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

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

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

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

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

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

จําลองภาษา

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

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

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

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

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

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

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

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

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

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

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

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

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

ดูคําขอเครือข่ายที่ตั้งเส้นทางคุกกี้ที่เฉพาะเจาะจง

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

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

ยึดกับด้านซ้ายจากเมนูคำสั่ง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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