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

Jecelyn Yeen

การสนับสนุนการแก้ไขข้อบกพร่องสำหรับการละเมิด Trusted Types

เบรกพอยต์ในการละเมิด Trusted Type

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

Trusted Types API ช่วยป้องกันช่องโหว่ Cross-site Scripting ที่อิงตาม DOM ดูวิธีเขียน ตรวจสอบ และดูแลรักษาแอปพลิเคชันให้ปราศจากช่องโหว่ DOM XSS ด้วยประเภทที่เชื่อถือได้ที่นี่

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

เบรกพอยต์ในการละเมิด Trusted Type

ปัญหา Chromium: 1142804

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

ลิงก์ปัญหาในแผงแหล่งที่มากับแท็บปัญหา

ปัญหา Chromium: 1150883

จับภาพหน้าจอของโหนดที่อยู่นอกขอบเขตการแสดงผล

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

ในแผงองค์ประกอบ ให้คลิกขวาที่องค์ประกอบแล้วเลือกจับภาพหน้าจอโหนด

จับภาพหน้าจอของโหนดที่อยู่นอกขอบเขตการแสดงผล

ปัญหา Chromium: 1003629

แท็บโทเค็นความน่าเชื่อถือใหม่สําหรับคําขอเครือข่าย

ตรวจสอบคําขอเครือข่ายโทเค็นความน่าเชื่อถือด้วยแท็บโทเค็นความน่าเชื่อถือใหม่

โทเค็นความน่าเชื่อถือคือ API ใหม่ที่จะช่วยป้องกันการประพฤติมิชอบและแยกบ็อตออกจากมนุษย์จริง โดยไม่ต้องมีการติดตามแบบพาสซีฟ ดูวิธีเริ่มต้นใช้งานโทเค็นความน่าเชื่อถือ

การสนับสนุนเพิ่มเติมสำหรับการแก้ไขข้อบกพร่องจะพร้อมใช้งานในรุ่นถัดไป

แท็บโทเค็นความน่าเชื่อถือใหม่สําหรับคําขอเครือข่าย

ปัญหา Chromium: 1126824

Lighthouse 7 ในแผง Lighthouse

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 7 แล้ว ดูรายการการเปลี่ยนแปลงทั้งหมดได้ในบันทึกประจำรุ่น

Lighthouse 7 ในแผง Lighthouse

การตรวจสอบใหม่ใน Lighthouse 7

  • โหลดรูปภาพ Largest Contentful Paint (LCP) ล่วงหน้า ตรวจสอบว่ารูปภาพที่ใช้โดยองค์ประกอบ LCP มีการโหลดล่วงหน้าเพื่อปรับปรุงเวลา LCP หรือไม่
  • ปัญหาที่บันทึกไว้ในแผง Issues บ่งบอกรายการปัญหาที่ยังไม่ได้รับการแก้ไขในแผง Issues
  • Progressive Web App (PWA) หมวดหมู่ PWA มีการเปลี่ยนแปลงอย่างมาก

  • ตอนนี้กลุ่มติดตั้งได้ทำงานด้วยการตรวจสอบความสามารถที่เปิดใช้เกณฑ์การติดตั้งได้ของ Chrome ทั้งหมด สัญญาณเหล่านี้เหมือนกับที่เห็นในแผงไฟล์ Manifest

    • การตรวจสอบ "ลงทะเบียน Service Worker…" จะย้ายไปอยู่ในกลุ่มเพิ่มประสิทธิภาพ PWA และการตรวจสอบ "ใช้ HTTPS" จะรวมอยู่ในการตรวจสอบ "ข้อกําหนดด้านความสามารถในการติดตั้ง" หลัก
    • ระบบจะนำกลุ่มรวดเร็วเชื่อถือได้ออก เนื่องจากการตรวจสอบ "ข้อกำหนดด้านความสามารถในการติดตั้ง" ที่ปรับปรุงใหม่รวมการตรวจสอบความสามารถแบบออฟไลน์ด้วย เราจึงนำการตรวจสอบ "หน้าปัจจุบันและ start_url ตอบสนองด้วยรหัส 200 เมื่อออฟไลน์" ออก และนําการตรวจสอบ "การโหลดหน้าเว็บเร็วพอเมื่อใช้เครือข่ายมือถือ" ออกด้วย

ปัญหา Chromium: 772558

การอัปเดตแผงองค์ประกอบ

รองรับการบังคับใช้สถานะ :target ของ CSS

