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

Jecelyn Yeen

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

เบรกพอยท์ของการละเมิดประเภท Trusted

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

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

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

เบรกพอยท์ของการละเมิดประเภท Trusted

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

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

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

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

จับภาพหน้าจอของโหนดนอกวิวพอร์ต

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

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

จับภาพหน้าจอของโหนดนอกวิวพอร์ต

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

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

ตรวจสอบคำขอเครือข่าย Trust Token ด้วยแท็บ Trust Token ใหม่

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

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

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

ปัญหาเกี่ยวกับ 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 ด้วยตนเองอยู่ตลอดเวลา

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

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

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

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

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

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

  • Mac: Shift + Option + ⬇️
  • หน้าต่าง/ Linux: Shift + Alt + ⬇️

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

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

ตัวเลือกสีสำหรับคุณสมบัติ CSS ที่กำหนดเอง

ตอนนี้แผงรูปแบบจะแสดงตัวเลือกสีสำหรับคุณสมบัติ CSS ที่กำหนดเอง

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

ตัวเลือกสีสำหรับคุณสมบัติ CSS ที่กำหนดเอง

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

แป้นพิมพ์ลัดใหม่เพื่อคัดลอกคุณสมบัติ CSS

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

ในแผงองค์ประกอบ ให้เลือกองค์ประกอบ จากนั้นคลิกขวาที่คลาส 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 Workers เพื่อดูรายละเอียด

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

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

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

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

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

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

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

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

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

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

เฟรมที่ถูกตัดในแผงประสิทธิภาพ

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

ลบเฟรมแล้ว

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

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

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

หลังจากเปิดใช้แถบเครื่องมืออุปกรณ์ ให้เลือกอุปกรณ์ Surface Duo หรือ Samsung Galaxy Fold

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

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

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

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

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

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

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

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

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

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

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

เครื่องอัดเสียงหุ่นเชิด

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

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

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

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

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

ปัญหา Chromium: 1093229

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

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

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

เฟล็กซ์บ็อกซ์

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

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

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

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

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

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

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

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

APCA ในตัวเลือกสี

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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