ใช้เอฟเฟกต์อื่นๆ เช่น เปิดใช้ธีมมืดอัตโนมัติ จำลองโฟกัส และอื่นๆ

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

ไฮไลต์เฟรมโฆษณา

วิธีตรวจสอบว่าเฟรมมีการติดแท็กเป็นโฆษณาหรือไม่

1. เปิดแท็บการแสดงผลในการสาธิตนี้และทำเครื่องหมายที่ไฮไลต์เฟรมโฆษณา
2. สังเกตเฟรมโฆษณาที่ไฮไลต์ด้วยสีแดง

จำลองหน้าที่โฟกัส

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

วิธีจำลองหน้าที่โฟกัส

1. เปิดหน้าที่มีองค์ประกอบที่ต้องการแก้ไขข้อบกพร่อง เช่น เว็บไซต์ YouTube ด้วยแถบค้นหา

2. ในหน้าดังกล่าว ให้เปิดแท็บการแสดงผล จากนั้นตรวจสอบและล้างจำลองหน้าที่โฟกัส

   

หรือคุณจะดูตัวเลือกเดียวกันใต้ปุ่ม :hov ในแถบการดำเนินการในองค์ประกอบ > ก็ได้ รูปแบบ

ปิดใช้แบบอักษรในเครื่อง

ตรวจสอบว่าตัวเลือกแบบอักษรในเครื่องทำงานได้ตามที่คาดไว้โดยปิดใช้แหล่งที่มา local() ในกฎ @font-face

นักพัฒนาซอฟต์แวร์และนักออกแบบมักจะใช้แบบอักษรเดียวกัน 2 ชุดที่แตกต่างกันระหว่างการพัฒนา

• แบบอักษรในเครื่องสำหรับเครื่องมือออกแบบของคุณ และ
• แบบอักษรเว็บสำหรับโค้ดของคุณ

การปิดใช้แบบอักษรในเครื่องช่วยให้คุณทําสิ่งต่อไปนี้ได้ง่ายขึ้น

• แก้ไขข้อบกพร่องและวัดผลการทำงานและการเพิ่มประสิทธิภาพในการโหลดแบบอักษรบนเว็บ
• ยืนยันความถูกต้องของกฎ @font-face ของ CSS
• ดูความแตกต่างระหว่างแบบอักษรเว็บและเวอร์ชันในเครื่อง

จำลองแหล่งที่มา local() ที่ขาดหายไปในกฎ @font-face:

1. ตรวจสอบประโยคด้านบน เปิดElements > เลื่อนลงไปจนสุดส่วนที่คำนวณแล้ว แล้วก็พบว่า Chrome พบ Courier New ในไฟล์ในเครื่องในส่วนแบบอักษรที่แสดงผล

   

2. เปิดแท็บการแสดงผล แล้วเลือกปิดใช้แบบอักษรในเครื่อง จากนั้น refresh โหลดหน้านี้ซ้ำ

3. สังเกตประโยคใน Roboto ที่พบในเว็บ

   

เปิดใช้โหมดมืดอัตโนมัติ

ดูว่าเว็บไซต์ของคุณอาจมีลักษณะเป็นอย่างไรในโหมดมืด แม้ว่าคุณจะไม่ได้ติดตั้งก็ตาม

Chrome 96 เปิดตัวช่วงทดลองใช้จากต้นทางสำหรับธีมมืดอัตโนมัติใน Android เมื่อใช้ฟีเจอร์นี้ เบราว์เซอร์จะนำธีมมืดที่สร้างขึ้นโดยอัตโนมัติไปใช้กับเว็บไซต์ธีมสว่างหากผู้ใช้เลือกใช้ธีมมืดในระบบปฏิบัติการ

วิธีเปิดใช้โหมดมืดอัตโนมัติ

1. ในหน้านี้ ให้เปิดแท็บการแสดงผล แล้วเลือกเปิดใช้โหมดมืดอัตโนมัติ
2. สังเกตหน้านี้ในโหมดมืด

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

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

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

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

1. เปิดแท็บการแสดงผล

2. ในส่วนจำลองความบกพร่องในการมองเห็น ให้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้จากรายการแบบเลื่อนลง

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

ปิดใช้รูปแบบรูปภาพ AVIF และ WebP

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

สมมติว่าคุณมีโค้ด HTML ต่อไปนี้เพื่อแสดงรูปภาพในรูปแบบ AVIF และ WebP สำหรับเบราว์เซอร์รุ่นใหม่ พร้อมด้วยรูปภาพ PNG สำรองสำหรับเบราว์เซอร์รุ่นเก่า

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

วิธีปิดใช้รูปภาพ AVIF ทั้งหมดในหน้าเว็บ (หรือในทำนองเดียวกันคือรูปภาพ WebP)

1. เปิดแท็บการแสดงผล แล้วเลือกปิดใช้รูปแบบรูปภาพ AVIF
2. refresh โหลดหน้าเว็บซ้ำและวางเมาส์เหนือ img src src รูปภาพปัจจุบัน (currentSrc) เป็นรูปภาพ WebP สำรองแล้ว

ในทำนองเดียวกัน คุณก็ปิดใช้รูปภาพ WebP ได้