ตอนนี้คุณใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อบังคับและตรวจสอบสถานะ :target ของ CSS ได้แล้ว

ในแผงองค์ประกอบ ให้เลือกองค์ประกอบแล้วสลับสถานะองค์ประกอบ เปิดใช้ช่องทำเครื่องหมาย :target เพื่อบังคับและตรวจสอบสไตล์

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

การบังคับใช้สถานะ CSS `:target`

ปัญหา Chromium: 1156628

ทางลัดใหม่สำหรับทำซ้ำองค์ประกอบ

ใช้แป้นพิมพ์ลัดทำซ้ำองค์ประกอบใหม่เพื่อโคลนองค์ประกอบได้ทันที

คลิกขวาที่องค์ประกอบในแผงองค์ประกอบ แล้วเลือกทำซ้ำองค์ประกอบ ระบบจะสร้างองค์ประกอบใหม่ภายใต้องค์ประกอบนั้น

หรือจะคัดลอกองค์ประกอบด้วยแป้นพิมพ์ลัดก็ได้ โดยทำดังนี้

  • Mac: Shift + Option + ⬇️
  • Windows/ Linux: Shift + Alt + ⬇️

องค์ประกอบซ้ำกัน

ปัญหาเกี่ยวกับ Chromium: 1150797, 1150797

เครื่องมือเลือกสีสำหรับพร็อพเพอร์ตี้ CSS ที่กําหนดเอง

ตอนนี้แผงสไตล์จะแสดงเครื่องมือเลือกสีสำหรับพร็อพเพอร์ตี้ CSS ที่กําหนดเอง

นอกจากนี้ คุณยังกดแป้น Shift ค้างไว้แล้วคลิกตัวเลือกสีเพื่อสลับการแสดงค่าสีเป็น RGBA, HSLA และ Hex ได้อีกด้วย

เครื่องมือเลือกสีสำหรับพร็อพเพอร์ตี้ CSS ที่กําหนดเอง

ปัญหา Chromium: 1147016

แป้นพิมพ์ลัดใหม่สำหรับคัดลอกพร็อพเพอร์ตี้ CSS

ตอนนี้คุณสามารถคัดลอกพร็อพเพอร์ตี้ CSS ได้เร็วขึ้นด้วยแป้นพิมพ์ลัดใหม่ 2-3 รายการ

เลือกองค์ประกอบในแผงองค์ประกอบ จากนั้นคลิกขวาที่คลาส CSS หรือพร็อพเพอร์ตี้ CSS ในแผงสไตล์เพื่อคัดลอกค่า

แป้นพิมพ์ลัดใหม่สำหรับคัดลอกพร็อพเพอร์ตี้ CSS

ตัวเลือกการคัดลอกสำหรับคลาส CSS

  • คัดลอกตัวเลือก คัดลอกชื่อตัวเลือกปัจจุบัน
  • คัดลอกกฎ คัดลอกกฎของตัวเลือกปัจจุบัน
  • คัดลอกประกาศทั้งหมด: คัดลอกประกาศทั้งหมดภายใต้กฎปัจจุบัน ซึ่งรวมถึงพร็อพเพอร์ตี้ที่ไม่ถูกต้องและพร็อพเพอร์ตี้ที่มีคำนำหน้า

ตัวเลือกการคัดลอกสำหรับพร็อพเพอร์ตี้ CSS

  • คัดลอกการประกาศ คัดลอกการประกาศของบรรทัดปัจจุบัน
  • คัดลอกพร็อพเพอร์ตี้ คัดลอกพร็อพเพอร์ตี้ของบรรทัดปัจจุบัน
  • คัดลอกค่า: คัดลอกค่าของบรรทัดปัจจุบัน

ปัญหา Chromium: 1152391

การอัปเดตคุกกี้

ตัวเลือกใหม่ในการแสดงคุกกี้ที่ถอดรหัส URL แล้ว

ตอนนี้คุณเลือกดูค่าคุกกี้ที่ถอดรหัส URL ได้ในแผงคุกกี้

ไปที่แผงแอปพลิเคชัน แล้วเลือกแผงคุกกี้ เลือกคุกกี้รายการใดก็ได้ในรายการ เปิดใช้ช่องทําเครื่องหมายแสดง URL ที่ถอดรหัสแล้วใหม่เพื่อดูคุกกี้ที่ถอดรหัสแล้ว

