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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

โฆษณาที่ไฮไลต์ด้วยสีแดง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    แบบอักษรที่แสดงผล: ในเครื่อง

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

  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. โหลดหน้านี้ซ้ำและวางเมาส์เหนือ img src src รูปภาพปัจจุบัน (currentSrc) เปลี่ยนเป็นรูปภาพ WebP สำรองแล้ว

จำลองประเภทรูปภาพ

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