Temukan efek yang berguna untuk diterapkan pada halaman Anda dengan referensi opsi tab Rendering ini.
Tandai frame iklan
Untuk memeriksa apakah frame diberi tag sebagai iklan:
- Buka tab Rendering pada demo ini dan centang Tandai frame iklan.
- Amati frame iklan yang ditandai dengan warna merah.
Emulasikan halaman terfokus
Jika Anda mengalihkan fokus dari halaman ke DevTools, beberapa elemen overlay akan otomatis disembunyikan jika dipicu oleh fokus. Misalnya, menu drop-down, menu, atau pemilih tanggal. Opsi check_box Emulasikan halaman terfokus memungkinkan Anda men-debug elemen tersebut seolah-olah sedang menjadi fokus.
Untuk mengemulasi halaman terfokus:
- Buka halaman dengan elemen yang akan di-debug, misalnya, situs YouTube dengan kotak penelusurannya.
Di halaman tersebut, buka tab Rendering, lalu centang dan hapus centang pada opsi Emmulate a focus page.
Anda juga dapat menemukan opsi yang sama di bagian tombol :hov
pada panel tindakan di bagian Elements > Styles.
Nonaktifkan font lokal
Periksa apakah alternatif font lokal berfungsi seperti yang diharapkan dengan menonaktifkan sumber local()
dalam aturan @font-face
.
Sering kali, developer dan desainer menggunakan dua salinan berbeda dari font yang sama selama pengembangan:
- {i>Font<i} lokal untuk {i>tool<i} desain Anda, dan
- Font web untuk kode Anda
Menonaktifkan font lokal memudahkan Anda untuk:
- Lakukan debug dan ukur performa dan pengoptimalan pemuatan font web
- Verifikasi ketepatan aturan
@font-face
CSS Anda - Temukan perbedaan antara font web dan versi lokalnya
Emulasikan sumber local()
yang tidak ada di aturan @font-face
:
Periksa kalimat di atas, buka Elements > Computed, scroll hingga ke bawah, lalu di bagian Rendered Fonts, temukan bahwa Chrome menemukan Courier New di file lokal.
Buka tab Rendering, centang Nonaktifkan font lokal, lalu muat ulang halaman.
Amati kalimat dalam Roboto yang ditemukan di web.
Aktifkan mode gelap otomatis
Lihat seperti apa tampilan situs Anda dalam mode gelap meskipun Anda tidak menerapkannya.
Chrome 96 memperkenalkan Uji Coba Origin untuk Tema Gelap Otomatis di Android. Dengan fitur ini, browser menerapkan tema gelap yang dibuat secara otomatis ke situs bertema terang jika pengguna memilih menggunakan tema gelap dalam sistem operasi.
Untuk mengaktifkan mode gelap otomatis:
- Di halaman ini, buka tab Rendering dan centang Aktifkan mode gelap otomatis.
- Amati halaman ini dalam mode gelap.
Emulasikan kekurangan penglihatan
Setiap orang harus dapat mengakses dan menikmati web. Google berkomitmen untuk mewujudkannya.
Dengan Chrome DevTools, Anda dapat melihat bagaimana orang yang memiliki kekurangan penglihatan melihat situs Anda, sehingga Anda dapat membuatnya lebih baik bagi mereka. Untuk mengetahui informasi selengkapnya, lihat Menyimulasikan kekurangan penglihatan warna.
Untuk mengemulasi kekurangan penglihatan:
- Buka tab Rendering.
Pada Emulate vision deficiencies, pilih salah satu opsi berikut dari menu drop-down:
- Tidak ada emulasi.
- Penglihatan kabur.
- Kontras yang dikurangi.
- Protanopia (tanpa warna merah). Persepsi warna merah yang rendah; kebingungan tentang warna hijau, merah, dan kuning.
- Deuteranopia (tanpa warna hijau). Persepsi hijau rendah; kebingungan tentang hijau, merah, dan kuning.
- Tritanopia (tanpa warna biru). Persepsi rendah tentang biru; kebingungan tentang hijau dan biru.
- Achromatopsia (tanpa warna). Tidak adanya penglihatan warna sebagian atau total.
Menonaktifkan format gambar AVIF dan WebP
Emulasi ini memudahkan developer untuk menguji berbagai skenario pemuatan gambar tanpa harus beralih browser.
Misalnya Anda memiliki kode HTML berikut untuk menayangkan gambar dalam format AVIF dan WebP untuk browser yang lebih baru, dengan gambar PNG penggantian untuk browser lama.
<picture>
<source srcset="test.avif" type="image/avif">
<source srcset="test.webp" type="image/webp">
<img src="test.png" alt="A test image">
</picture>
Untuk menonaktifkan semua gambar AVIF di halaman (atau, serupa, gambar WebP):
- Buka tab Rendering, lalu centang Disable AVIF image format.
img src
. Gambar saat ini src (currentSrc
) sekarang menjadi gambar WebP penggantian.
Muat ulang halaman dan arahkan kursor ke
Anda juga dapat menonaktifkan gambar WebP.