ตัวเลือกในการแสดงคุกกี้ที่ถอดรหัส URL แล้ว

ปัญหา Chromium: 997625

ล้างเฉพาะคุกกี้ที่มองเห็นได้

ตอนนี้ปุ่มล้างคุกกี้ทั้งหมดในแผงคุกกี้ได้เปลี่ยนเป็นปุ่มล้างคุกกี้ที่กรองแล้ว

ในแผงแอปพลิเคชัน > แผงคุกกี้ ให้ป้อนข้อความในกล่องข้อความเพื่อกรองคุกกี้ ในตัวอย่างนี้ เราจะกรองรายการตาม "PREF" คลิกปุ่มล้างคุกกี้ที่กรองเพื่อลบคุกกี้ที่มองเห็นได้ ล้างข้อความตัวกรองแล้วคุณจะเห็นคุกกี้อื่นๆ ยังคงอยู่ในรายการ ก่อนหน้านี้คุณมีตัวเลือกในการล้างคุกกี้ทั้งหมดเท่านั้น

ล้างเฉพาะคุกกี้ที่มองเห็นได้

ปัญหาเกี่ยวกับ Chromium: 978059

ตัวเลือกใหม่ในการล้างคุกกี้ของบุคคลที่สามในแผงพื้นที่เก็บข้อมูล

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

ตัวเลือกในการล้างคุกกี้ของบุคคลที่สาม

ปัญหา Chromium: 1012337

แก้ไขคำแนะนำสำหรับไคลเอ็นต์ User Agent สําหรับอุปกรณ์ที่กําหนดเอง

ตอนนี้คุณแก้ไขคำแนะนำสำหรับไคลเอ็นต์ User Agent สำหรับอุปกรณ์ที่กำหนดเองได้แล้ว

ไปที่การตั้งค่า > อุปกรณ์ แล้วคลิกเพิ่มอุปกรณ์ที่กำหนดเอง... ขยายส่วนคำแนะนำสำหรับไคลเอ็นต์ User Agent เพื่อแก้ไขคำแนะนำสำหรับไคลเอ็นต์

แก้ไขคำแนะนำสำหรับไคลเอ็นต์ User Agent

คำแนะนำสำหรับไคลเอ็นต์ User Agent เป็นอีกทางเลือกสำหรับสตริง User Agent ซึ่งช่วยให้นักพัฒนาแอปเข้าถึงข้อมูลเกี่ยวกับเบราว์เซอร์ของผู้ใช้ด้วยวิธีที่เคารพความเป็นส่วนตัวและใช้งานง่าย ดูข้อมูลเพิ่มเติมเกี่ยวกับคำแนะนำสำหรับไคลเอ็นต์ User Agent ใน web.dev/user-agent-client-hints/

ปัญหา Chromium: 1073909

การอัปเดตแผงเครือข่าย

เก็บการตั้งค่า "บันทึกบันทึกเครือข่าย" ไว้

ตอนนี้เครื่องมือสําหรับนักพัฒนาเว็บจะเก็บการตั้งค่า "บันทึกบันทึกเครือข่าย" ไว้ ก่อนหน้านี้ เครื่องมือสำหรับนักพัฒนาเว็บจะรีเซ็ตตัวเลือกของผู้ใช้ทุกครั้งที่หน้าเว็บโหลดซ้ำ

บันทึกบันทึกเครือข่าย

ปัญหา Chromium: 1122580

ดูการเชื่อมต่อ WebTransport ในแผงเครือข่าย

ตอนนี้แผงเครือข่ายจะแสดงการเชื่อมต่อ WebTransport

การเชื่อมต่อ WebTransport

WebTransport เป็น API ใหม่ที่ให้บริการการรับส่งข้อความแบบไคลเอ็นต์-เซิร์ฟเวอร์แบบ 2 ทิศทางที่มีเวลาในการตอบสนองต่ำ ดูข้อมูลเพิ่มเติมเกี่ยวกับกรณีการใช้งานและวิธีแสดงความคิดเห็นเกี่ยวกับอนาคตของการใช้งานได้ใน web.dev/webtransport/

ปัญหา Chromium: 1152290

เปลี่ยนชื่อ "ออนไลน์" เป็น "ไม่มีการจำกัด"

ตัวเลือกการจําลองเครือข่าย "ออนไลน์" ได้เปลี่ยนชื่อเป็น "ไม่มีการจํากัด" แล้ว

บันทึกบันทึกเครือข่าย

ปัญหา Chromium: 1028078

ตัวเลือกการคัดลอกใหม่ในคอนโซล แผงแหล่งที่มา และแผงสไตล์

แป้นพิมพ์ลัดใหม่สำหรับคัดลอกออบเจ็กต์ในแผงคอนโซลและแหล่งที่มา

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

คัดลอกออบเจ็กต์ในคอนโซล

คัดลอกออบเจ็กต์ในแผงแหล่งที่มา

ปัญหาเกี่ยวกับ Chromium: 1149859, 1148353

แป้นพิมพ์ลัดใหม่สำหรับคัดลอกชื่อไฟล์ในแผงแหล่งที่มาและแผงสไตล์

ตอนนี้คุณสามารถคัดลอกชื่อไฟล์ได้โดยคลิกขวาที่รายการต่อไปนี้

  • ไฟล์ในแผงแหล่งที่มา หรือ
  • ชื่อไฟล์ในแผงสไตล์ในแผงองค์ประกอบ

เลือกคัดลอกชื่อไฟล์จากเมนูตามบริบทเพื่อคัดลอกชื่อไฟล์

คัดลอกชื่อไฟล์ในแผงแหล่งที่มา

คัดลอกชื่อไฟล์ในแผงสไตล์

ปัญหา Chromium: 1155120

การอัปเดตมุมมองรายละเอียดเฟรม

ข้อมูล Service Worker ใหม่ในมุมมองรายละเอียดเฟรม

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดง Service Worker โดยเฉพาะใต้เฟรมที่สร้าง Service Worker ดังกล่าว

ในแผงแอปพลิเคชัน ให้ขยายเฟรมที่มี Service Worker แล้วเลือก Service Worker ใต้ต้นไม้ Service Worker เพื่อดูรายละเอียด

ข้อมูล Service Worker ในมุมมองรายละเอียดเฟรม

ปัญหา Chromium: 1122507

วัดข้อมูลความทรงจำในมุมมองรายละเอียดเฟรม

ตอนนี้สถานะ performance.measureMemory() API จะแสดงในส่วนความพร้อมใช้งานของ API

performance.measureMemory() API ใหม่จะประมาณการใช้หน่วยความจําของหน้าเว็บทั้งหน้า ดูวิธีตรวจสอบการใช้งานหน่วยความจําทั้งหมดของหน้าเว็บด้วย API ใหม่นี้ในบทความนี้

วัดหน่วยความจํา

ปัญหา Chromium: 1139899

แสดงความคิดเห็นจากแท็บปัญหา

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

ลิงก์ความคิดเห็นเกี่ยวกับปัญหา

เฟรมที่ลดน้อยลงในแผงประสิทธิภาพ

เมื่อวิเคราะห์ประสิทธิภาพการโหลดในแผงประสิทธิภาพ ตอนนี้ส่วนเฟรมจะทําเครื่องหมายเฟรมที่หลุดเป็นสีแดง วางเมาส์เหนือวิดีโอเพื่อดูอัตราเฟรม

เฟรมที่ลดน้อยลง

ปัญหา Chromium: 1075865

จำลองอุปกรณ์แบบพับได้และหน้าจอคู่ในโหมดอุปกรณ์

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

หลังจากเปิดใช้แถบเครื่องมือของอุปกรณ์แล้ว ให้เลือกอุปกรณ์อย่างใดอย่างหนึ่งต่อไปนี้ Surface Duo หรือ Samsung Galaxy Fold

คลิกไอคอนแถบใหม่เพื่อสลับระหว่างโหมดหน้าจอเดียวหรือแบบพับ และโหมดหน้าจอคู่หรือแบบกาง

นอกจากนี้ คุณยังเปิดใช้ฟีเจอร์เว็บแพลตฟอร์มเวอร์ชันทดลองเพื่อเข้าถึงฟีเจอร์สื่อ CSSscreen-spanning ใหม่และ JavaScript getWindowSegments API ได้ด้วย ไอคอนทดลองจะแสดงสถานะของการแจ้งว่าฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง ไอคอนจะไฮไลต์เมื่อเปิดใช้การแจ้งว่าไม่เหมาะสม ไปที่ chrome://flags แล้วสลับการตั้งค่า

จำลองหน้าจอคู่

ปัญหา Chromium: 1054281

ฟีเจอร์ทดลอง

ทดสอบเบราว์เซอร์โดยอัตโนมัติด้วย Puppeteer Recorder

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

ไปที่หน้าสาธิตนี้ เปิดแผงแหล่งที่มาในเครื่องมือสำหรับนักพัฒนาเว็บ เลือกแท็บการบันทึกในแผงด้านซ้าย เพิ่มไฟล์บันทึกใหม่และตั้งชื่อไฟล์ (เช่น test01.js)

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

หากต้องการเรียกใช้สคริปต์ ให้ทําตามคู่มือการเริ่มต้นใช้งานในเว็บไซต์อย่างเป็นทางการของ Puppeteer

โปรดทราบว่านี่เป็นการทดสอบระยะเริ่มต้น เราวางแผนที่จะปรับปรุงและขยายฟังก์ชันการทำงานของโปรแกรมอัดเสียงในอนาคต

โปรแกรมบันทึกของ Puppeteer

ปัญหา Chromium: 1144127

เครื่องมือแก้ไขแบบอักษรในแผงรูปแบบ

ตัวแก้ไขแบบอักษรแบบใหม่เป็นตัวแก้ไขแบบป๊อปอัปในแผงสไตล์สำหรับพร็อพเพอร์ตี้ที่เกี่ยวข้องกับแบบอักษรเพื่อช่วยให้คุณพบแบบอักษรที่เหมาะกับหน้าเว็บของคุณ

เมนูแบบป๊อปอัปมี UI ที่เรียบง่ายเพื่อจัดการแบบอักษรแบบไดนามิกด้วยชุดประเภทอินพุตที่ใช้งานง่าย

เครื่องมือแก้ไขแบบอักษรในแผงรูปแบบ

ปัญหา Chromium: 1093229

เครื่องมือแก้ไขข้อบกพร่อง Flexbox ของ CSS

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

ตอนนี้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะวาดเส้นแนะนำเพื่อช่วยให้คุณเห็นภาพพร็อพเพอร์ตี้ align-items ของ CSS ได้ดียิ่งขึ้น ระบบยังรองรับพร็อพเพอร์ตี้ gap ของ CSS ด้วย ในตัวอย่างนี้เรามี CSS gap: 12px; สังเกตรูปแบบการแรเงาของช่องว่างแต่ละช่อง

Flexbox

ปัญหา Chromium: 1139949

แท็บการละเมิด CSP ใหม่

ดูการละเมิดนโยบายรักษาความปลอดภัยเนื้อหา (CSP) ทั้งหมดได้อย่างรวดเร็วในแท็บการละเมิด CSP ใหม่ แท็บใหม่นี้เป็นการทดสอบที่จะช่วยให้คุณทำงานกับหน้าเว็บที่มีการละเมิด CSP และประเภทที่เชื่อถือได้จํานวนมากได้ง่ายขึ้น

แท็บการละเมิด CSP

ปัญหา Chromium: 1137837

การคำนวณคอนทราสต์สีแบบใหม่ - อัลกอริทึมคอนทราสต์การรับรู้ขั้นสูง (APCA)

อัลกอริทึมคอนทราสต์ที่รับรู้ขั้นสูง (APCA) จะเข้ามาแทนที่อัตราส่วนคอนทราสต์ตามหลักเกณฑ์ AA/AAA ในเครื่องมือเลือกสี

APCA เป็นวิธีใหม่ในการคํานวณคอนทราสต์โดยอิงตามงานวิจัยสมัยใหม่เกี่ยวกับการรับรู้สี APCA ขึ้นอยู่กับบริบทมากกว่าเมื่อเทียบกับหลักเกณฑ์ AA/AAA ระบบจะคำนวณคอนทราสต์โดยอิงตามคุณสมบัติเชิงพื้นที่ของข้อความ (น้ำหนักและขนาดแบบอักษร) สี (ความแตกต่างของระดับความสว่างที่รับรู้ระหว่างข้อความและพื้นหลัง) และบริบท (แสงโดยรอบ สภาพแวดล้อม วัตถุประสงค์ของข้อความ)

APCA ในเครื่องมือเลือกสี

ตัวอย่างนี้แสดงเกณฑ์ APCA ที่ 38% อัตราส่วนคอนทราสต์ต้องเท่ากับหรือมากกว่าค่าที่ระบุ ค่านี้คำนวณตามน้ำหนักและขนาดแบบอักษร โดยอิงตามตารางการค้นหา APCA นี้

ปัญหา Chromium: 1121900

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

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

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

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

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

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